cheatsheets/es6.md

title	category	layout	tags	updated	weight
ES2015+	JavaScript	2017/sheet	Featured	201708	-10

Promises

new Promise(fn)
  .then(fn)
  .catch(fn)

Promise.all(/*...*/)
Promise.race(/*...*/)
Promise.reject(/*...*/)
Promise.resolve(/*...*/)

For asynchronous programming. See: Promises

Block scoping

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

{: data-line="2,4"}

// Constants
const a = 1

let is the new var. See: Let and const

Backtick strings

// Interpolation
var message = `Hello ${name}`

// Multiline strings
var str = `
hello
world
`

Templates and multiline strings. See: Template strings

Binary and octal literals

let bin = 0b1010010
let oct = 0755

See: Binary and octal literals

New methods

// New string methods
"hello".repeat(3)
"hello".contains("ll")
"\u1E9B\u0323".normalize("NFC")

See: New methods

Classes

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

  // methods
  getArea () {
    return Math.PI * 2 * this.radius
  }

  // calling super methods
  expand (n) {
    return super.expand(n) * Math.PI
  }

  // static methods
  static createFromDiameter(diameter) {
    return new Circle(diameter / 2)
  }
}

Syntactic sugar for prototypes. See: Classes

Destructuring

// Destructuring assignment
var [first, last] = ['Nikola', 'Tesla']
let {title, author} = { title: 'The Silkworm', author: 'R. Galbraith' }

// Available in loops too
for (let {title, artist} in songs) {
  // ...
}

// Functions
function greet({ name, greeting }) {
  // ...
}

greet({ name: 'Larry', greeting: 'Ahoy' })

Supports for matching arrays and objects. See: Destructuring

Functions

Function arguments

// Default arguments
function greet (name = "Jerry") {
  return `Hello ${name}`
}

// Rest arguments
function fn(x, ...y) {
  // y is an Array
  return x * y.length
}

// Spread
fn(...[1, 2, 3]) // same as fn(1, 2, 3)

Default, rest, spread. See: Function arguments

Fat arrows

// Fat arrows
setTimeout(() => {
  ...
})

// With arguments
readFile('text.txt', (err, data) => {
  ...
})

// Short syntax (no `return` without `{}`)
numbers.map(n => n * 2)
// Same as: numbers.map(function (n) { return n * 2 })

Like functions but with this preserved. See: Fat arrows

Objects

Shorthand syntax

module.exports = { hello, bye }
// Same as: module.exports = { hello: hello, bye: bye }

See: Object literal enhancements

Methods

const App = {
  start () {
    console.log('running')
  }
}
// Same as: App = { start: function () {···} }

{: data-line="2"}

See: Object literal enhancements

Getters and setters

const App = {
  get closed () {
    return this.status === 'closed'
  },
  set closed (value) {
    this.status === value ? 'closed' : 'open'
  }
}

{: data-line="2,5"}

See: Object literal enhancements

Computed property names

let event = 'click'
let handlers = {
  ['on' + event]: true
}
// Same as: handlers = { 'onclick': true }

{: data-line="3"}

See: Object literal enhancements

Modules

Imports

import 'helpers'
// aka: require('···')

import Express from 'express'
// aka: Express = require('···').default || require('···')

import { indent } from 'helpers'
// aka: indent = require('···').indent

import * as Helpers from 'helpers'
// aka: Helpers = require('···')

import { indentSpaces as indent } from 'helpers'
// aka: indent = require('···').indentSpaces

import is the new require(). See: Module imports

Exports

export default function () { ··· }
// aka: module.exports.default = ···

export function mymethod () { ··· }
// aka: module.exports.mymethod = ···

export const pi = 3.14159
// aka: module.exports.pi = ···

export is the new module.exports. See: Module exports

Generators

Generators

function* idMaker () {
  var id = 0
  while (true) { yield id++ }
}

var gen = idMaker()
gen.next().value  // 0
gen.next().value  // 1
gen.next().value  // 2

It's complicated. See: Generators

For..of iteration

for (let i of iterable) {
  // ...
}

For iterating through generators and arrays. See: For..of iteration