Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

JavaScript Default Parameters

DZone's Guide to

JavaScript Default Parameters

A software engineer takes a look at the expressive power of expressions in default values for parameters. Read on to learn more!

· Web Dev Zone ·
Free Resource

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

NOTE: This is a cross-post from my newsletter. I publish each email two weeks after it's sent. 

Today I thought I'd take you through one of the examples from my ES6 workshop.

Consider the following code:

function getCandy(kind, size, upperKind, callback) {
  if (!kind) {
    requiredParam('kind')
  }
  if (!size) {
    requiredParam('size')
  }
  upperKind = upperKind || kind.toUpperCase()
  callback = callback || function noop() {}
  const result = {kind, size, upperKind}
  callback(result)
  return result
}
function requiredParam(argName) {
  throw new Error(`${argName} is required`)
}

It's fairly simple, but there are potential bugs (you can read about this on MDN) and some annoying boilerplate. Luckily for us, ES6 introduced new syntax into JavaScript that we can use to simplify things a bit. In particular: default parameters. Let's check out what the above would be like when using this feature.

function getCandy(
  kind = requiredParam('kind'),
  size = requiredParam('size'),
  upperKind = kind.toUpperCase(),
  callback = function noop() {},
) {
  const result = {kind, size, upperKind}
  callback(result)
  return result
}
function requiredParam(argName) {
  throw new Error(`${argName} is required`)
}

Notice that we’re able to take each expression and put it on the right side of the equals sign. If the parameter is undefinedthen the expression on the right side will be evaluated. This allows us to only call the requiredParam function if kind or size is undefined. It also is possible to use the value of other parameters in our expression like we do in the default param for upperKindwhich I find to be a ridiculously cool feature and I use this all the time in options configuration for some of my tools (for example).

I'll add that the same kinds of semantics would apply for object destructuring (whether as a parameter or not) as well. For example, if we change the arguments to be an options object:

function getCandy(options = {}) {
  const {
    kind = requiredParam('kind'),
    size = requiredParam('size'),
    upperKind = kind.toUpperCase(),
    callback = function noop() {},
  } = options
  // etc...
}

Or, if we want to de-structure the options object directly in the parameter list:

function getCandy({
  kind = requiredParam('kind'),
  size = requiredParam('size'),
  upperKind = kind.toUpperCase(),
  callback = function noop() {},
} = {}) {
  // etc...
}

Fun stuff!

Conclusion

I hope you find this helpful! If you'd like to watch me talk about this a bit, you can check out this section of my ES6 workshop I gave and recorded at PayPal a while back: ES6 and Beyond Workshop Part 1 at PayPal (Jan 2017). Good luck!

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Topics:
web dev ,javascript ,default parameters

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}