Best of Modern JavaScript — Function Parameters

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at the core features of JavaScript.

Parameter Default Values

With ES6, we can add default values to function parameters.

This is great since we won’t have to worry about parameters being undefined again.

The old way would be to use the || operator to return a default value and assign it to the parameter:

function foo(x, y) {
  x = x || 0;
  y = y || 0;
}

With default parameters, we can write:

function foo(x = 0, y = 0) {
  //···
}

It’s much shorter and cleaner.

And default parameter values are only assigned when the parameter value is undefined .

Whereas with the || operator, any falsy value would return the default value, which we may not want.

Named Parameters

Named parameters are hard to deal with before ES6.

For instance, one way to do it is to use the || operator again:

function calcVolume(dimensions) {
  var length = dimensions.length || 1;
  var width = dimensions.width || 1;
  var height = dimensions.height || 1;
  //...
}

We get each property from the dimensions object and assign them to variables.

And we used the || operator to return the default value if the property is falsy.

With ES6, we can create named parameters much more easily, thanks to the destructuring syntax.

We can just write:

function calcVolume({
  length = 1,
  width = 1,
  height = 1
}) {
  //...
}

We have an object parameter with the length , width , and height properties destructured.

This way, we can have named properties without worrying about the order that they’re called.

We also assigned a default value to each property.

Making Parameter Optional

We can make parameters optional with the || operator before ES6.

For instance, we may write:

function calcVolume(dimensions) {
  var dimensions = dimensions || {};
  var length = dimensions.length || 1;
  var width = dimensions.width || 1;
  var height = dimensions.height || 1;
  //...
}

But with ES6, we don’t have to write this many lines of code anymore.

We can just write:

function calcVolume({
  length = 1,
  width = 1,
  height = 1
} = {}) {
  //...
}

We just assigned an array to the object parameter we’re destructuring to assign a default value for the object parameter.

arguments to Rest Parameters

arguments is the old way to get arguments from a function call before ES6.

It’s an iterable object but it’s not an array.

So most of the things we can do with arrays aren’t available.

On the other hand, rest parameters are returned as arrays, so we can get arguments in an array.

Instead of writing:

function logArgs() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

with ES5 or earlier syntax, we write:

function logArgs(...args) {
  for (const arg of args) {
    console.log(arg);
  }
}

We get the args array and looped through it with the for-of loop.

Conclusion

With default parameters values and rest parameters, we can deal with function parameters much more easily.