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!

What’s new in ECMAScript 2016 / ES 7

Since ES6 has released, we have discussed the interesting features in our site earlier in the ECMAScript 6 tag. ES 6 release contains lots beautiful features like arrow functions, template literals, destructuring, default parameters, etc.

Now, its time experiment and explore es-next – ECMAScript 2016 / ES7 🙂

I shall make a separate post on this name convention of the release later. Now let’s stick with discussion of features.

Ecma Technical Committee 39 governs the ECMA specification. They follow certain stages to handle the proposals, starts from stage 0 to stage 4. The proposals which reached the stage 4 are the finished proposals. ES7 included support for a new exponentiation operator and adds a new method to Array.prototype called includes.

Let’s discuss the following two features in this post:

  1. Array.prototype.includes
  2. Exponentiation operator

 

Array.prototype.includes

The formal syntax of includes is

Array.prototype.includes ( searchElement [ , fromIndex ] )

where fromIndex is optional.

includes compare searchElement to the elements of the array, in ascending order, using the SameValueZero algorithm, and if found at any position, returns true; otherwise, false is returned.

The optional second argument fromIndex defaults to 0 (i.e. the whole array is searched). If it is greater than or equal to the length of the array, false is returned, i.e. the array will not be searched. If it is negative, it is used as the offset from the end of the array to compute fromIndex. If the computed index is less than 0, the whole array will be searched.

Earlier, I have used indexOf to check whether the particular element is present in the array or not. Now, using includes we can directly validate the same in conditional loops.

The includes function is intentionally generic; it does not require that its this value be an Array object. Therefore it can be transferred to other kinds of objects for use as a method.

The includes method intentionally differs from the similar indexOf method in two ways. First, it uses the SameValueZero algorithm, instead of Strict Equality Comparison, allowing it to detect NaN array elements. Second, it does not skip missing array elements, instead of treating them as undefined.

Examples:

assert([1, 2, 3].includes(2) === true);
assert([1, 2, 3].includes(4) === false);

assert([1, 2, NaN].includes(NaN) === true);

assert([1, 2, -0].includes(+0) === true);
assert([1, 2, +0].includes(-0) === true);

assert(["a", "b", "c"].includes("a") === true);
assert(["a", "b", "c"].includes("a", 1) === false);

 

Exponentiation operator

ECMAScript 2016 introduced the exponentiation operator, **.

We already have the operator of addition +, subtraction -, multiplication *, division /. Now its time to experiment the exponentiation operator **.

It operates similarly to Math.pow()

 

Experiment the above new features, and let me know your feedback on the comment section.

Happy Coding!