Default Parameters – ECMAScript 6

In JavaScript, parameters of functions default to undefined. However, in some situations, it might be useful to set a different default value.

In the past, the default value for a parameter is defined in the function body based on the value of the parameter as below:

function multiply(a, b) {
    b = (typeof b !== 'undefined') ? b : 1;
    return a * b;
}

console.log(multiply(5, 2)); // 10
console.log(multiply(5, 1)); // 5
console.log(multiply(5)); // 5

In the above code snippet the typeof parameter b is being checked, if the value is undefined then the value is set to 1.
Sometimes people will be using || operator to set default value as below

function multiply(a, b) {
    a = a;
    b = b || 1;
    return a * b;
}

console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
                      // initialization using || operator

This pattern is most used but is dangerous when we pass values like

console.log(multiply(5, 0));

Because the 0 is falsy, and so the b || 1 results in 1, not the directly passed in 0. To handle this, coders started initializing value in function bodies.

In ECMAScript 6, the checks in the function body are no longer needed, we can define the default value in function head itself as follows:

function multiply(a, b = 1) {
    return a * b;
}

console.log(multiply(5, 2)); // 10 -- value of b is 2
console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
                  // default parameter initialization

console.log(multiply(5, undefined)); // 5 -- value of b is 1,
                 // even if we pass  undefined as value to parameter b

The default value for parameter b is initialized from function head if it didn’t have any valid input.

If we convert the above ES6 code into native javascript code using Babel transpiler, we will get the following equivalent code

"use strict";

function multiply(a) {
    var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;

    return a * b;
}

console.log(multiply(5, 2)); // 10 -- value of b is 2
console.log(multiply(5, 5)); // 25 -- value of b is 5
console.log(multiply(5)); // 5 -- value of b is 1, which taken from
// default parameter initialization

console.log(multiply(5, undefined)); // 5 -- value of b is 1,
// even if we pass  undefined as value to parameter b

ECMAScript 6 is a syntactic sugar for the existing components 🙂

Happy Coding 🙂

Destructuring

The destructuring assignment syntax is a JavaScript expression that makes it possible to extract data from arrays or objects into distinct variables.

Object Destructuring

In ECMAScript 5 and earlier, it would take lots of code to extract information from array and objects.

var username = {
    firstName: 'Pandiyan',
    lastName: 'Murugan'
};

var firstName = username.firstName;
var lastName = username.lastName;

console.log(firstName + ' ' + lastName);

Object destructuring syntax uses an object literal on the left side of an assignment operation.

In ECMAScript 6,

var username = {
    firstName: 'MS',
    lastName: 'Dhoni'
};

var {firstName, lastName} = username;

console.log(firstName + ' ' + lastName);

In the above example, username.firstName is stored in firstName and username.lastName is stored in lastName.

var username = {
    firstName: 'MS',
    lastName: 'Dhoni'
};

var { firstName, lastName, designation } = username;

console.log(firstName + ' ' + lastName + ' ' + designation);

// designation will be undefined at this point

We can set default values as follows

var username = {
    firstName: 'MS',
    lastName: 'Dhoni'
};

var { firstName, lastName, designation = 'player' } = username;

console.log(firstName + ' ' + lastName + ' ' + designation);

// designation will be set as player if it didn't find the value for player in username object

Assigning to Different Local Variable Names

In an earlier example, we have used same in the local variable with matching the name in the object. Now let’s try to assign it to different variable as follows

var username = {
    firstName: 'MS',
    lastName: 'Dhoni'
};

var {  lastName: localLastName, firstName: localFirstName } = username;

console.log(localFirstName +' '+ localLastName);     // MS Dhoni

Here we can use any order to assign the variables. The values will be properly set.

Array destructuring

Array destructuring syntax is very similar to object destructuring; it just uses an array literal syntax instead of object literal syntax.
The destructuring operates on positions within an array, rather than the named properties that are available in objects.

var fruits = [
    'mango',
    'banana',
    'jack fruit'
];

var [fruitOne, fruitTwo, fruitThree] = fruits;

console.log(`${fruitOne} ${fruitTwo} ${fruitThree}`);

Setting default values in an array literal is similar to object literals.

Let’s cover more ES6 features in an upcoming post. Keep reading and supporting.

Happy coding 🙂