Best of Modern JavaScript — Default 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 working with parameters.

Default Parameter Values

We can set default parameter values in JavaScript functions since ES6.

If the value of the parameter is undefined , then the default value will be set.

For instance, if we have a function:

function foo(x, y = 0) {
  return [x, y];
}

Then if we call it by writing foo(1, 3); , then we get [1, 3] .

If we call it by writing foo(1); , then we get [1, 0] .

And if we call it by writing foo(); , then we get [undefined, 0] .

Rest Parameters

Rest parameters let us get the remaining parameters as an array.

For instance,e if we have:

function bar(pattern, ...args) {
  return {
    pattern,
    args
  };
}

Then if we call it by writing format(3, 2, 1); , we get:

{ pattern: 3, args: [2, 1] }

Destructuring Parameters

We can destructure object parameters into variables.

For instance, we can write:

function baz({
  a = 0,
  b = -1,
  c = 1
} = {}) {
  console.log(a, b, c);
  //...
}

Our baz function takes an object with the properties a , b , and c .

We set the default values for them to 0, -1, and 1 respectively.

If the argument isn’t passed in, then we set it to an object, which will then set those default values.

So if we write:

baz({
  a: 10,
  b: 30,
  c: 2
});

then a is 10, b is 30, and c is 2.

If we write:

baz({
  a: 3
});

then a is 3, b is -1 and c is 1.

And if we write:

baz({});

or

baz();

then a is 0, b is -1, and c is 1.

Whenever any value is absent, it’ll be replaced with the default value.

Spread Operator

The spread operator lets us spread iterable objects into arguments for function calls.

For instance:

Math.max(2, 3, 4, 6)

is the same as:

Math.max(...[2, 3, 4, 6])

We can also spread some arguments:

Math.max(2, ...[3, 4], 6)

In arrays, we can use the spread operator to turn iterable values in array elements.

For instance, we can write:

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

and get:

`[1,` `2, 3,` `4]`

Parameter Default Values

We can specify default values for parameters.

For instance, we can write:

function foo(x, y = 0) {
  return [x, y];
}

Then if we call it without 2nd argument, then the default value will be set as the value of y .

If we call foo(1) , then we get [1, 0] .

And if we call foo() , we get [undefined, 0] .

The default value is computed only when it’s needed

We can see this with this example:

const log = console.log;

function foo(x = log('x'), y = log('y')) {
  return [x, y];
}

If we call foo(1) , then we get 'x' .

And if we call foo() , then we get 'x' and 'y' logged.

Conclusion

We can add default parameters values to functions so that they’re assigned as the value of them when they’re undefined.