A Complete Guide to The ES2018

Introduction

ECMAScript is the standard upon which JavaScript is based, and it's often abbreviated to as "es".  Find Out everything about ECMAScript, and the latest features introduced in ES2018, aka es9. 

What are the new things introduced in it?

1. REST/SPREAD PROPERTIES
   
   ES6 introduced the concept of a rest element when working with an array destructuring:

   const alphabets = ["a", "b", "c", "d", "e"];
   [first, second, third, ...restOfThem] = alphabets;

   
   and spread elements:

   const alphabets = ["a", "b", "c", "d", "e"];
   const sum = function(a, b, c, d, e) { return a + b + c + d + e } ;
   const sum = sum(...alphabets); // Output => "abcde"

   
   ES2018 introduced the same but for objects:
   
   Rest operator with object:

   
   const { alpha1, alpha2, ...others } = { first: "a", second: "b", third: "c", fourth: "d", fifth: "e" }
   
   alpha1 // Output => 1
   alpha2 // Output => 2
   others // Output => { third: 3, fourth: 4, fifth: 5 }

   
   Spread can be used to create a new object by combining the properties of the object passed after the spread operator:

   
   const items = { first, second, ...others }
   items // Output => { first: 1, second: 2, third: 3, fourth: 4, fifth: 5 }



2. ASYNCHRONOUS ITERATION
   An async iterable object can be used as the loop iteration with the help of new construct for-await-of :  

   for await (const line of readLines(filePath)) {
     console.log(line);
   }

   It can only be used inside async functions since this uses await
    
3. PROMISE.PROTOTYPE.FINALLY()
   When a promise is successfully fulfilled it calls then() method one after another. If something fails during this, the then() methods are skipped and the catch() method is executed. The method finally() allow to run some code regardless of the successful or unsuccessful execution of the promise:

   fetch('file.json')
     .then(data => data.json())
     .catch(error => console.error(error))
     .finally(() => console.log('finished')) 



4. REGULAR EXPRESSION IMPROVEMENTS
    
   1. REGEXP LOOKBEHIND ASSERTIONS: MATCHES A STRING DEPENDING ON WHAT PRECEDES IT?
      
      This is a lookahead: you use ?= to match a string that is followed by a specific substring:

      /Juni(?=Cortez)/
      
      /Juni(?= Cortez)/.test('Juni is my friend') //false
      /Juni(?= Cortez)/.test('Juni is my friend and Juni Cortez is a famous movie character') //true

      
      ?! performs the inverse operation of lookahead, matching if a string is not followed by a specific substring:

      /Juni(?=Cortez)/
      
      /Juni(?= Cortez)/.test('Juni is my friend') //true
      /Juni(?= Cortez)/.test('Juni is my friend and Juni Cortez is a famous movie character') //false

      
      Lookaheads uses the ?= symbol. They were already available to us.
      
      Lookbehinds, a new feature, uses ?<=.

      /(?<=Juni) Cortez/
      
      /(?<=Juni) Cortez/.test('Juni is my friend') //false
      /(?<=Juni) Cortez/.test('Juni is my friend and Juni Cortez is a famous movie character') //true

      
      A lookbehind is negated using ?<! :

      /(?<!Juni) Cortez/
      
      /(?<!Juni) Cortez/.test('Juni is my friend') //true
      /(?<!Juni) Cortez/.test('Juni is my friend and Juni Cortez is a famous movie character') //false

   2. NAMED CAPTURING GROUPS
      In ES2018 a capturing group can be assigned to a name, rather than just being assigned a slot in the result array:

      const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/
      const result = regex.exec('2015-01-02')
      
      //  Output => result.groups.year === '2015';
      //  Output => result.groups.month === '01';
      //  Output => result.groups.day === '02';

   3. THE S FLAG FOR REGULAR EXPRESSIONS
      The s flag, short for single line, causes the . to match new line characters as well. Without it, the dot matches regular characters but not the new line:

      /hi.welcome/.test('hi\nwelcome') // false
      /hi.welcome/s.test('hi\nwelcome') // true