New ES6 Features

Spread the love

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. Implementation of these features in major JavaScript engines is underway now. See the ES6 standard for full specification of the ECMAScript 6 language.

 

ES6 includes the following new features:

  • Arrow Function
  • Classes
  • Destructuring
  • Constant and let

Arrow Function:

Arrow functions are a new ES6 syntax for writing JavaScript Functions. They will save developers time and simplify function scope. ES6 fat arrow functions have a shorter syntax compared to function expressions and lexically bind to this value.

Arrow Function Syntax:

JavaScript function can be written in two ways using Arrow function:

  1. Expression Syntax
  2. Statement Syntax

Expression syntax:

Using ES5:

Using Es6/ES2015:

In ES5 we had to explicitly mention return statement while return is implied if using expression syntax.

Statement Syntax:

Statement syntax is used when you have to write multiple statement inside function.

Using ES5:

Using Es6:

Lexical this:

In ES5, function create own this scope while  ES6 arrow function use outside environment this scope. Therefore  Arrow function have access to outside environment context also known as Lexical Scoping. The following variables are all lexical inside arrow functions:

  • arguments
  • super
  • this
  • new.target

Lexical scope solve lot’s of Front end developer problems which is “No access to surrounding environment”.

Let’s consider a constructor function and it’s prototype function as following:

In line C, we’d like to access this.prefix, but can’t, because the this of the function from line B shadows the this of the method from line A. In strict mode, this is undefined in non-method functions, which is why we get an error if we use Prefixer:

Scope problem also been faced by developer while providing scope access to callback function when eventListener is added to object. Let’s consider an example:

We used to provide access to function using bind() etc method.

There are various ways to work around above problems in ECMAScript 5.

Solution 1 :  _this = this

You can assign this to a variable that isn’t shadowed. That’s what’s done in line A, below:

Now Prefixer works as expected:

Solution 2 :  bind this

You can use the method bind() to convert a function whose this is determined by how it is called (via call(), a function call, a method call, etc.) to a function whose this is always the same fixed value. That’s what we are doing in line A, below.

ECMAScript 6 solution: arrow functions

With an arrow function, the code looks as follows.

Now above code will work as expected.

Arrow function Pitfall:

1. Returning object literals:

Given that the body of an arrow function can be either an expression or a statement, you have to put an object literal in parentheses if you want it to be an expression body:

For comparison, this is an arrow function whose body is a block:

 

Leave a Reply

Your email address will not be published. Required fields are marked *