EcmaScript 20[16-17-18]

In the previous article of this series, we got an idea about what ECMAScript 2015 (ES6) is. Now, let's dive into the details of the ECMAScript versions from 2016 to 2018.

EcmaScript 2016

1. JavaScript Exponentiation (**)
   This allows you to calculate the power of a number. It raises the left-hand operand to the power of the right-hand operand.

    const result = 2 ** 3; // 2 raised to the power of 3 = 8
    console.log(result); // Output: 8
   

2. JavaScript Exponentiation assignment (**=)
   It is a shorthand notation to perform an exponentiation operation and assign the result to the left-hand variable.

    let base = 2;
    base **= 3; // Equivalent to base = base ** 3;
    console.log(base); // Output: 8
   

3. JavaScript Array includes()
   The includes() method, allows you to check if an array contains a specific element. It returns true if the element is found and false otherwise.

   
    const array = [1, 2, 3, 4, 5];
    console.log(array.includes(3)); // Output: true
    console.log(array.includes(6)); // Output: false
   

EcmaScript 2017

1. JavaScript String padding
   String padding refers to adding characters to the beginning or end of a string to achieve a desired length. ECMAScript 2017 introduced two new methods, padStart() and padEnd(), to facilitate string padding.

   
    const str = 'Hello';
    console.log(str.padStart(8, 'X')); // Output: 'XXXHello'
    console.log(str.padEnd(8, 'Y')); // Output: 'HelloYYY'
   

2. JavaScript Object entries()
   The Object.entries() method, introduced in ECMAScript 2017, returns an array of key-value pairs from an object. Each entry in the returned array is an array itself, where the first element represents the key and the second element represents the corresponding value.

   
    const obj = { name: 'Ajay', age: 30, city: 'New Delhi' };
    const entries = Object.entries(obj);
    console.log(entries);
    /* Output:
    [
      ['name', 'Ajay'],
      ['age', 30],
      ['city', 'New Delhi']
    ]
    */
   

3. JavaScript Object values()
   The Object.values() method, introduced in ECMAScript 2017, returns an array containing the values of an object's enumerable properties. The order of the values in the returned array corresponds to the order of the properties in the object.

   
    const obj = { name: 'Ajay', age: 30, city: 'New York' };
    const values = Object.values(obj);
    console.log(values); // Output: ['Ajay', 30, 'New Delhi']
   

4. JavaScript async and await
   ECMAScript 2017 introduced the async and await keywords, which provide a more straightforward way to write asynchronous code using Promises. The async keyword is used to define an asynchronous function, and the await keyword is used to pause the execution until a Promise is resolved.

    function delay(time) {
      return new Promise(resolve => setTimeout(resolve, time));
    }
   
    async function example() {
      console.log('Start');
      await delay(2000);
      console.log('After waiting for 2 seconds');
    }
   
    example();
   

EcmaScript 2018

1. Asynchronous Iteration
   This introduced support for asynchronous iteration, allowing you to iterate over asynchronous data sources such as Promises or other asynchronous objects using the for-await-of loop.

    async function* asyncGenerator() {
      yield Promise.resolve(1);
      yield Promise.resolve(2);
      yield Promise.resolve(3);
    }
   
    (async function () {
      for await (const item of asyncGenerator()) {
        console.log(item);
      }
    })();
   

2. Promise Finally
   The finally() method, added to Promises in ECMAScript 2018, allows you to specify a callback that will be executed regardless of whether the Promise is fulfilled or rejected. It is useful for performing cleanup operations or finalizing code execution.

    function fetchData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('Data received');
        }, 2000);
      });
    }
   
    fetchData()
      .then(result => {
        console.log(result);
      })
      .catch(error => {
        console.error(error);
      })
      .finally(() => {
        console.log('Promise completed');
      });
   

3. Object Rest Properties
   This introduced the concept of Object Rest Properties, which allows you to extract the remaining properties of an object into a new object using the rest syntax (...).

   
    const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4, e: 5 };
    console.log(a); // Output: 1
    console.log(b); // Output: 2
    console.log(rest); // Output: { c: 3, d: 4, e: 5 }
   

4. New RegExp Features
   This introduced several new features for regular expressions, including the s (dotAll) flag and the u (unicode) flag. The s flag enables the dot (.) to match any character, including line terminators, and the u flag enables full Unicode matching.

    const regex = /hello.world/su;
    console.log(regex.test('hello\nworld')); // Output: true
    console.log(regex.test('hello𝌆world')); // Output: true
   

5. JavaScript Shared Memory
   This introduced the concept of shared memory and atomics, enabling multiple JavaScript threads to share and manipulate the same underlying memory space. This feature is mainly used in web workers and other multi-threaded environments.

   Please note that the JavaScript Shared Memory feature is more complex to explain and implement within the confines of a code snippet. It typically involves using the SharedArrayBuffer, Atomics, and other related APIs, require a more in-depth discussion and example.

---

In conclusion, ECMAScript versions from 2016 to 2018 brought significant enhancements to JavaScript, empowering developers to write cleaner and more efficient code. By staying informed about the latest ECMAScript specifications, we can unlock the full potential of JavaScript in our projects. Embrace the power of modern ECMAScript and continue exploring new features to stay at the forefront of web development.

Happy coding! <3