This post contains important new features introduced in ES6. We will go through the syntax used in ES5 side by side with ES6.

Classes

//ES5 Style
var Shape = function(id, dx, dy) {
    this.id = id;
    this.move(dx, dy);
}

Shape.prototype.move = function(dx, dy) {
    this.x = dx;
    this.y = dy;
}

var shape = new Shape(1, 5, 10);
console.log(shape);

//ES6 Style
class Shape {
  constructor(id, dx, dy) {
    this.id = id;
    this.move(dx, dy);
  }
  
  move(dx, dy) {
    this.dx = dx;
    this.dy = dy;
  }
}

var shapeES6 = new Shape(2, 20, 30);
console.log(shapeES6);

Modules

We can export functions or objects or variables in one file and import into another file without any global namespace conflicts.

//ES5 Style
//  lib/math.js
LibMath = {};
LibMath.sum = function (x, y) { return x + y };
LibMath.pi = 3.141593;

//  someApp.js
var math = LibMath;
console.log("2π = " + math.sum(math.pi, math.pi));

//  otherApp.js
var sum = LibMath.sum, pi = LibMath.pi;
console.log("2π = " + sum(pi, pi));


//ES6 Style
//  lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

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

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

const and let

Variable defined with const are immutable i.e its value cannot not be changed, but variables defined with let are mutable. To get a deep dive into when should we use const and let, please visit this article by Dr. Axel Rauschmayerwhich explains details about variables and scoping in ES6.

const MY_AGE = 20;
console.log(MY_AGE); //prints 20

MY_AGE = 30;
console.log(MY_AGE);//prompts error: Uncaught TypeError: Assignment to constant variable

let DB_NAME = "dbtest";
console.log(DB_NAME);//prints dbtest

DB_NAME = "otherdbtest";
console.log(DB_NAME);//prints otherdbtest

Arrows functions

//ES5 Style
var persons = [
  {name: 'Jack', age: 20},
  {name: 'Anthony', age: 20},
  {name: 'David', age: 25},
  {name: 'Hailer', age: 28},
  {name: 'Luke', age: 25}
];

//Filters array, can change the size of an array after filter is applied.
var age20Persons = persons.filter(function(person) {
  return person.age === 20;
});
console.table(age20Persons);

//Modifies the value of an array item but map does not change the size of an array.
var presonGreetings = persons.map(function(person) {
  return "Hello, " + person.name;
});
console.log(presonGreetings);

//ES6 Style, using arrow notation
//Filters array, can change the size of an array after filter is applied.
//We can just pass parameters instead of using function(data){} and direclty return value without usind return statement.
var age20Personses6 = persons.filter(person => person.age === 20);
console.table(age20Personses6);

//Modifies the value of an array item but map does not change the size of an array.
var presonGreetingses6 = persons.map(person =>  "Hello, " + person.name);
console.log(presonGreetingses6);

//If we have multiple parameters to a function and a block of code to execute we can use following syntax
var getResults = (persons, increament) => {
  console.log("Age increased by: ", increament);
  return persons.map(per => per.age*increament);
};
console.log(getResults(persons, 2));

Default Parameters

//ES5 Style
var changeColor = function(color) {
  var marioColor = color || 'red';
  
  this.css({
    background-color: marioColor;
  });
}
//ES6 Style
var changeColor = function(color = 'red') {
  var marioColor = color ;
  
  this.css({
    background-color: marioColor;
  });
}
//Calling function
changeColor();

Template Literals

//ES5 Style
var fullName = firstname + ' ' + lastname;

//ES6 Style
var fullName = `${firstname} ${lastname}`;

Destructuring Assignment

//ES5 Style
var data = jQuery('body').data();
//If jQuery('body').data() returns properties userName and email, we have to destructure in following way
var userName = data.userName;
var email = data.email;

//ES6 Style
var {userName, email} = jQuery('body').data();

//This is also valid for array
var [w1, w2, w3] = "word1, word2, word3".split(',');

Reference 1 Reference 2 Reference 3