EcmaScript 2016 2017 and 2018

#javascript

ES 2016

Array.prototype.includes

includes is simple instance method on the Array and helps to easily find if an item is exist in the Array (including NaN unlike indexOf)

const arr = [1, 2, 3, 4, 5, Nan];
 
// Use indexOf
if (arr.indexOf(3) > -1) {
  console.log(true);
}
 
// Use includes
if (arr.includes(3)) {
  console.log(true);
}
 
// indexOf doesn't work for searching NaN
arr.includes(NaN); // true
arr.indexOf(Nan); // -1

Exponentiation infix operator

the ** instead of Math.pow

Math.pow(7, 2); // 49
 
7 ** 2; // 49

ES 2017

Object.values()

Object.values() returns all the values of the Objects

const motobikes = { suzuki: 1, bwm: 2, kawasaki: 3 };
 
// Use Object.keys()
const vals = Object.keys(motobikes).map(key => motobikes[key]);
console.log(vals); // [1, 2, 3]
 
// Use Object.values()
const vals = Object.values(motobikes);
console.log(vals); // [1, 2, 3]

Object.entries()

Object.entries() return both keys and values in the Array

const bicyles = { giant: 2017, java: 2018, colnago: 2019 };
 
// Print key and value using Object.keys()
Object.keys(bicyles).forEach(key => {
  console.log(`Key: ${key} - Value: ${bicyles[key]}`);
});
 
// Use Object.entries()
for (let [key, value] of Object.entries(bicyles)) {
  console.log(`Key: ${key} - Value: ${value}`);
}

String padding

String.prototype.padStart

That allow appending either an empty string or some other string to the start of original string

'5'.padStart(5); //     5
'5'.padStart(5, '*') // ****5
 
// Fun with formmated
const formatted = [0, 1, 12, 123, 1234].map(number => number.toString().padStart(10, '0');
 
console.log(formmated);
// [
//   '0000000000',
//   '0000000001',
//   '0000000012',
//   '0000000123',
//   '0000001234'
// ]

String.protytype.padEnd

That allow prepending either an emptry string or some other string to the end of original string. padEnd really comes in handy when we are printing multiple items of varying lengths and want to right-align them properly.

const cars = {
  BWM: '10',
  Tesla: '5',
  Lamborghini: '0'
};
 
Object.entries(car).map(([name, count]) => {
  console.log(`${name.padEnd(15, ' -')} Count: ${count.padStart(3, '0')}`);
});
 
// BWM - - - - - - Count: 010
// Tesla - - - - - Count: 005
// Lamborghini - - Count: 000

Async/Await

// Promise
function getAmount(userId) {
  getUser(userId)
    .then(getBankBalance)
    .then(amount => {
      console.log(amount);
    });
}
 
// Async and await
async function getAmount(userId) {
  const user = await getUser(userId);
  const amount = await getBankBalance(user);
  console.log(amount);
}

Async functions themselves return a Promise

async function double(a, b) {
  a = await doubleAfter(a);
  b = await doubleAfter(b);
  return a + b;
}
 
function doubleAfter(number) {
  return new Promise(resolve => {
    setTimeout(resolve(number * 2), 1000);
  });
}
 
double(1, 2).then(console.log);

Call async/await in parallel

async function double(a, b) {
  [a, b] = await Promise.all([doubleAfter(a), doubleAfter(b)]);
  return a + b;
}
 
function doubleAfter(number) {
  return new Promise(resolve => {
    setTimeout(resolve(number * 2), 1000);
  });
}
 
double(1, 2).then(console.log);

Error handling async/await functions

async function double(a, b) {
  try {
    a = await doubleAfter(a);
    b = await doubleAfter(b);
  } catch (e) {}
 
  return a + b;
}