ES6

Default Parameters

ES5

var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://azat.co'
    ...
}

var link = function(height = 50, color = 'red', url = 'http://azat.co') {
  ...
}

Template Literals

ES5

ES6

var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id

var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`

Multi-line Strings

ES5

ES6

var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'

var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear,
    Though as for that the passing there
    Had worn them really about the same,`

var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`

Destructuring Assignment

ES5

ES6

var jsonMiddleware = require('body-parser').json

var body = req.body, // body has username and password
  username = body.username,
  password = body.password

var {json: jsonMiddleware} = require('body-parser')
var {username, password} = req.body
// This also works with arrays
var [col1, col2]  = $('.column'),
  [line1, line2, line3, , line5] = file.split('\n')
// Nested
var metadata = {
    title: "Scratchpad",
    translations: [
       {
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
       }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata
console.log(englishTitle) // "Scratchpad"
console.log(localeTitle)  // "JavaScript-Umgebung"
// This is valid for function parameters
var link = function({name='joni', lastName='delValle'}) {
  ...
}

Enhanced Object Literals

ES5

ES6

var getAccounts = function(){return [1,2,3]}

var accountServiceES5 = {
  getAccounts: getAccounts,
  toString: function() {
    return JSON.stringify()
  },
  valueOf_1_2_3: getAccounts()
}

var getAccounts = function(){return [1,2,3]}

var accountServiceES5 = {
  getAccounts
  toString() {
    return JSON.stringify()
  },
  [ 'valueOf_' + getAccounts().join('_') ]: getAccounts()
}

Arrow Functions

ES5

ES6

var _this = this

$('.btn').click(function(event){
  return _this.sendData()
})


var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(function (value) {
  return "ID is " + value // explicit return
})

$('.btn').click((event) => {
  return this.sendData()
})

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(value => `ID is ${value}`) // implicit return

Promises, before: q, bluebird, etc.

ES5

ES6

setTimeout(function(){
  console.log('Yay!')
}, 1000)

var wait1000 =  new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
}).then(function() {
  console.log('Yay!')
})

Constructs Let and Const

ES5

ES6

function nodeSimplified(){
  var a =10
  console.log(a)  // output 10
  if(true){
   var a=20
   console.log(a) // output 20
  }
  console.log(a) // output 20
}

function nodeSimplified(){
  const MY_VARIABLE =10
  console.log(MY_VARIABLE)  //output 10 
}

function nodeSimplified(){
  let a =10
  console.log(a)  // output 10
  if(true){
   let a=20
   console.log(a) // output 20
  }
  console.log(a)  // output 10
}
function nodeSimplified(){
  const MY_VARIABLE =10
  console.log(MY_VARIABLE)  //output 10
  MY_VARIABLE =20          //throws type error
  console.log(MY_VARIABLE) }

Classes

ES5

ES6

function Bunny(name, age, favoriteFood) {
  this.name = name
  this.age = age
  this.favoriteFood = favoriteFood
} 
Bunny.prototype.eatFavFood = function () {
  console.log('\"Mmmm! Those '+this.favoriteFood+' were delicious\", said '+this.name+', the '+this.age+' year old bunny.')
};
var newBunny = new Bunny('Brigadier Fluffkins', 3, 'Raspberry Leaves')
newBunny.eatFavFood();
// "Mmmm! Those Raspberry Leaves were delicious", said Brigadier Fluffkins, the 3 year old bunny.

class Bunny {
  constructor(name, age, favoriteFood){
    this.name = name
    this.age = age
    this.favoriteFood = favoriteFood
  }
  
  eatFavFood() {
    console.log(`"Mmmm! Those ${this.favoriteFood} were delicious", said ${this.name} the ${this.age} year old bunny.`)
  };
}

let es6Bunny = new Bunny('Brigadier Fluffkins', 3, 'Raspberry Leaves')
es6Bunny.eatFavFood()
// "Mmmm! Those Raspberry Leaves were delicious", said Brigadier Fluffkins the 3 year old bunny.

Extending Objects

ES5

ES6

// Underscore

var o1 = { a: 1 };
var o2 = { b: 2 };
// clone
var copy = _.extend({}, o1);
// merge
var obj = _.extend(o1, o2);

 var o1 = { a: 1 }
 var o2 = { b: 2 }
 // clone
 var copy = Object.assign({}, o1)
 // merge
 var obj = Object.assign(o1, o2)

// Using Spread Operator

var copy = { ...o1 }
var obj = { ...o1, ...o2 }

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
x; // 1
y; // 2
z; // { a: 3, b: 4 }

Modules

ES5

ES6

var scoreboard = function() {
    var message = 'Welcome to the game!';
    function printMessage() {
         console.log(message);
    }
    function updateMessage(newMessage) {
        message = newMessage;
    }
    //return an object that represents our new module
    return {
         showMessage: printMessage,
         updateMessage: updateMessage
    }
}(); //← This is called a immediately invoked function definition, or IIFE
// In another file
scoreboard.printMessage();
scoreboard.updateMessage(“Let the game begin!”);

function printMessage() { console.log(message) }
function updateMessage(newMessage) { message = newMessage }
export { printMessage, updateMessage }
// In another file
import * as message from ‘./message.js’
message.printMessage()