ECMAScript 2018 (ES9)

The feature set of ES9 has been set by TC39 committee. Checkout the new release process here. It is basically a 5 stage process starting with Stage 0.

Stage 0: Strawman (draft proposal after brainstorming)

Stage 1: Proposal (Make the case for the solution and identify the potential challenges)

Stage 2: Draft (Describe the syntax and semantics)

Stage 3: Candidate (Indicates that further work require users feedback)

Stage 4: Finished (The edition is ready to be included in the formal ECMAScript standard)

So, whats new in ES9 –

1. Asynchronous Iteration –

Finally!!! Its there !!!

We can use await on loops.

ES9 provides syntactic support for asynchronous iteration – synchronous iterators and asynchronous iterables, which is just like regular iterators, except that they have a next() method that returns in Promise. Have a look at the detailed proposal here


for await (const l of readLines(path)) {
console.log(l);
}

     

2. Promise.prototype.finally –

Execution of callback functions become easy with Promise. A Promise chain can either succeed or fell into a catch exception block. Sometimes, we want to run the code regardless of the output.

With ES9, we can use finally() block that allows to add the final logic at one place regardless of the outcome.

Have a look at the detailed proposal here

function doSomething()
{
method1()
.then(method2)
.catch(er => {
console.log(er);
})
.finally(() =>{
// final logic here
});
}

     

3. Regex Changes –

In total, there were 4 RegExp changes –

  • s (dotAll) flag for regular expressions –

    ES9 introduces the use of s flag which match any character, including line terminators. Have a look the the detailed proposal here


/hello.es9/s.test('hello\nes9');// true

  • RegExp named capture groups –

    Another great feature we are getting with ES9 as it improves readability and maintainability. Detailed proposal can be viewed here


const pattern = /(?\d{4})-(?\d{2})-(?\d{2})/u;
const result = pattern.exec('2018-06-25');
// → result.groups.year === '2018'
// → result.groups.month === '06'
// → result.groups.day === '25'

  • RegExp Look behind Assertions –

Assertions are regular expressions that either are true or false based on the match found. ECMAScript currently have lookahead assertions that do this in forward direction. ES9 comes with an extension to lookbehind, both positive and negative. Detailed proposal can be viewed here

Positive lookbehind make sure that the pattern is always preceded by another pattern:


const pattern = /(?<=\$)\d+/u;
const result = pattern.exec('$45');
// result[0] === '45'

Negative lookbehind make sure that the pattern is not preceded by another pattern:


const pattern = /(?<!\$)\d+/u;
const result = pattern.exec('$45');
// → result[0] === '45'

  • RegExp Unicode Property Escapes

This feature enables us to access the Unicode character properties natively in ECMAScript regular expressions as before the developers have to depend on other libraries which adds up to the run time dependency cost. Detailed proposal can be viewed here


/\p{Script=Greek}/u.test('μ') // prints true

4. Rest/Spread Properties –

The three-dot operator (…) was introduced with ECMA2015 and has been used for array literals. ES2018 introduces rest/spread feature for object destructuring as well as arrays. Detailed proposal can be viewed here


const values = {a: 5, b: 6, c: 7, d: 8};
const {a, ...n} = values;
console.log(a); // prints 5
console.log(n); // prints {b: 6, c: 7, d: 8}

 

This was all about ES9.

Let’s see what they will come up with the next version.

 

Advertisements

Array.map vs Array.forEach

If you are working with JavaScript, then you must have come across these two similar looking array methods: Array.prototype.map() and Array.prototype.forEach().

Most of the developers thinks that Array.map function and forEach for an Array is the same, but it is not. Lets see some examples:
1. Array.prototype.forEach
forEach can be used just like a traditional ‘for loop’ that iterates each of the array element once.

let arrayElements = ['A','C','D'];  
arrayElements.forEach((ele)=>{  
  console.log(ele);  
 })  

The above example will generate the following –
A
C
D

2. Array.prototype.map
The map() function creates a new Array with the results of calling a function for every element of the calling array.

let arrayElements = [1, 4, 6];  
var result = arrayElements .map((ele)=>{  
  return (ele * 2);  
});  
console.log(result);  

The output of the code is:
[ 2, 8, 12 ]
In the above example we are iterating through each element of Array and multiplying it by 2.