DEV Community đŸ‘©â€đŸ’»đŸ‘šâ€đŸ’»

DEV Community đŸ‘©â€đŸ’»đŸ‘šâ€đŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
LĂąm
LĂąm

Posted on

Es2015 Cheat Sheet

For..of iteration

for (let i of iterable) {
  ···
}
Enter fullscreen mode Exit fullscreen mode

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

Generators

function* idMaker () {
  let id = 0
  while (true) { yield id++ }
}
Enter fullscreen mode Exit fullscreen mode
let gen = idMaker()
gen.next().value  // → 0
gen.next().value  // → 1
gen.next().value  // → 2
Enter fullscreen mode Exit fullscreen mode

It's complicated.
See: Generators

Exports

export default function () { ··· }
// aka: module.exports.default = ···
Enter fullscreen mode Exit fullscreen mode
export function mymethod () { ··· }
// aka: module.exports.mymethod = ···
Enter fullscreen mode Exit fullscreen mode
export const pi = 3.14159
// aka: module.exports.pi = ···
Enter fullscreen mode Exit fullscreen mode

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

Generators

Imports

import 'helpers'
// aka: require('···')
Enter fullscreen mode Exit fullscreen mode
import Express from 'cs/express'
// aka: const Express = require('···').default || require('···')
Enter fullscreen mode Exit fullscreen mode
import { indent } from 'helpers'
// aka: const indent = require('···').indent
Enter fullscreen mode Exit fullscreen mode
import * as Helpers from 'helpers'
// aka: const Helpers = require('···')
Enter fullscreen mode Exit fullscreen mode
import { indentSpaces as indent } from 'helpers'
// aka: const indent = require('···').indentSpaces
Enter fullscreen mode Exit fullscreen mode

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

Extract values

const fatherJS = { age: 57, name: "Brendan Eich" }

Object.values(fatherJS)
// [57, "Brendan Eich"]
Object.entries(fatherJS)
// [["age", 57], ["name", "Brendan Eich"]]
Enter fullscreen mode Exit fullscreen mode

Modules

Computed property names

let event = 'click'
let handlers = {
  [`on${event}`]: true
}
// Same as: handlers = { 'onclick': true }
Enter fullscreen mode Exit fullscreen mode

See: Object literal enhancements

Getters and setters

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

See: Object literal enhancements

Methods

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

{: data-line="2"}

See: Object literal enhancements

Shorthand syntax

module.exports = { hello, bye }
// Same as: module.exports = { hello: hello, bye: bye }
Enter fullscreen mode Exit fullscreen mode

See: Object literal enhancements

Fat arrows

Fat arrows

setTimeout(() => {
  ···
})
Enter fullscreen mode Exit fullscreen mode

With arguments

readFile('text.txt', (err, data) => {
  ...
})
Enter fullscreen mode Exit fullscreen mode

Implicit return

numbers.map(n => n * 2)
// No curly braces = implicit return
// Same as: numbers.map(function (n) { return n * 2 })
numbers.map(n => ({
  result: n * 2
}))
// Implicitly returning objects requires parentheses around the object
Enter fullscreen mode Exit fullscreen mode

Like functions but with this preserved.
See: Fat arrows

Objects

Reference

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.