Introduction to ES6 main concepts!

6 min readJan 21, 2019

Hello Readers,

As we all know that, JavaScript is getting a lot of momentum after the big organizations such as IBM and Microsoft announced their support to Node.js. And here it is once again in the market booming with its new standard which will be used in the implementation of the JavaScript, and that is ES6! It is the sixth version of the ECMA script programming language so, named ES6! It was released in the year 2015, so it is also known as ECMAScript 2015. In its simplest form, it is the set of syntax which will be make large-scale JavaScript development easy.

This post is for all those people who know JavaScript but have not worked with any of the features of next-gen JavaScript. And, if you try to learn any JavaScript based framework such as React JS or Angular JS, you might find JavaScript as a whole new language all that is because of its support to the new versions of it. So, before jumping into any framework it is necessary to understand the basic syntax of the latest version of JavaScript.

JavaScript is quickly evolving language. So with each new version of it, it allows us to write us as a developer more robust and clean code. Moreover, modern browsers support ES6 syntax still, many features are partially supported and for older browser we need a software named transpiler such as Babel to convert ES6 code into ES5, which is supported on most browsers.

So, in this article we will be covering some the important syntax of the ES6 which JavaScript programmers need to know to be familiar with all new JavaScript based framework. The topics which we are going to cover is :

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:

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

Let and const are different in terms of the use and scope.

Let is actually used for variable use where you need to reassign the value of 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, difference between let and var is function scoped while let is blocked scoped. Here is an example :

2. Arrow functions :

Arrow function is one of the highly accepted and easy syntax of es6. Before, arrow functions were introduced we had normal functions with 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 return keyword and { } parenthesis. Like this :

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

Add on, 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 arrow function.

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

Moreover, arrow function has resolved the problem with this keyword. If you have used JavaScript, then you might have faced that this keyword always do not referred to the object that want it to refer.

3. Spread and Rest operators:

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

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 and as well as new elements such as 4 and 5.

Moreover, 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 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 on our arguments. Let us clear it with an example.

4. Class, Properties and Method :

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

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

Till now we have been using syntax like :

constructor(){

this.myProperty=value;

}

But, modern way allows us to use below syntax which gets rid of 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”.

Till now we have been using the syntax :

myMethod(){

…..

}

But, 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, advantage of using this syntax for your method is to get rid of issues with this keyword.

5. Destructuring :

Destructuring is the next topic which I really want you all to know. It allows us to easily extract array elements and object properties to store them in variables. Now it might sound exactly like spread operator. But, actually it is different. Spread operator polls out all the properties and variables from old array/objects and store them in new array/objects. But, destructuring allows us to poll out single property from array/object.

Array Destructuring :

[a, b]=[‘John’,’Jerry’];

console.log(a); // John

console.log(b); // Jerry