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

ES6 const is not immutable

1 xFJr7vK8l6adpUNe60AVJQ

Now most of the ES6 features can be used in modern browsers without transpiling. If you are using ES6 features in your project then you must have come across the const keyword.

Most of us know that the value assigned to the const cannot be changed. Yes, this is true when your are assigning primitive values.

const-2

But when comes with object type you can change the object’s property.

const-1

This proves that the const is not immutable and it cannot be reassigned or re-declared.

MDN says this clearly in their documentation.

The `const` declaration creates a read-only reference to a value. It does not mean the value it holds is immutable, just that the variable identifier cannot be reassigned.

Happy Scripting…