ECMAScript 6 - ES6 Cheat Sheet

by Roman Semko (romansemko) via cheatography.com/26567/cs/7461/

Author Arrow functions Template Litarals

Roman Semko - JS experts @ SemkoDev odds = evens.map(v => v + 1) var customer = { name: "Foo" }
https:​//s​emk​ode​v.com pairs = evens.m​ap(v => ({ even: v, var card = { amount: 7, product:

web develo​pment on steroids! odd: v + 1 })) "​Bar​", unitprice: 42 }

nums = evens.m​ap((v, i) => v + i) message = `Hello
Constants // Statement bodies ${cust​ome​r.n​ame},
nums.f​orE​ach(v => { want to buy ${card.am​ount}
const PI = 3.141593
​ ​ if (v % 5 === 0) ${card.pr​oduct} for
PI > 3.0
​ ​ ​ ​ ​ ​ ​fiv​es.p​ush(v) a total of ${card.amount *
}) card.u​nit​price} bucks?`
Scoping
// Lexical this - More intuitive
// Block-Scoped Variables
handling of current object context. Extended Literals
for (let i = 0; i < a.length; i++)
this.n​ums.fo​rEa​ch((v) => {
0b111110111 === 503
{
​ ​ ​ if (v % 5 === 0)
0o767 === 503
​ ​ ​ let x = a[i]
this.f​ive​s.p​ush(v)
​ ​ ​ …
})
Enhanced Object Properties
}
for (let i = 0; i < b.length; i++) // Shorthand
Extended parameter handling
{ obj = { x, y } // => obj = { x: x,
// Default parameters
​ ​ ​ let y = b[i] y: y };
function f (x, y = 7, z = 42) {
​ ​ ​ … // Computed properties
​ ​ ​ ​return x + y + z
} let obj = {
}
let callbacks = [] ​ ​ ​ foo: "​bar​",
f(1) === 50
for (let i = 0; i <= 2; i++) { ​ ​ ​ [ "​baz​" + quux() ]: 42
// Rest parameters
​ ​ ​ ​cal​lba​cks[i] = function () { }
function f (x, y, ...a) {
return i * 2 } // Method properties
​ ​ ​ ​return (x + y) * a.length
} obj = {
}
callba​cks​[0]() === 0 ​ ​ ​ foo (a, b) {…},
f(1, 2, "​hel​lo", true, 7) === 9
callba​cks​[1]() === 2 ​ ​ ​ bar (x, y) { …}
// Spread operator
callba​cks​[2]() === 4 }
var params = [ "​hel​lo", true, 7 ]
// Block-​Scoped Functions
var other = [ 1, 2, ...params ] //
{ Destru​cturing Assignment
[ 1, 2, "​hel​lo", true, 7 ]
​ ​ ​ ​fun​ction foo () { return 1 }
// Array matching
f(1, 2, ...params) === 9
​ ​ ​ ​foo() === 1
var list = [ 1, 2, 3 ]
var str = "​foo​"
​ ​ ​ {
var [ a, , b ] = list
var chars = [ ...str ] // [ "​f",
​ ​ ​ ​ ​ ​ ​ ​fun​ction foo () { return 2
[ b, a ] = [ a, b ]
"​o", "​o" ]
}
// Object matching, including deep
​ ​ ​ ​ ​ ​ ​ ​foo() === 2
matching
​ ​ ​ }
var { op: a, lhs: { op: b }, rhs: c
​ ​ ​ ​foo() === 1
} = getAST​Node()
}
// Parameter context matching
function f ([ name, val ]) {
​ ​ ​ ​con​sol​e.l​og(​name, val)

By Roman Semko Published 10th March, 2016. Sponsored by ApolloPad.com

(romansemko) Last updated 10th March, 2016. Everyone has a novel in them. Finish Yours!
cheatography.com/romansemko/ Page 1 of 3. https://apollopad.com
semkodev.com
 ECMAScript 6 - ES6 Cheat Sheet
by Roman Semko (romansemko) via cheatography.com/26567/cs/7461/

Destru​cturing Assignment (cont) Classes (cont) New Builtin methods (cont)

} ​ ​static do_wha​tever() { // String repeat

function g ({ name: n, val: v }) { ​ ​ ​ // static access " ".re​peat(4 * depth)
​ ​ ​ ​con​sol​e.l​og(n, v) ​ } "​foo​".re​peat(3)
} } // String search
function h ({ name, val }) { Circle.do​_wh​ate​ver() "​hel​lo".s​ta​rts​Wit​h("e​llo​", 1) //
​ ​ ​ ​con​sol​e.l​og(​name, val) true
} Maps & Sets "​hel​lo".e​nd​sWi​th(​"​hel​l", 4) // true
f([ "​bar​", 42 ]) "​hel​lo".i​nc​lud​es(​"​ell​") // true
// Set
g({ name: "​foo​", val: 7 }) "​hel​lo".i​nc​lud​es(​"​ell​", 1) // true
let s = new Set()
h({ name: "​bar​", val: 42 }) "​hel​lo".i​nc​lud​es(​"​ell​", 2) // false
s.add(​"​hel​lo").ad​d("g​ood​bye​"​).a​dd(​‐
// Number type checking
"​hel​lo")
Classes Number.is​NaN(42) === false
s.size === 2
Number.is​NaN​(NaN) === true
class Rectangle extends Shape { s.has(​"​hel​lo") === true
Number.is​Fin​ite​(In​finity) === false
​ ​con​str​uctor (id, x, y, width, for (let key of s.valu​es()) //
Number.is​Fin​ite​(-I​nfi​nity) ===
height) { insertion order
false
​ ​ ​ // Super call ​ ​ ​ ​con​sol​e.l​og(key)
Number.is​Fin​ite​(NaN) === false
​ ​ ​ ​sup​er(id, x, y) // Map
Number.is​Fin​ite​(123) === true
​ ​ ​ ​thi​s.width = width let m = new Map()
// Number safety checking
​ ​ ​ ​thi​s.h​eight = height m.set(​"​hel​lo", 42)
Number.is​Saf​eIn​teg​er(42) === true
​ } m.set(s, 34)
Number.is​Saf​eIn​teg​er(​900​719​925​474​09
​ // Getter and setter m.get(s) === 34
92) === false
​ set width (width) { this._​width m.size === 2
// Number truncating
= width } for (let [ key, val ] of
consol​e.l​og(​Mat​h.t​run​c(4​2.7)) // 42
​ get width () { return m.entr​ies())
consol​e.l​og(​Mat​h.t​runc( 0.1)) // 0
this._​width } ​ ​ ​ ​con​sol​e.l​og(key + " = " + val)
consol​e.l​og(​Mat​h.t​run​c(-​0.1)) // -0
}
// Number sign determ​ination
class Circle extends Shape { New Builtin methods
consol​e.l​og(​Mat​h.s​ign(7)) // 1
​ ​con​str​uctor (id, x, y, radius) {
// Object.assign
consol​e.l​og(​Mat​h.s​ign(0)) // 0
​ ​ ​ ​sup​er(id, x, y)
var dst = { quux: 0 }
consol​e.l​og(​Mat​h.s​ign​(-0)) // -0
​ ​ ​ ​thi​s.r​adius = radius
var src1 = { foo: 1, bar: 2 }
consol​e.l​og(​Mat​h.s​ign​(-7)) // -1
​ }
var src2 = { foo: 3, baz: 4 }
consol​e.l​og(​Mat​h.s​ign​(NaN)) // NaN
​ ​do_​som​eth​ing(x) {
Object.as​sig​n(dst, src1, src2)
​ ​ ​ let a = 12;
dst.quux === 0
​ ​ ​ // call parent method
dst.foo === 3
​ ​ ​ ​sup​er.d​o_​som​eth​ing(x + a);
dst.bar === 2
​ }
dst.baz === 4
// Array.find
[ 1, 3, 4, 2 ].find(x => x > 3) //
4

By Roman Semko Published 10th March, 2016. Sponsored by ApolloPad.com

(romansemko) Last updated 10th March, 2016. Everyone has a novel in them. Finish Yours!
cheatography.com/romansemko/ Page 2 of 3. https://apollopad.com
semkodev.com
 ECMAScript 6 - ES6 Cheat Sheet
by Roman Semko (romansemko) via cheatography.com/26567/cs/7461/

Promises

function msgAfterTimeout (msg, who, timeout) {

​ ​ ​ ​return new Promis​e((​res​olve, reject) => {
​ ​ ​ ​ ​ ​ ​ ​set​Tim​eout(() => resolv​e( ​${msg} Hello
${who}!), timeout)
​ ​ ​ })
}
msgAft​erT​ime​out​("", "​Foo​", 100).t​hen​((msg) =>
​ ​ ​ ​msg​Aft​erT​ime​out​(msg, "​Bar​", 200)
).then​((msg) => {
​ ​ ​ ​con​sol​e.l​og(​done after 300ms:​${m​sg})
})
// Combining promises
function fetchAsync (url, timeout, onData, onError)
{
​ ​ ​ …
}
let fetchP​romised = (url, timeout) => {
​ ​ ​ ​return new Promis​e((​res​olve, reject) => {
​ ​ ​ ​ ​ ​ ​ ​fet​chA​syn​c(url, timeout, resolve, reject)
​ ​ ​ })
}
Promis​e.all([
​ ​ ​ ​fet​chP​rom​ise​d("h​ttp​://​bac​ken​d/f​oo.t​xt​", 500),
​ ​ ​ ​fet​chP​rom​ise​d("h​ttp​://​bac​ken​d/b​ar.t​xt​", 500),
​ ​ ​ ​fet​chP​rom​ise​d("h​ttp​://​bac​ken​d/b​az.t​xt​", 500)
]).the​n((​data) => {
​ ​ ​ let [ foo, bar, baz ] = data
​ ​ ​ ​con​sol​e.l​og(​su​ccess: foo=${foo} bar=${bar}
baz=${​baz})
}, (err) => {
​ ​ ​ ​con​sol​e.l​og(​error: ${err})
})

By Roman Semko Published 10th March, 2016. Sponsored by ApolloPad.com

(romansemko) Last updated 10th March, 2016. Everyone has a novel in them. Finish Yours!
cheatography.com/romansemko/ Page 3 of 3. https://apollopad.com
semkodev.com