FREE JavaScript ES2016 / ES2017 / ES2018 Cheatsheet

 

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