Learn ES6 - Default Parameters | ecmascript 6 Tutorials and examples

In this Post, We are going to learn the es6 features -Default arguments to the function tutorials with examples.

Prior to Es6 Java version, The following is the way to handle default parameter values.

ES5 Default Parameters and previous javascript versions

Declared a convertEmployObjectToJsonString function to convert the Employee arguments to JSON string, has two arguments - name and salary

The name is a required argument

Salary is optional parameters

salary argument is an optional parameter. When salary argument is not passed, the default value is assigned with 5000.

function convertEmployObjectToJsonString(name,salary){
    salary = (typeof salary !== 'undefined') ? salary : 5000;
    return JSON.stringify({'name':name,'salary':salary});
}
console.log(convertEmployObjectToJsonString('Frank', 6000));
console.log(convertEmployObjectToJsonString('Ram'));
console.log(convertEmployObjectToJsonString());
console.log(convertEmployObjectToJsonString(null,null));

Output is

{"name":"Frank","salary":6000}
{"name":"Ram","salary":5000}
{"salary":5000}

When convertEmployObjectToJsonString is called, salary argument is not passed means undefined, the Default value is 5000. We have added the check for salary arguments for the undefined case and if it is undefined, the the default value is initialized.

ECMAScript 2016 Default parameters 

Default parameters are syntax change to the function parameters Es6 is a new javascript version changes Default parameters declared in functional parameters initialized with a a default value when the parameter to the function is undefined or not passed. Syntax

function [name]([param1[ = defaultValue1 ][, ..., paramN[ = defaultValueN ]]]) {
   statements
}

The same above example is rewritten using es6 default parameters

function convertEmployObjectToJsonString(name,salary=5000){
    return JSON.stringify({'name':name,'salary':salary});
}
console.log(convertEmployObjectToJsonString('Frank', 6000));
console.log(convertEmployObjectToJsonString('Ram',''));
console.log(convertEmployObjectToJsonString());
console.log(convertEmployObjectToJsonString(null,null));
console.log(convertEmployObjectToJsonString('asdfads',null));
console.log(convertEmployObjectToJsonString('Ram','undefined'));

output is

{"name":"Frank","salary":6000}
{"name":"Ram","salary":""}
{"salary":5000}
{"name":null,"salary":null}
{"name":"asdfads","salary":null}
{"name":"Ram","salary":"undefined"}

Points to Remember 

In javascript, Arguments to functions default to undefined, This allows changing the different value. When valid values are passed as arguments, Default parameters have not initialized any value, empty and null are considered valid values, Undefined, the value is not passed, the argument to the function is not passed, undefined value is considered, the default value is initialized with default value Default arguments are evaluated at called time.

Please map the above results with this points to have a good understanding.

Function as default parameter example 

Here Function next is declared inside the body of the getValues function. getValues has default parameters as a Function. The order of the execution is as follows.

Default parameters always run first. Nested Function declared in function body are executed next. When getValues() method is called with a function parameter, the function declaration is not available so the below code throws an error - Uncaught ReferenceError: next is not defined So the takeaway point is, Functions declared inside other function body are not passed as default arguments.

function getValues(value = next()) {
  function next() { return 'next function method'; }
}

Fix/ solution for ReferenceError is to move the inside function to global or outside scope.

function next() { return 'next function method'; }

function getValues(value = next()) {
}

Default parameters Destructuring Assignment example

 Default parameters can also be used with Destruction assignment. Destruction assignment is a new kind of syntax introduced in ES6 and expression to retrieve values from arrays and objects and assigned to variables.

Destruction assignment example

var value1, value2;
[value1, value2] = [30, 50]; // outputs value1=30 and value2=50
[value1=4, value2=value1] = [];     // value1=4;value2=4
[value1=5, value2=value1] = [6];    // value1=6; value2=6
[value1=3, value2=value1] = [3,5]; // value1=3; value2=5

here is an example of destruction assignment as a default parameter in a function declaration

function func([a, b] = [5, 6], {c: c} = {c: 2}) {
  return a + b + c;
}
console.log(func()); // outputs 13

Destructured Object assignment example 

Default parameters can also be declared with Object destructuring assignment. The following is an example for usage of Object destruction

function funcObject ({
    name = 'Frank',
    salary = 5000
  } = {}) {

  return (`${name}, ${salary}`);
}
console.log(funcObject({
  name: 'kiran'
}));
console.log(funcObject({}));

The output of the above code

kiran, 5000
Frank, 5000