Top New Features in ECMAScript 6

Gowtham K
Aug 23, 2015
3.8k
0
2
Article

ECMASript

ECMAScript is the scripting language standardized by Ecma International in the ECMA-262 specification and ISO/IEC 16262. The language is widely used for client-side scripting on the Web, in the form of several well-known implementations such as JavaScript, JScript and ActionScript.

The new ECMAScript 6 was completed in 2014 and it became the standard in 2015.

ECMAScript 2015 (6th Edition) is the current version of the ECMAScript Language Specification standard. Commonly referred to as "ES6", it defines the standard for the JavaScript implementation in SpiderMonkey, the engine used in Firefox and other Mozilla applications.

Here I will describe some of the new features added in ES6.

1. "Let" Keyword

Let me explain this feature with an example. Consider the following JavaScript:

function test(flag)
{
if(flag)
{
var temp=7;
}
return temp
}
var output=test(true)
console.log(output)

The result will obviously be 7 in the console.

I am from C#, from my perspective the scope of the temp variable from the preceding script should be within the if block but because of the var keyword we can access it outside of its scope.

When we have certain scenarios where we need a temporary variable, that scope should be within its defined block. This scenario can be done using the "Let" keyword.

function test(flag)
{
if(flag)
{
let temp=7;
}
return temp
}
var output=test(true)
console.log(output)

Note: please try the preceding script in http://www.es6fiddle.net/ because these features are not yet supported in the current browsers.

Now you will get the message “temp is not defined” in the console.

2. "Const" Keyword

The benefits of the const keyword can be done by JavaScript with ES6.

Let me explain it with an example:

var temp='Hi Friends'
console.log(temp)
temp="7"
console.log(temp)

The result in the console will be:

Hi Friends

From the preceding script we can observe one thing, the same variable name can be a string as well as an integer but in some scenarios we should have the variable that must be read only now the "const" keyword plays an important role.

const temp='Hi Friends'
console.log(temp)
temp="7"
console.log(temp)

Now you will get a message “temp is read-only” in http://www.es6fiddle.net/.

3. Default parameters

This is one of the awesome features in ES6, yes now we can have default parameters in JavaScript.

Let me explain it with a simple example.

function mul(num1=5,num2=6)
{
return num1*num2
}
console.log(mul())

The result will be Unexpected token = in the console but in the ES6 the result will be 30.

Try the preceding script in http://www.es6fiddle.net/.

You can also do it like this.

function mul(num1,num2=6)
{
return num1*num2
}
console.log(mul(5))

The result will be 30 in ES6.

Transducer

Now it's time to start the transducer.

Babel is the one of the transducers where we can convert a script from ES6 into ES5.

Assume, if you need to do the preceding functionality in ES5 then the script will be:

function mul()
{
var num1 = arguments.length <= 0 || arguments[0] === undefined ? 5 : arguments[0];
var num2 = arguments.length <= 1 || arguments[1] === undefined ? 6 : arguments[1];
return num1 * num2;
}
console.log(mul());

Check it in https://babeljs.io/repl/.

4. Template Strings

Now instead of using the conventional concatenation operation using the add operator, we can use the simplified template string of ES6. Let me explain it with an example. The following shows the conventional method for concatenation in ES5:

function display(name)
{
return "Welcome to " + name
}
console.log(display("C-Sharp Corner"))

The result in the console is Welcome to C-Sharp Corner

Template string in ES6

function display(name)
{
return `Welcome to ${name}`
}
console.log(display("C-Sharp Corner"))

The result in the console is Welcome to C-Sharp Corner

5. Arrow Function

Let me explain it with an example.

var square = function square(x)
{
return x * x;
};
console.log(square(5));

In the preceding script we have created a separate function to do a multiplication operation.

The same thing can be done in ES6 without a function using the Arrow function.

let square = x => x * x;
console.log(square(5));

Yes, the Arrow function implementation in ES6 is similar to lamda expressions in C#.

Conclusion

From this article you learned some of the awesome features in ES6. More feature of ES6 will be explained in my future articles.

References: