Default parameters (ES2015) Sample

Available in Chrome 49+ | View on GitHub | Browse Samples

Background

Default parameters allow formal function parameters to be initialized with default values if no value (or undefined) is supplied.

In ES5, one would test parameter values in the body of the function and assign a value if they were undefined. In ES2015, a check in the function body is no longer required and one can simply defined default values for parameters in the function head.

Live Output


JavaScript Snippet

// Supply default values for parameters

// Before, using ES5...
function greetES5(message, to) {
  // Test parameter values in the function body, specifying a default
  to = to || 'DOM';
  // OR if (typeof to === undefined) { to = 'DOM'; }
  // OR if (arguments.length === 1) { to = 'DOM'; }
  ChromeSamples.log(message + ', ' + to);
}
greetES5('Good morning');
greetES5('Sup', 'CSS');

// After using ES2015/ES6...
// Define default parameter values in the function head
function greet(message, to = 'DOM') {
  ChromeSamples.log(message + ', ' + to);
}

greet('Good morning');
greet('Sup', 'CSS');

// Another example
function f(x, y = 12) {
  // y is 12 if not passed (or passed as undefined)
  ChromeSamples.log(`${x} + ${y} = ${x + y}`);
}

f(3);

// Here, the default parameter won't be used since we're passing in a value, even though 0 is false-y.
f(7, 0);

// For more info, read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#Passing_undefined

// Default arguments are evaluated at call time. This means
// a new array is created each time the function is called here:
function append(value, array = []) {
  array.push(value);
  ChromeSamples.log(array);
}

append(1);
append(2); // [2] instead of [1, 2]
// For more info, read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters#Evaluated_at_call_time