DEV Community

[ATTILA]
[ATTILA]

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode
async function foo() {
    try {
        const bar = await new Promise((resolve) => setTimeout(() =>  resolve('1')));
    }
    catch(e) {
        console.log(e)
    }
}
foo()
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"}
Enter fullscreen mode Exit fullscreen mode

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}
Enter fullscreen mode Exit fullscreen mode

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!`));
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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.
  });
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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'
Enter fullscreen mode Exit fullscreen mode

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.'
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
horstleung profile image
Horst Leung

optional chaining really save the day.