Differences between EcmaScript5 and EcmaScript6

I have been reading the text "Exploring EcmaScript 6 by Dr. Axel Rauschmayer and have found a lot of useful new syntax, here is a sampling:
Source: Exploring ES6

Scoping of 'this'

In ES5:
When you have embedded functions, 'this' inside the scope of the inner function refers to the inner function.
But sometimes we want 'this' to refer to the outer scope. So we assign: const _this = this.

Eg.



In ES6:
Arrow functions don't shadow 'this' in their scopes, so you don't have to assign: const _this = this.
You can simply use 'this' on it's own.


Source: Exploring ES6 - Ch. 4.4

Concat using spread Operator

In ES5:
We have to use the concat function on the first array and pass the rest as arguments.

But in ES6, we can use the spread operator:

Source: Exploring ES6 - Ch. 4.11

C++ style methods

In ES5:
Methods are just properties, but their value is a function.

In ES6:
functions defined within an object's scope are understood as methods

Source: Exploring ES6 - Ch. 4.12

Accessing a Base Class


In ES5:
You have to use the keyword 'prototype' on the Base class in order to access it's methods and the method 'call' on the Base class to set it's member variables:


In ES6:
All you need to do is use the keyword 'super' for both cases:


Reasons for Reading this Text


I'm currently working on a tutorial by Meteor which uses the React framework and ES6.

You can find it here: Meteor using React Tutorial

And although it's great, the learning curve is very steep for those who only know Javascript, not just because of the concepts, but because of the cool new syntax that's been added in the new release.
My hope is to bridge the gap using the text.

Comments

Popular Posts