ES2015Overview
devguides.io / ES2015

ES2015

Here's an overview of what's new with ES2015, previously known as ES6.

See what's new with variables. Next

Variables

Block scoping: let is the new var. These variables are only available in their respective blocks. #

function fn () {
  let x = 0
  if (true) {
    let x = 1 only inside this if
  }
}

Constants are variables that you can't modify. #

const DAY = 86400
Further reading...

See the ES2015: variables guide.

Learn about template strings. Next

Strings

Template strings are surrounded by backticks. You can do interpolation with them. #

var message = `Hello ${name}`

Multiline strings are also supported through backticks. #

console.log(`
Usage:
  parse-csv [file]

Parses a CSV file.
`)
Further reading...

Learn more at the ES2015: Strings guide.

Write objects easier. Next

Objects

New shorthand: there are now shorter syntaxes for getters, setters, and methods. #

App = {
  Functions:
  start () { return this.go() },

  Getters and setters:
  get closed () { return this.status === 'closed' },
  set closed (val) { this.status = val ? 'closed' : 'open' },
}

Same-name properties also get a new shorthand. #

Short for { start: start, reset: reset }
module.exports = { start, reset }

Computed property names let you make dynamic names. #

return {
  [ 'prop_' + n ]: 42
}
Further reading...

Learn more at the ES2015: Objects guide.

See new function features. Next

Functions

Default, rest and spread make dynamic arguments easier. # #

function greet(name = 'Jerry') {  }
function greet(...names) {  }
greet(...names)

Arrow functions preserve the lexical this. #

list.forEach(item => {
  this.addItem(item)
})

Short functions: Omit the curly braces for short functions. #

list.map(n => Math.PI * Math.sqrt(n))
Further reading...

Learn more at the ES2015: Functions guide.

Write classes, not prototypes. Next

Classes

ES2015 lets you write classes instead of dealing with prototypes. #

class Circle extends Shape {
  constructor (radius) {
    this.radius = radius
  }

  Methods:
  getArea () { return Math.PI * 2 * this.radius }

  Static methods:
  static createFromDiameter (d) { return new Circle(d / 2) }
}
c = new Circle(10)
c = Circle.createFromDiameter(20)
c.getArea()
Further reading...

Learn more at the ES2015: Classes guide.

Extract variables through destructuring. Next

Destructuring

Arrays can be destructured. The spread operator can be used when destructuring arrays. #

const name = ['John', 'F', 'Kennedy'] 
const [first, middle, last] = name
const [first, ...others] = name

Objects can be destructured. You can even assign them to new names. #

const name = { first: 'Jon', last: 'Snow' } 
const { first, last } = name
const { first: firstName } = name

Function arguments can also be destructured.

function greet ({name, greeting}) {  console.log(`${greeting}, ${name}!`) } 
Further reading...

Learn more at the ES2015: Destructuring guide.

Let's learn about importing and exporting. Next

Modules

import is the new require().

import fs from 'fs'var fs = require('fs') 
import { readFile } from 'fs'var readFile = require('fs').readFile 

export is the new module.exports. You can export default, function, or var.

export default startmodule.exports = start 
export function start () {  }
export var PI = 3.14159

exports.start = function () { ... } exports.PI = 3.14159 

When mixing export default with other exports, import will fetch the default export. This is different from the require() behavior.

import Engine from './engine'      Gets export default
import { start } from './engine'   Gets export function

var Engine = require('./engine').default || require('./engine') 
Further reading...

Learn more at the ES2015: Modules guide.

See what's new with variables. Next chapter