Month: August 2017

Features of ES6(Ecmascript 6)

Features of ES6(Ecmascript 6)

What is Ecmascript 6(ES6)?

Ecmascript 6 or popularly known as ES6 is the latest released specification of ecmascript that powers javascript. It was released in 2015. Hence it is also known as ES2015. It is not currently supported by all major browsers, but you can use Babel which is a javascript compiler which converts the es6 code and makes it compatible with es5 supporting browsers.

Features of ES6

ES6 offers loads of cool features which are inspired from other programming languages.Let us dive into the details of what ES6 has in store for us.

1. Introduction of ‘let’ keyword:

The var keyword that we used earlier in javascript had only function scope.  But es6 has introduced a ‘let’ keyword which brings block scoping to javascript like the other programming languages like php and java.

With block scope the problem of variable hoisting is avoided. Variable hoisting is a concept in which a variable declared within a function gets moved upwards towards the beginning of the scope which is the function block. One thing to note is that only the variable declaration gets moved to the beginning of the scope whereas the definition stays as it is.

Take the following example:

function test(flag)
{
    if(flag==true)
    {
        var variable1 = 'I am variable 1';
        console.log(variable2);//Undefined
    }
    else
    {
        var variable2 = 'I am variable 2';
    }
    console.log(variable2);//Undefined
}
test(true);

Here var variable1, var variable2 will be hoisted to the top at the beginning of the function. Hence when  we try to access the variables when it is not defined, it throws an undefined error and does not terminate the program. This can be dangerous and misleading.

ES6 has therefore provided a ‘let’ keyword which helps to resolve this scope related issues and issues due to variable hoisting. Simply replace the ‘var’ with ‘let’ keyword and the above code will  throw a reference error as expected like it does for other programming languages.

2. Constants:

ES6 allows you to define constant using const keyword which cannot be changed. Changing this will throw an error. Constants also have block scope. But you cannot redefine a constant within another block as well. But you can define a constant with the same name in another block since in this case it will be considered as an altogether new constant.

const test = 'John';

3. JavaScript Templating:

Templating in es6 makes code much neater. You can directly print the variable as using a back tick. You can also carry out computations like multiplication using templating.

let var1 = 10;
let var2 = 20;
document.write(`${var1} ${var2}`);
document.write(`${var1 * var2}`);

4. Dynamic functions with …

This is somewhat similar to the arguments array that javascript provided. You can define a function with 3 trailing dots before the argument

5. Repeat n number of times:

To repeat a string n number of times you can simple call the repeat function on it and provide the number of times to repeat as an argument

let name = 'John';
console.log(name.repeat(3));

6. Miscellaneous string functions:

startsWith function checks if the string starts with the string given in the argument. endsWith function checks if the string ends with the string given in the argument. Includes function checks if the string includes a string given in the argument.

let Fname = 'testab';
Fname.startsWith('ab');//False
Fname.endsWith('ab');//True
Fname.includes('ab');//True

These are just a few features. Will update this post soon. So keep tuned!