DEV Community

Lam
Lam

Posted on

Es2015 Cheat Sheet

#es2015 #cheatsheet

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)