AWS Certification by Edureka
Javascript

ECMAScript Features Every JavaScript Developer Must Know

Google+ Pinterest LinkedIn Tumblr

From last few years, JavaScript is the most used programming language to build the web application. Today most popular frameworks, libraries or MVC’s are based on JavaScript, so it is most important to learn JavaScript more deeply by learning new ECMAScript features. Whenever you are going to learn something in the JavaScript then most probably you see one of these terms

  • ES3
  • ES5
  • ES6
  • ES7
  • ES8
  • ES9,ES10
  • ES2015
  • ES2016
  • ES2017
  • ES2018,ES2019
  • ECMAScript 2015
  • ECMAScript 2016,ECMAScript 2017
  • ECMAScript2018,ECMAScript2019

All of the above term referring to a standard called ECMAScript. ECMAScript is the standard upon which JavaScript is based and it’s often referred to ES. ActionScript and JScript are other two languages which are based on ECMAScript but JavaScript is the most popular and widely used implementation of ECMAScript.

In this article, we are going to learn the new ECMAScript features that makes the life of a JavaScript developer easier. By Implementing these features in your code, you can improve your productivity.

Current ECMAScript Version

At the time of writing this article, the current version of ECMAScript is ES2018/ES9/ECMAScript2018. It was released in June 2018.

New let and const Keyword

In ES6, two new keywords are introduced let and const. Most of the JS developers already using this and if you are not then you should start using these.

for (let i = 0; i < myArray.length; i++) { 
   
  // Do something inside the block
 
}
 
if (x > 15) {
  // We reuse "i"
  let i = x * y
}

let keyword allow us to declare a local variable in the scope of the block such as a statement, or an inner function. The difference between let and var is the scope. The local variable defined by the var can be used entire enclosing functions while variables defined by let can only be used in its block. For example,see the following code, here we use let with for loop and outside for loop.

const keyword is used to declare the constant. If any variable declared using the keyword const then it cannot be reassigned new data. If a constant holds an object, we can later change the value of its properties and methods. The same is true for the elements of an array. But we can’t directly reassign a new value to the object/array properties.

const MY_CONSTANT = {defaultTaxRate: 10};
console.log(MY_CONSTANT.defaultTaxRate);
// 10
 
 
MY_CONSTANT.defaultTaxRate = 18;
console.log(MY_CONSTANT.defaultTaxRate);
//18

Arrow Functions

This is one of the features which loved by most of the developers. This feature replaces the traditional function with “=>”  syntax. We called them anonymous functions.

//in ES6 and greater
let message = (name) => alert("Hi " + name + "!"); 
 
// in ES5
var message = function(name) {
   alert("Hi " + name + "!");  
 };

The main difference in the arrow function and regular function is arrow functions lexically bind this value to the current scope.

Default Parameters

In ES6 or later, we can add default values to the parameters of the functions. In the ES5, default values of parameters always set to undefined which is not in the case after ES6.

const sum = (a = 2, b = 3 ) => {
   return a+b;
}

console.log(sum(5,6));    // return 11
console.log(sum());       // return 5

Template Literals

Before ES6, we have to break the string for string concatenation. But with the ES6 we can easily embed variables into the string. To do so we need to pass the variables into ${….} syntax.

let message = ` Hello ${name}, Welcome to CodesQuery Blog.`;

Destructuring Assignment

I personally love this awsome ECMAScript feature. This is hard to graps the logic behind this ECMAScript feature but when you learn it then it will surely amaze you.

Before ES6, suppose you have an object house which has two property owner and ownerContact then you get the property by using following code

var house = { 'owner': 'xyz', 'ownerContact': '123'};

console.log(house.owner);               // prints xyz
console.log(house.ownerContact);        // prints 123

But with ES6 or later, you can use the destructing assignment and get the value easily with the following code

let {owner , ownerContact } = { 'owner': 'xyz', 'ownerContact': '123'};;

console.log(owner);               // prints xyz
console.log(ownerContact);        // prints 123

Other example of destructing assingment from node.js

let { email, password } = req.body;

Classes as ECMAScript Features

If you came from OOPs background then you love this feature. ES6 introduces classes in the JavaScript.

In ES6, classes are declared with the class keyword and need to have a constructor() method. The constructor method is called when a new object is instantiated with new ClassName() keyword.

class twoNumberCalculator{
    constructor(firstNum, secondNum){
       this.firstNum = firstNum;
       this.secondNum = secondNum;
    }

    add(){
       return this.firstNum + this.secondNum;
    }
}

let calculator = new twoNumberCalculator(3,5);

console.log(calculator.add());      // prints 8

Classes is one of the most widely used things in the programing. If you are new and do not know more about the programming then you can take the courses from any of the online traning website like Simpli Learn, Edureka and Coursera.

Modules

Before ES6, there are no supports of the modules and people use RequireJS, CommonJS to make module. But ES6 came with this amazing ECAMScript features with the release of ES6.

We need to write each module in its own file and then use the export keyword to export variables or functions and import keyword to import variables or functions.

//cube.js

const cube = (a) => {
    return a*a*a;
} 

export { cube } 

//index.js

import { cube } from cube;

console.log(cube(5));     // prints 125

REST/SPREAD Syntax

REST and SPREAD is one the most advanced and loved intoduction in ES6. I personally love this feature a lot and uses in my code whenever I can. If you came from React.js/Angular or want to learn React.js/Angular then you definetly love this and going to use.

REST syntax allows us to convert last parameter pased to a function into an array by prefix (…) three dot. Only Last parameter can be a “REST parameter”.

const restFun = (firstParam,secondParam,...othersParam) => {
	console.log("firstParam",firstParam);
	console.log("secondParam",secondParam);
	console.log("othersParam",othersParam);
}

restFun("1", "2", "3", "4", "5");

//output

firstParam 1
secondParam 2
othersParam (3) ["3", "4", "5"]

The SPREAD operator works in the oppsite way and turns array into seperate arguments which further can be passed into a function. This is very useful for mathematical operations lile finding the sum,max,min of the array.

const sumOfSquare = (x, y, z) => {
    return x*x + y*y + z*z;
}

const numbers = [1, 2, 3];

console.log(sumOfSquare(...numbers));
// expected output: 14

You can learn more about REST and SPREAD by following the link.

How To Use ECMAScript Features Today

There is no doubt that with the latest ECMAScript features, A JavaScript developer can emhance their coding style and improve their code by using these features.

Now question arises that Is all browser support these features? Then the answer is No, at present not all the browsers support the latest ECMAScript features but do not worry that’s why babel came into existence.

Babel is a JavaScript compiler which convert your latest JavaScript code into the backward compatible version of the JavaScript. To learn more about the babel we have to write a while new article but for now you can learn from their official docs.

Conclusion

This is not the end of the ECMAScript features. There are lots of more features which you can use with your code but not listed. Here only those are listed which is used by most of the JavaScript community. Every year there are lots of new features are requested by the community to add into ECMAScript and every year you will find new verion of the ECMAScript which contains some new features or enhanched the previou features.

If you think that this post is useful for you or I miss something to add here or you have any type of confusion then comment below.

Pin It