ES6 Syntax and Feature Overview

ECMAScript 2015, also known as ES6, introduced many changes to JavaScript. Here is an overview/reference of some of the most common features and syntactical differences, with comparisons to ES5 where applicable.

Note: A commonly accepted practice is to use

const

unless except in cases of loops and reassignment. However, in this resource I'll be using

let

in place of

var

for all ES6 examples.

Legend

• Variable:

  x

• Object:

  obj

• Array:

  arr

• Function:

  func

• Parameter, method:

  a

  ,

  b

  ,

  c

• String:

  str

Table of contents

• Variable declaration
• Constant declaration
• Arrow function syntax
• Template literals
• Implicit returns
• Key/property shorthand
• Method definition shorthand
• Destructuring (object matching)
• Array iteration (looping)
• Default parameters
• Spread syntax
• Classes/constructor functions
• Inheritance
• Modules - export/import
• Promises/callbacks

Variables and constant feature comparison

I explain the concepts of scope and the differences between

let

var

const

| Keyword | Scope | Hoisting | Can Be Reassigned | Can Be Redeclared | | --------------------------------------------------------------------------------------------- | -------------- | -------- | ----------------- | ----------------- | |

var

let

const

Variable declaration

ES6 introduced the

let

// ES5
var x = 0

// ES6
let x = 0

• MDN Reference: let

Constant declaration

ES6 introduced the

const

// ES6
const CONST_IDENTIFIER = 0 // constants are uppercase by convention

• MDN Reference: const

Arrow functions

The arrow function expression syntax is a shorter way of creating a function expression. Arrow functions do not have their own

this

// ES5
function func(a, b, c) {} // function declaration
var func = function (a, b, c) {} // function expression

// ES6
let func = a => {} // parentheses optional with one parameter
let func = (a, b, c) => {} // parentheses required with multiple parameters

• MDN Reference: Arrow functions

Template literals

Concatenation/string interpolation

Expressions can be embedded in template literal strings.

// ES5
var str = 'Release date: ' + date

// ES6
let str = `Release Date: ${date}`

• MDN Reference: Expression interpolation

Multi-line strings

Using template literal syntax, a JavaScript string can span multiple lines without the need for concatenation.

// ES5
var str = 'This text ' + 'is on ' + 'multiple lines'

// ES6
let str = `This text
           is on
           multiple lines`

• MDN Reference: Multi-line strings

Implicit returns

The

return

// ES5
function func(a, b, c) {
  return a + b + c
}

// ES6
let func = (a, b, c) => a + b + c // curly brackets must be omitted

• MDN Reference: Function body

Key/property shorthand

ES6 introduces a shorter notation for assigning properties to variables of the same name.

// ES5
var obj = {
  a: a,
  b: b,
}

// ES6
let obj = {
  a,
  b,
}

• MDN Reference: Property definitions

Method definition shorthand

The

function

// ES5
var obj = {
  a: function (c, d) {},
  b: function (e, f) {},
}

// ES6
let obj = {
  a(c, d) {},
  b(e, f) {},
}

obj.a() // call method a

• MDN Reference: Method definitions

Destructuring

Use curly brackets to assign properties of an object to their own variable.

var obj = { a: 1, b: 2, c: 3 }

// ES5
var a = obj.a
var b = obj.b
var c = obj.c

// ES6
let { a, b, c } = obj

• MDN Reference: Object initializer

Array iteration (looping)

A more concise syntax has been introduced for iteration through arrays and other iterable objects.

var arr = ['a', 'b', 'c']

// ES5
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

// ES6
for (let i of arr) {
  console.log(i)
}

• MDN Reference: for...of

Default parameters

Functions can be initialized with default parameters, which will be used only if an argument is not invoked through the function.

// ES5
var func = function (a, b) {
  b = b === undefined ? 2 : b
  return a + b
}

// ES6
let func = (a, b = 2) => {
  return a + b
}

func(10) // returns 12
func(10, 5) // returns 15

• MDN Reference: Default paramters

Spread syntax

Spread syntax can be used to expand an array.

// ES6
let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]

console.log(arr3) // [1, 2, 3, "a", "b", "c"]

Spread syntax can be used for function arguments.

// ES6
let arr1 = [1, 2, 3];
let func = (a, b, c) => a + b + c;

console.log(func(...arr1);); // 6

• MDN Reference: Spread syntax

Classes/constructor functions

ES6 introducess the

class

// ES5
function Func(a, b) {
  this.a = a
  this.b = b
}

Func.prototype.getSum = function () {
  return this.a + this.b
}
var x = new Func(3, 4)

// ES6
class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}
let x = new Func(3, 4)

x.getSum() // returns 7

• MDN Reference: Classes

Inheritance

The

extends

// ES5
function Inheritance(a, b, c) {
  Func.call(this, a, b)

  this.c = c
}
Inheritance.prototype.constructor = Inheritance
Inheritance.prototype = Object.create(Func.prototype)
Inheritance.prototype.getProduct = function () {
  return this.a * this.b * this.c
}
var y = new Inheritance(3, 4, 5)

// ES6
class Inheritance extends Func {
  constructor(a, b, c) {
    super(a, b)

this.c = c
  }
  getProduct() {
    return this.a * this.b * this.c
  }
}
let y = new Inheritance(3, 4, 5)

y.getProduct() // 60

• MDN Reference: Subclassing with extends

Modules - export/import

Modules can be created to export and import code between files.

// export.js
let func = a => a + a
let obj = {}
let x = 0

export { func, obj, x }

// import.js
import { func, obj, x } from './export.js'

console.log(func(3), obj, x)

• MDN Reference: export
• MDN Reference: import

Promises/Callbacks

Promises represent the completion of an asynchronous function. They can be used as an alternative to chaining functions.

// ES5 callback
function doSecond() {
  console.log('Do second.')
}

function doFirst(callback) {
  setTimeout(function () {
    console.log('Do first.')
callback()
  }, 500)
}
doFirst(doSecond)

// ES6 Promise
let doSecond = () => {
  console.log('Do second.')
}

let doFirst = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Do first.')
resolve()
  }, 500)
})
doFirst.then(doSecond)

An example below using

XMLHttpRequest

// ES5 callback
function makeRequest(method, url, callback) {
  var request = new XMLHttpRequest()

  request.open(method, url)
  request.onload = function () {
    callback(null, request.response)
  }
  request.onerror = function () {
    callback(request.response)
  }
  request.send()
}
makeRequest('GET', 'https://url.json', function (err, data) {
  if (err) {
    throw new Error(err)
  } else {
    console.log(data)
  }
})

// ES6 Promise
function makeRequest(method, url) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest()

request.open(method, url)
request.onload = resolve
request.onerror = reject
request.send()
  })
}
makeRequest('GET', 'https://url.json')
  .then(event => {
    console.log(event.target.response)
  })
  .catch(err => {
    throw new Error(err)
  })

• MDN Reference