- Published on
FREE JavaScript ES2016 / ES2017 / ES2018 Cheatsheet
- Authors
- Name
- Alberto Montalesi
Content of the cheat sheet
ES2016
Array.Prototype.includes()
let array = [1, 3, 5, 7, 9, 11]
// check if the element appears in our Arrray
array.includes(3) // true
array.includes(2) // false
// add an index as a second parameter
array.includes(3, 1) // true
array.includes(5, 4) //false
Exponential operator
// before
Math.pow(2, 3)
// 8
//now
2 ** 3
// 8
ES2017
padStart()
& padEnd()
'hi'.padStart(10)
// " hi"
'hi'.padEnd(10)
// "hi "
// you are not limited to adding blank spaces
'hello'.padEnd(13, ' Alberto')
// "hello Alberto"
Object.entries()
and Object.values()
const family = {
father: 'Jonathan Kent',
mother: 'Martha Kent',
son: 'Clark Kent',
}
Object.values(family)
// ["Jonathan Kent", "Martha Kent", "Clark Kent"]
Object.entries(family)
// ["father", "Jonathan Kent"]
// ["mother", "Martha Kent"]
// ["son", "Clark Kent"]
Async and Await
function walk(amount) {
return new Promise((resolve, reject) => {
if (amount < 500) {
reject("the value is too small");
}
setTimeout(() => resolve(``you walked for ${amount}ms``), amount);
});
}
// create an async function
async function go() {
// use the keyword await to wait for the response
const res = await walk(500);
console.log(res);
const res2 = await walk(900);
console.log(res2);
const res3 = await walk(600);
console.log(res3);
const res4 = await walk(700);
console.log(res4);
const res5 = await walk(400);
console.log(res5);
console.log("finished");
}
go();
// you walked for 500ms
// you walked for 900ms
// you walked for 600ms
// you walked for 700ms
// uncaught exception: the value is too small
ES2018
Rest / Spread for Objects
let myObj = {
a: 1,
b: 3,
c: 5,
d: 8,
}
// we use the rest operator to grab everything
// else left in the object.
let { a, b, ...z } = myObj
console.log(a) // 1
console.log(b) // 3
console.log(z) // {c: 5, d: 8}
// using the spread syntax we cloned our Object
let clone = { ...myObj }
console.log(clone)
// {a: 1, b: 3, c: 5, d: 8}
Promise.prototype.finally()
fetch('your-url')
.then((result) => {
// do something with the result
})
.catch((error) => {
// do something with the error
})
.finally(() => {
// do something once the promise is finished
})
Asynchronous iteration
// iterate asynchronously over our data
// using a ``for-await-of`` loop.
for await (const line of readLines(filePath)) {
console.log(line)
}
Lifting template literal restrictions
function tag(strs) {
strs[0] === undefined
strs.raw[0] === "\\unicode and \\u{55}";
}
tag ``\unicode and \u{55}``
// This loosening of the escape sequence restriction
// only applies to tagged
// template literals; untagged templates
// still throw an early error
// for invalid escape sequences:
let bad = ``bad escape sequence: \unicode``;
// throws early error
RegExp features
// s (dotAll)` flag for regular expressions
;/foo.bar/s.test('foo\nbar')
// → true
// RegExp named capture groups
let re = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/u
let result = re.exec('2015-01-02')
// result.groups.year === '2015';
// result.groups.month === '01';
// RegExp Lookbehind Assertions
// make sure that a pattern is or isn't preceded by another
// RegExp Unicode Property Escapes
const regexGreekSymbol = /\p{Script=Greek}/u
regexGreekSymbol.test('π')
// → true