Download “NOW! - JavaScript ES2016 ES2017 ESS2018 Cheat sheet” JavaScript-ES2016-ES2017-ES2018-Cheat-Sheet-1.png – Downloaded 181 times – 1 MB



 

Bring this cheat sheet with you to always refresh your modern JavaScript.
To learn more about everything introduced to JavaScript since 2015 check out my book on amazon or read the content here on my blog.

 

 

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

 

Download “NOW! - JavaScript ES2016 ES2017 ESS2018 Cheat sheet” JavaScript-ES2016-ES2017-ES2018-Cheat-Sheet-1.png – Downloaded 181 times – 1 MB

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Categories: JavaScript

Leave a Reply

%d bloggers like this: