ECMAScript – Trailing Commas

JavaScript allowed trailing commas in array literals since the beginning. Trailing commas in other places have added in the later edition of ECMAScript.

What is trailing comma & why?

Trailing commas is also called as final commas.

It can be used while if you are adding new parameters or property to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

Arrays, Object literals, function parameters allow trailing commas. However, JSON doesn’t allow trailing commas.

Trailing commas in Array literals

JavaScript allows the trailing commas in arrays.

literals1

If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped.

literals2

However, the final comma in the array is ignored.

Object literals

Trailing comma is supported in Object literals from the ECMAScript 5 edition.

literals3.PNG

Trailing commas in functions

ECMAScript 2017 allows trailing commas in function parameter lists.

Trailing commas allowed function definition and function calls. Trailing commas don’t affect the length property of function declarations or their arguments object.

literals4.PNG

Function parameters with commas only are invalid which will throw SyntaxError.

literals5

What about Internet Explorer Support?

If we are using babel to convert our scripts to native JavaScript to support Internet Explorer. We don’t have to worry about the compatibility.

The babel will convert our scripts with trailing commas to support the IE.

Example: It will remove the commas while building the package.

Left side: Our ECMAScript code

Right side: Equivalent Code generated by babel

literals6.PNG

makes version-control diffs cleaner and editing code might be less troublesome

Let’s talk about the main advantage, the Version control support.

Check out the below sample, I’m trying to add an entry to list to two arrays.

One has trailing commas and other not. When we are adding an entry to an array which has trailing comma, the GIT diff looks clean. That’s the main advantage of this whole concept.

When we are having a trailing comma, it only shows the addition of entry.

gitliteral

 

And again, its based every individual to decide whether they want to use this concept or not.

Cheers,

Happy Coding!

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 🙂