Best of Modern JavaScript — Parameters and Spread

Since 2015, JavaScript has improved immensely.

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

In this article, we’ll look at working with objects and array parameter destructuring and the spread operator.

We can create optional parameter by setting the parameter to undefined to indicate that it’s optional.

For example, we can write:

function foo(x, optional = undefined) {
  //···
}

We set optional to undefined to indicate that it’s optional.

If we have required parameters, there’s no good way to ensure that they’re sweet with ES5.

For instance, we may have to do something like:

function foo(required) {
  if (required === undefined) {
    throw new Error();
  }
  //···
}

or we can write:

function foo(required) {
  if (arguments.length < 1) {
    throw new Error();
  }
  //···
}

They aren’t very elegant.

However, we can improve this by writing with ES6:

function checkRequired() {
  throw new Error();
}

function foo(required = checkRequired()) {
  return required;
}

We assigned a function call to the parameter so that it runs when required is undefined .

It throws an error, so it’ll be obvious when it’s undefined .

This way, we can enforce the required parameters having a value.

JavaScript has no way to control the number of parameters passed into the function.

However, we can do this easily with ES6 by checking the number of arguments passed in with the rest operator.

For example, we can write:

function foo(...args) {
  if (args.length > 2) {
    throw new Error();
  }
  //...
}

The rest operator returns an array, so we can check the length of it with the length property.

If there’re more parameters than we like, then we can throw an error.

We can also write:

function foo(x, y, ...empty) {
  if (empty.length > 0) {
    throw new Error();
  }
}

to ensure that we have no extra parameters.

We can use the spread operator to spread array entries as arguments of a function call.

For instance, we can write:

Math.max(...[-1, 2, 3, 4])

This is the same as:

Math.max(-1, 2, 3, 4)

We can do the same with the push method.

For example, we can write:

const arr1 = [1, 2];
const arr2 = [3, 4];

arr1.push(...arr2);

The arr2 is spread as argument of push .

The spread operator also works with constructors.

For example, we can write:

new Date(...[2020, 11, 25])

to spread an argument into the Date constructor.

The spread operator also works with arrays.

For instance, we can write:

[1, ...[2, 3], 4]

And we get [1, 2, 3, 4] returned.

We can use it to merge arrays into one.

For example, we can write:

const x = [1, 2];
const y = [3];
const z = [4, 5];

const arr = [...x, ...y, ...z];

We spread the x , y and z arrays into the array.

Then arr is [1, 2, 3, 4, 5] since the entries are spread into the new array.

We can add optional and required parameters in various ways.

Also, we can use the spread operator to spread arrays in various places.