ES2017

August, 2018
An overview of ES2017

Async Await

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/async_function

Aysnc/Await makes writing asynchronous code much, much easier. Async functions work well with the Fetch API which returns a promise.

const apiUser = {
  donald: {
    name: "Donald Duck",
    age: "34",
    type: "user",
    id: 2345
  }
};

const apiPosts = {
  2345: {
    title: "How to be an amazing duck.",
    content: "Try to be more like me."
  }
};

const getUser = name => {
  return new Promise(resolve => {
    const data = apiUser[name];
    setTimeout(() => resolve(data), 1000);
  });
};

const getUserPosts = id => {
  return new Promise(resolve => {
    const data = apiPosts[id];
    setTimeout(() => resolve(data), 1000);
  });
};

const getUserData = async name => {
  let user, posts;
  try {
    user = await getUser(name).then(data => data);
    console.log("...retrieved user");
  } catch (e) {
    console.log(`failed to retreive user: ${e}`);
  }
  try {
    posts = await getUserPosts(user.id).then(data => data);
    console.log("...retrieved userPosts");
  } catch (e) {
    console.log(`failed to retrieve user: ${e}`);
  }
  return {
    user,
    posts
  };
};
const tick = setInterval(() => {
  console.log("tick");
}, 500);

const data = getUserData("donald").then(data => {
  console.log("getUserData:", data);
  clearInterval(tick);
});
console.log("Waiting...");
console.log(data);
let badData = getUserData("bugs");

Trailing Commas

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

Trailing commas are now legal in arrays, objects, and functions or methods.

function foo(arg1, arg2,) {};

let x = [1,2,3,4,];
let y = {
  a: 1,
  b:2,
};

Object.getOwnPropertyDescriptor

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor

getOwnPropertyDescriptor allows you to get a description of a property from an object if the property is present on that object. It doesn’t check the objects prototype chain.

let y = {
  a: 1,
  b:2,
};

let x = Object.getOwnPropertyDescriptor(y, 'a');
console.log(x);

PadStart and PadEnd

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd

padStart and padEnd allow you to format the beginning and end of a string without exceeding a set total length.

let str = "121";
let start = "$";
let end = ".00";
str = str.padStart(str.length + 1, start);
str = str.padEnd(str.length + 3, end);
console.log(str);
str = str.padEnd(10, "*");
console.log(str);

Object.entries()

Object.entries() returns an array whose elements are arrays corresponding to the enumerable property [key, value] pairs found directly upon object.

Mozilla Object.entries()

const recipie = {
  eggs: 4, 
  milk: '8oz',
  sugar: '2cups',
  chocolate: '8oz',
  flour: '2cups',
};

const recipieMap = new Map([...Object.entries(recipie)]);
console.log(recipieMap);

Object.values()

Object.values() returns an array whose elements are the enumerable property values found on the object.

Mozilla Object.values()

const recipie = {
  eggs: 4, 
  milk: '8oz',
  sugar: '2cups',
  chocolate: '8oz',
  flour: '2cups',
};

const recipieSet = new Set([...Object.values(recipie)]);
console.log(recipieSet);

Atomics and Shared Array Buffers

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Atomics

Atomics are methods for working with shared data that safeguard against data races. They are necessary when working with shared array buffers. However, shared array buffers were disabled do to Spectre.

References