The best features added to JavaScript from 2016 to 2021

hi,ECMAScript is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers. It is standardized by Ecma International according to the document ECMA-262. ECMAScript is commonly used for client-side scripting on the World Wide Web.
in this article, we gonna talk about amazing features that we all need to use in our projects.
after ECMAScript 2015, nearly we have a new version of javascript that have major changes, like arrow functions, sets, maps, classes and destructuring.

ES7(ECMAScript 2016)

Array.prototype.includes

Determines whether an array includes a certain element or not

[1, 2, 3].includes(3, 0, 7); // true[1, 2, NaN].includes(NaN); // true[0,+1,-1].includes(42); // false

ES8(ECMAScript 2017)

Async functions

here is goood example look at code blow.

async function foo() {   const result1 = await new Promise((resolve) => setTimeout(() => resolve('1')))   const result2 = await new Promise((resolve) => setTimeout(() => resolve('2')))}foo()

in the async function, you can use await keyword, then code stop until result1 returns resolve or reject then code move to next line and wait for result2 until it back resolves or rejects.
let`s look at other example.


async function foo() {
try {
const bar = await new Promise((resolve) => setTimeout(() => resolve('1')));
}
catch(e) {
console.log(e)
}
}
foo()

in this example you could simply use async function to use try catch

Object.values

get all the values of the object as an array.

var person = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
Object.values(person);
// ["Hemanth","HM","Earth","Human"]


ES9(ECMAScript 2018)

Object rest properties

Rest properties for object destructuring assignment.

let { fname, lname, ...rest } = { fname: "Hemanth", lname: "HM", location: "Earth", type: "Human" };
fname; //"Hemanth"
lname; //"HM"
rest; // {location: "Earth", type: "Human"}


spreat operator

The spread operator can be used to combine multiple objects or cloning objects.
remember: speart operator can do shallow clone not deep clone, if you do not know the difference between shallow and deep wait for my next article :D

const obj1 = {a:10,b:20}
const obj2={c:30}
const clone_obj={...obj1}
const obj3 = {...obj1,...obj2}
console.log(clone_obj) // {a: 10, b: 20}
console.log(obj3) // {a: 10, b: 20, c: 30}


Promise: finally()

finally is a new callback that always executed, no matter if then or catch is called. it is too useful for clean up state especially in reactjs

fetch(url)
.then()
.catch()
.finally(() => console.log(I'm always called!));


ES10(ECMAScript2019)

Array.flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. depth can pass as first param. in down example, i send number 2 for depth.

const array1 = [1,2,[3,4,[5,6]]]
console.log(array1.flat(2)) // [1,2,3,4,5,6]


dynamic import

To dynamically import a module, the import keyword may be called as a function. When used this way, it returns a promise.
in dynamic import, you could call the module when you really need it to use.

import('/modules/my-module.js')
.then((module) => {
// Do something with the module.
});


ES11(ECMAScript2020)

optional chaining

Optional Chaining, known to babel users, is now supported natively by Javascript. This functionality removes the need for conditionals before calling a variable or method enclosed in it. optional chaining prevent to pass Error object, if our code has an undefined value

const smartphones = {
brands: {
apple: true
}
}
console.log(smartphones.companies?.motorola) // output is: undefined


nullish coalescing operator

A new operator was added to Javascript. It came to cause a discrepancy between Javascript's falsey value. We use the falsey condition with the || operator. The falsey values are: 0, undefined, null, false, NaN

console.log(null || 'not false value'); // 'not false value'


ES12 (ECMAScript2021)

String.replaceAll()

The replaceAll()function on the String prototype allows replacing all instances of a sub-string, without using regex.

const orgStr = 'JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled and multi-paradigm.';
let newStr2 = orgStr.replaceAll('JavaScript', 'TypeScript');
console.log(newStr2); // 'TypeScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. TypeScript is high-level, often just-in-time compiled and multi-paradigm.'


thank you for reading the article, I will be glad if you write a comment. if you know other features that are useful for you and I forget to write, you can write in comments for me and other readers.