ES6 Basic Concepts

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

ECMAScript (ES) is a scripting language specification standardized by ECMAScript International. ECMAScript 6 is also known as ES6 and ECMAScript 2015. Some people call it JavaScript 6.

Following is a brief JavaScript timeline:

• 1995: JavaScript is born as LiveScript
• 1997: ECMAScript standard is established
• 1999: ES3 comes out and IE5 is all the rage
• 2000–2005: XMLHttpRequest, a.k.a. AJAX, gains popularity in app such as Outlook Web Access (2000) and Oddpost (2002), Gmail (2004) and Google Maps (2005).
• 2009: ES5 comes out (this is what most of us use now) with forEach, Object.keys, Object.create (specially for Douglas Crockford), and standard JSON
• 2015: ES6/ECMAScript2015 comes out; it has mostly syntactic sugar, because people weren’t able to agree on anything more ground breaking (ES7?)

We’ll learn about the following basic concepts:

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

Let

let is similar to var but let has scope. let is only accessible in the block level where it is defined. see below example

if (true) {
 let a = 40;
 console.log(a); //40
}
console.log(a); // undefined

In the above example variable ‘a’ is defined inside If statement and so it’s not accessible outside the function.

Const

Const is used to assign a constant value to the variable. And the value cannot be changed. Its fixed.

const a = 50;
a = 60; // shows error. You cannot change the value of const.const b = "Constant variable";
b = "Assigning new value"; // shows error.

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 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 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 arrow function.

So, we can sum up, arrow function has removed 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 the this keyword does not always refer to the object you want it to.

Spread and Rest operators

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

Also, 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.

Now, 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.

Class, Properties, and Method

Now, 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, 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”.

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

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

Destructuring

Destructuring allows us to easily extract an array elements and an object properties and store them in variables. Now it might sound exactly like spread operator but actually its not. Spread operator pulls out all the properties and variables from old array/objects and store them in new array/objects. But, Destructuring allows us to pull out the single property from 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.

Hope this helps you to basic ES6 Concepts