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://semkodev.com pairs = evens.map(v => ({ even: v, var card = { amount: 7, product:
web development on steroids! odd: v + 1 })) "Bar", unitprice: 42 }
nums = evens.map((v, i) => v + i) message = `Hello
Constants // Statement bodies ${customer.name},
nums.forEach(v => { want to buy ${card.amount}
const PI = 3.141593
if (v % 5 === 0) ${card.product} for
PI > 3.0
fives.push(v) a total of ${card.amount *
}) card.unitprice} 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.nums.forEach((v) => {
0b111110111 === 503
{
if (v % 5 === 0)
0o767 === 503
let x = a[i]
this.fives.push(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
callbacks[i] = function () { }
function f (x, y, ...a) {
return i * 2 } // Method properties
return (x + y) * a.length
} obj = {
}
callbacks[0]() === 0 foo (a, b) {…},
f(1, 2, "hello", true, 7) === 9
callbacks[1]() === 2 bar (x, y) { …}
// Spread operator
callbacks[2]() === 4 }
var params = [ "hello", true, 7 ]
// Block-Scoped Functions
var other = [ 1, 2, ...params ] //
{ Destructuring Assignment
[ 1, 2, "hello", true, 7 ]
function 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",
function 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
} = getASTNode()
}
// Parameter context matching
function f ([ name, val ]) {
console.log(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/
Destructuring Assignment (cont) Classes (cont) New Builtin methods (cont)
} static do_whatever() { // String repeat
function g ({ name: n, val: v }) { // static access " ".repeat(4 * depth)
console.log(n, v) } "foo".repeat(3)
} } // String search
function h ({ name, val }) { Circle.do_whatever() "hello".startsWith("ello", 1) //
console.log(name, val) true
} Maps & Sets "hello".endsWith("hell", 4) // true
f([ "bar", 42 ]) "hello".includes("ell") // true
// Set
g({ name: "foo", val: 7 }) "hello".includes("ell", 1) // true
let s = new Set()
h({ name: "bar", val: 42 }) "hello".includes("ell", 2) // false
s.add("hello").add("goodbye").add(‐
// Number type checking
"hello")
Classes Number.isNaN(42) === false
s.size === 2
Number.isNaN(NaN) === true
class Rectangle extends Shape { s.has("hello") === true
Number.isFinite(Infinity) === false
constructor (id, x, y, width, for (let key of s.values()) //
Number.isFinite(-Infinity) ===
height) { insertion order
false
// Super call console.log(key)
Number.isFinite(NaN) === false
super(id, x, y) // Map
Number.isFinite(123) === true
this.width = width let m = new Map()
// Number safety checking
this.height = height m.set("hello", 42)
Number.isSafeInteger(42) === true
} m.set(s, 34)
Number.isSafeInteger(90071992547409
// 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
console.log(Math.trunc(42.7)) // 42
get width () { return m.entries())
console.log(Math.trunc( 0.1)) // 0
this._width } console.log(key + " = " + val)
console.log(Math.trunc(-0.1)) // -0
}
// Number sign determination
class Circle extends Shape { New Builtin methods
console.log(Math.sign(7)) // 1
constructor (id, x, y, radius) {
// Object.assign
console.log(Math.sign(0)) // 0
super(id, x, y)
var dst = { quux: 0 }
console.log(Math.sign(-0)) // -0
this.radius = radius
var src1 = { foo: 1, bar: 2 }
console.log(Math.sign(-7)) // -1
}
var src2 = { foo: 3, baz: 4 }
console.log(Math.sign(NaN)) // NaN
do_something(x) {
Object.assign(dst, src1, src2)
let a = 12;
dst.quux === 0
// call parent method
dst.foo === 3
super.do_something(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 Promise((resolve, reject) => {
setTimeout(() => resolve( ${msg} Hello
${who}!), timeout)
})
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
console.log(done after 300ms:${msg})
})
// Combining promises
function fetchAsync (url, timeout, onData, onError)
{
…
}
let fetchPromised = (url, timeout) => {
return new Promise((resolve, reject) => {
fetchAsync(url, timeout, resolve, reject)
})
}
Promise.all([
fetchPromised("http://backend/foo.txt", 500),
fetchPromised("http://backend/bar.txt", 500),
fetchPromised("http://backend/baz.txt", 500)
]).then((data) => {
let [ foo, bar, baz ] = data
console.log(success: foo=${foo} bar=${bar}
baz=${baz})
}, (err) => {
console.log(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
