ES2015Overview / ES2015


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

See what's new with variables. Next


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


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

var message = `Hello ${name}`

Multiline strings are also supported through backticks. #

  parse-csv [file]

Parses a CSV file.
Further reading...

Learn more at the ES2015: Strings guide.

Write objects easier. Next


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

App = {
  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


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

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

Arrow functions preserve the lexical this. #

list.forEach(item => {

Short functions: Omit the curly braces for short functions. # => Math.PI * Math.sqrt(n))
Further reading...

Learn more at the ES2015: Functions guide.

Write classes, not prototypes. Next


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

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

  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)
Further reading...

Learn more at the ES2015: Classes guide.

Extract variables through destructuring. Next


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


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