Parameter handling in ES6

ECMA Script 6 provides the following extension support for the parameters of JavaScript methods.

  1. Default parameter values
  2. Rest parameter
  3. Spread operator

Default parameter values:

Example with ES5 & ES6


        //[ES5]

        function sum(a, b) {
            if (!b)
                b = 2;
            return a + b;
        }
        var s = sum(5);
        console.log(s);//Result will be 7 as undefined variable 'b' assigned with value 2

In general we may pass lesser number of parameters instead of total capacity of parameters to the JavaScript methods. In this case the remaining parameters will be undefined.

This “undefined” scenario can be avoided in ES6 by initializing default values for function parameters. Have a look at below code snippets.


        //[ES6]

        function sum(a, b = 10) {
            return a + b;
        }
        var s1 = sum(5);
        console.log(s1); //Result will be 15 due to default value
        var s2 = sum(5, 15);
        console.log(s2); //Result will be 20 due to passed value (Override default value of  “b”)

Note: The default values of function parameter will be overridden when we pass values to those parameters.

Rest parameter:

In ECMA Script 5, while we are calling the JavaScript functions with number of parameters that is greater than the actual parameters count of that method, it will ignore the “Rest” parameters and receive the actual parameters alone. So in this case we will use the “arguments” scope to get those “Rest” parameter values.


        //[ES5]

        function sum(a, b) {
            return a + b + arguments[2] + arguments[3];
        }
        var s = sum(10, 30, 40, 20);
        console.log(s); //Result is 100

But in ES6, there is “Rest Parameter” (…parameterName) support for receiving those remaining parameter values. Have a look at the below code snippets.


        //[ES6]

        function sum(a, b, ...arg) {
            return a + b + arg[0] + arg[1];
        }
        var s = sum(10, 30, 40, 20, 50, 60);
        console.log(s); //Result is 100

Note: Rest parameter must be last formal parameter

Spread operator:

The Spread operator support (…arrayName) in ES6 is enabled to iterate over the array values or string values and also to generate array function parameters.

Examples: (ES 5 vs ES 6)

        //ES5

        var arr1 = [4, 5, 6], arr2 = [1, 2, 3].concat(arr1);
        console.log(arr2); // [1, 2, 3, 4, 5, 6]

        var str = "HTML".split("");
        console.log(str); // ["H", "T", "M", "L"]

        //ES6

        var arr1 = [4,5,6], arr2 = [1,2,3, ...arr1];
        console.log(arr2); // [1, 2, 3, 4, 5, 6]

        var str = "HTML";
        console.log([...str]); // ["H", "T", "M", "L"]

Spread operator with function parameter:

In ES 5 array values can be spread to each parameter of the function with the help of “.apply()” predefined method like below code snippets.

Example:

        function sum(a, b, c, d) {
            return a + b + c + d;
        }
        var s = sum.apply("", [5, 10, 15, 20]);
        console.log(s); // Result is 50

But in ES6 Spread operator can be used for spreading the parameter values to the functions. We can pass the parameter values in the following ways.

Example 1:

        function sum(a, b, c, d) {
            return a + b + c + d;
        }
        var arr = [5, 10, 15, 20],
          s = sum(...arr);
        console.log(s); // Result is 50
Example 2:

        function sum(a, ...arg) {
            return a + arg[0] + arg[1] + arg[2];
        }
        var arr = [10, 15, 20],
          s = sum(5, ...arr);
        console.log(s); // Result is 50

Note: Any type of parameter value collection can be passed to the “Rest parameters”.

Advertisements