What’s new in ECMAScript 6 (ES6)

Hi All,

In front-end development, most of you might heard about ECMAScript 6 (ES 6) – next version of JavaScript.  ECMAScript 6 has some great new features. Here I have list out some of the new features in ECMAScript.

Note – Some of the modern browsers are supporting some of ES 6 features. If you still want to use ES 6 features for older browsers then you need compiler which compiles the ES 6 code such as Babeltraceur.

Variables

LET

As of now we are using ‘var’ to declare variable in JavaScript. But now you can use ‘let‘ in ES 6 as well. Only difference lies between scope. The scope of a variable declared using ‘let‘ is only the block it is in, while ‘var‘ results in a variable with the surrounding function as its scope. Let’s see below code which will give you better understanding about ‘var‘ and ‘let‘.

if(true) {
   let i = 1;
}
console.log(i); // undefined

if(true) {
   var i = 1;
}
console.log(i); // 1

CONST

With const, you declare a read-only reference to a value. You must assign a variable directly. If you try to change the variable or if you don’t a set a value immediately, then you’ll get an error:

const MY_CONSTANT = 1;
MY_CONSTANT = 2 // Error
const SOME_CONST; // Error

Note that you can still change object properties or array members:

const MY_OBJECT = {some: 1};
MY_OBJECT.some = 'body'; // Cool

Arrow Functions

Arrow functions are the great addition to JavaScript. The next code snippet shows an Arrow function with the same equivalent function written in ES 5.

let emp = [{name: 'John', email: 'john@xyz.com'}, {name: 'Bobby', email: 'bobby@xyz.com'}];

let empNames = emp.map( e => e.name );

// ES5 equivalent:
var empNames = emp.map(function(e) {
   return e.name;
});

If we look at the syntax of arrow functions, there is no function keyword. What remains is zero or more arguments, the “fat arrow” (=>) and the function expression. The return statement is implicitly added.

With zero or more than one argument, you must provide parentheses and put the function expression in a block ({ … }) if you need more logic or more white space. Most important point you should keep in mind that the value of ‘this ‘ inside the function is not altered: it is the same as the value of ‘this‘ outside the function. No more var self = this to keep track of the current scope. I have written separate post for Arrow functions which gives better understanding about it.

Strings

METHODS

In ES 6, there are couple of convenience methods have been added to string prototype. Let’s have quick demonstration of these methods:

'my string'.startsWith('my'); //true
'my string'.endsWith('my'); // false
'my string'.includes('str'); // true

Simple but effective. Another convenience method has been added to create a repeating string:

'my '.repeat(3); // 'my my my '

TEMPLATE LITERAL

You might aware about template literal syntax ${..}. Let’s check some code snippet quickly:

let name = 'John';

console.log('This is ${name}.');

// ES5 equivalent:
console.log('This is ' + name + '.');

Modules

This is the major feature added in ES 6. Modules are designed around the export and import keywords. Let’s examine an example with two modules right away:

// lib/math.js

export function sum(x, y) {
   return x + y;
}
export var pi = 3.141593;
// app.js

import { sum, pi } from "lib/math";
console.log('2π = ' + sum(pi, pi));

As you can see, there can be multiple export statements. Each must explicitly state the type of the exported value (function and var, in this example).
The import statement in this example uses a syntax (similar to destructuring) to explicitly define what is being imported. To import the module as a whole, the * wildcard can be used, combined with the as keyword to give the module a local name:

// app.js

import * as math from "lib/math";
console.log('2π = ' + math.sum(math.pi, math.pi));

Classes

Classes are built around the class and constructor keywords. Here’s a short example:

class Vehicle {
   constructor(name) {
      this.name = name;
      this.kind = 'vehicle';
   }
   getName() {
      return this.name;
   }   
}

To create an instance of a class, you must use the new keyword. To inherit from a base class, use extends:

class Car extends Vehicle {
   constructor(name) {
      super(name);
      this.kind = 'car'
   }
}

let myCar = new Car('bumpy');

myCar.getName(); // 'bumpy'
myCar instanceof Car; // true
myCar instanceof Vehicle; //true

There’s more to using classes. If you want to dig deeper into the subject, I recommend “Classes in ECMAScript 6” by Dr. Axel Rauschmayer.

Also there are some more new features introduce in ECMAScript 6. Please check out whole list at http://www.ecma-international.org/ecma-262/6.0/

Advertisements

One thought on “What’s new in ECMAScript 6 (ES6)

  1. Pingback: Arrow functions in ECMAScript 6 (ES6) | UIthought - Web Development Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s