Modern JavaScript: Default Parameters

• When we call a JavaScript function with an argument missing, the corresponding parameter gets the value undefined.

• >

  function wrapInArray(value) {
    return [value];
  }
  wrapInArray();

  Result:

  [undefined]

• This is unfortunate, because we might have mistakenly forgotten the argument, but omitting it doesn't cause an error. For that reason, few other programming languages allow us to omit arguments in this way. (In fact, this is one of the many improvements you'll find in TypeScript, which you can also learn in our courses!)

• Sometimes we want a function parameter to be optional. In the past, we would check for an undefined value in that parameter, then use a default value instead.

• >

  function add(x, y) {
    if (y === undefined) {
      y = 0;
    }
    return x + y;
  }
  [add(1, 2), add(1)];

  Result:

  [3, 1]

• That works, but it's clunky. Modern JavaScript has native support for default function arguments, so we don't need to use that trick any more. We can now declare a default value using an = inside the function parameter list. If an argument isn't passed in, we get the default value instead.

• >

  function add(x, y=0) {
    return x + y;
  }
  [add(1, 2), add(1)];

  Result:

  [3, 1]

• Defaults are evaluated when the function is called, not when it's defined. They can reference other variables, or even other arguments.

• >

  let defaultAddend = 1;
  function add(x, y=defaultAddend) {
    return x + y;
  }
  const sum1 = add(1);
  
  defaultAddend = 2;
  const sum2 = add(1);
  
  [sum1, sum2];

  Result:

  [2, 3]

• >

  function add(x, y=x) {
    return x + y;
  }
  [add(1, 2), add(1), add(2)];

  Result:

  [3, 2, 4]

• Some other programming languages handle defaults differently. Python is a notable example: in Python, the default value is evaluated only once, when the function is defined. The above example would be illegal in Python because the value of x can't be known when the function is defined. If you know Python, be very careful because this difference can lead you to introduce subtle bugs!

• Default parameters also work in class methods.

• >

  class User {
    constructor(name, isAdmin=false) {
      this.name = name;
      this.isAdmin = isAdmin;
    }
  }
  [new User('Amir').isAdmin, new User('Betty', true).isAdmin];

  Result:

  [false, true]

• Any value can be used as a default. For example, we can use an object as a default value.

• >

  function addObjects(xObj, yObj={y: 0}) {
    return xObj.x + yObj.y;
  }
  [
    addObjects({x: 1}, {y: 2}),
    addObjects({x: 1})
  ];

  Result:

  [3, 1]

• When we say "any value", we mean it! For example, we can even use an inline anonymous class as the default value.

• >

  function instantiate(TheClass) {
    return new TheClass();
  }
  class Dog { }
  instantiate(Dog) instanceof Dog;

  Result:

  Run Code

• >

  function instantiate(TheClass=class { }) {
    return new TheClass();
  }
  class Dog { }
  instantiate(Dog) instanceof Dog;

  Result:

  true
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  instantiate() instanceof Dog;

  Result:

  false

• In that example, we didn't provide an argument to instantiate. It used the default, which is an empty class. That empty class isn't a subclass of Dog, so instantiate() instanceof Dog is false.

• We can also use destructuring together with defaults. The default can even refer to a value that we get by destructuring another argument.

• >

  function addObjects({x}, yObj={y: x}) {
    return x + yObj.y;
  }
  addObjects({x: 1}, {y: 2});

  Result:

  3
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  addObjects({x: 1});

  Result:

  2

• Finally, we can use defaults together with rest parameters. That combination is rarely useful, but it is possible.

• >

  function addToLength(x=3, ...elements) {
    return x + elements.length;
  }
  addToLength(5, 'a', 'b');

  Result:

  Run Code
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  addToLength(5, 'a');

  Result:

  6
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  addToLength(5);

  Result:

  5
• Note: this code example reuses elements (variables, etc.) defined in earlier examples.

  >

  addToLength();

  Result:

  3