HomeTutorialsArticlesAbout MeContact

FREE JavaScript ES2016 / ES2017 / ES2018 Cheatsheet

By Alberto Montalesi
Published in Article
June 13, 2018
1 min read

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

Tags

jsdownload
Previous Article
Tutorial - Create a To Do List with JavaScript

Alberto Montalesi

Software Developer

buy me coffee
complete guide to modern javascript book cover

Complete Guide to Modern JavaScript

Get the Course

Category

Article
Challenge
Tutorial

Related Posts

My Journey from an ESL Teacher to Software Developer in Vietnam
November 24, 2018
9 min
© 2021, All Rights Reserved.

Quick Links

TutorialsArticlesChallenges

Social Media