Introduction To ES6 Main Concepts

Introduction

 

JavaScript is one of the most popular scripting languages for Web. Today, almost every organization is using and hiring JavaScript developers. Most of the fortune 50 corporations such as Google, IBM, and Microsoft now support major JS related open source projects and development. 

 

JavaScript is an evolving language. With every new version, JavaScript gets better and better and allows developers to write more robust and cleaner code. Most of the modern browsers are also adding support of ES6. ES6 is the new standard of JavaScript implementation. It is the sixth version of the ECMA Script programming language. It was released in 2015. It is also known as ECMAScript 2015. In its simplest form, it is the set of syntaxes that will make large-scale JavaScript development easy.

 

This post is for the developers who know JavaScript but have not worked with the new features available in the next generation of JavaScript.

 

In this article, we will cover the following important syntaxes of ES6:

• Understanding the “let” and “const”
• Arrow functions
• The spread and Rest operators
• Classes, Properties, and Methods
• Destructuring

Yes! So, let’s get started!!

 

Understanding the “let” and “const” keywords

 

The "let" and "const" are different ways of creating variables. We all are familiar with the var keyword, which is used to create variables. Right!? Although, you can still use var to create variable although, but you are highly encouraged to use let and const instead.

 

The let and const are different in terms of their use and their scope.

 

 

The let is actually used for variable where you need to reassign the value of the variable but const is used when you don’t need to change its value once it is declared. Reassigning the value to the const type variable will trigger an error. Here is the simplest example,

 

 

Moreover, the difference between them is that var is function scoped while let is block scoped. Here is an example.

 

 

Arrow functions

 

An arrow function is one of the highly accepted and easy syntaxes of ES6. Before arrow functions were introduced, we had normal functions with the syntax.

Function myFunction(params) {
    return params * 2;
}
myFunction(5);
Which got replaced by arrow
function like this: const myFunc = (params) => {
    return params * 2
}
myFunc(5);

Moreover, if you have only one statement in the function body, you can omit the return keyword and { } parenthesis. Like this,

const myFunc = (params) => params*2;

If you have exactly one parameter you can omit round parenthesis as well. Like this:

const myFunc = params => params*2;

This is the shortest definition of the arrow function.

 

So, we can sum up, arrow function has removed the function and return keyword.

 

The arrow function has also resolved the problem with this keyword. If you have used JavaScript, then you might have seen that this keyword does not always refer to the object you want it to. 

 

Spread and Rest operators

 

Let’s move towards the new syntaxes of ES6! Actually, spread and Rest have the same syntax of …(3 dots) and will differ in the context in which they are called.

 

A spread operator is used to spread array or objects. For example,

old_array=[1,2,3];
const new_array=[..old_array,4,5];

We have an old_array which has three elements. And we want our new_array to have all those elements which old_array had as well as new elements such as 4 and 5.

 

 

Moreover, it can be used with objects as well.

old_object : {name:’john’,age:15 };
new_object : {…old_object,weight:30}

Now, the new_object will contain 3 properties - name, age, and weight.

 

Note

 

If old_object has weight property then it will be overwritten by new_object. Let’s look at an example,

 

 

Now, Rest operator. Rest operator is used to merge the function arguments into an array.

function sortArgs(…args){
   args.sort();
}

Here, our function sortArgs receives an unlimited amount of arguments. But, with the help of rest operator, we can write it as one argument and all the arguments will be gathered in an array. So, we can apply any array operation in our arguments. Let us clear it up with an example.

 

 

Class, Properties, and Method

The next generation JavaScript offers new ways of initializing properties and methods, which is a very modern syntax.

 

Properties are like “variables attached to classes/objects”.

 

So far, we have been using the syntax like this.

constructor(){
   this.myProperty=value;
}

But, the modern way allows us to use below syntax which gets rid of the constructor part.

myProperty=value;

Behind the scene, this syntax will transform to the same syntax as with constructor.

 

Methods are like “function attached to classes/objects”.

 

So far, we have been using the syntax like the below one.

myMethod(){
…..
}

But, the newer syntax allows us to use an property which will store function as a value.

myProperty = () => { …. }

Yes, it’s an arrow function which we learned previously. So, the advantage of using this syntax for your method is to get rid of issues with this keyword.

 

Destructuring

 

Destructuring is the next topic, which I really want you all to know. It allows us to easily extract an array of elements and object properties and store them in variables. Now it might sound exactly like spread operator but actually it's not. The spread operator pulls out all the properties and variables from old array/objects and stores them in new array/objects. But, destructuring allows us to pull out the single property from an array/object.

 

Array Destructuring

[a, b]=[‘John’,’Jerry’];
console.log(a); // John
console.log(b); // Jerry

 

Yes, we can pull out individual elements from an array based on order.

 

Object Destructuring

{name}={name:’John’, age:15}
console.log(name);
console.log(age);

{name} targets the name property of name at right side and polls out the value.

 

That’s it! I hope I have made this reading worth your time.