FREE JavaScript ES2016 / ES2017 / ES2018 Cheatsheet

Wed Jun 13 2018 / articles

javascript 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
  • Project #1: How to Create a Random Quote Generator with JavaScript