JavaScript: ES6, ES7 and ES8 syntax

Some ES6/ES7 features

Destructuring

Nice summarizing article about destructuring in ES6

• Nesting + defining aliases

  var foo = { bar: { deep: 'pony', dangerouslySetInnerHTML: 'lol' } }
  var {bar: { deep, dangerouslySetInnerHTML: sure }} = foo
  console.log(deep)
  // <- 'pony'
  console.log(sure)
  // <- 'lol'

• Function call + alias and default value at the same time

  function greet ({ age, name:greeting='she' }) {
    console.log(`${greeting} is ${age} years old.`)
  }
  greet({ name: 'nico', age: 27 })
  // <- 'nico is 27 years old'
  greet({ age: 24 })
  // <- 'she is 24 years old'

  Also works in loops, e.g.

  for ({ foo : { smallfoo }, bar } in myArray) { ... }`

• Default (optional) values nested

  function random ({ min=1, max=300 } = {}) {
    return Math.floor(Math.random() * (max - min)) + min
  }
  console.log(random())
  // <- 133

Default values

var {foo=3} = { bar: 2 }
console.log(foo)
// <- 3

Wonderful example: Required values - throws an error if value is called

// utils.js
const is = {
  get required(){
    throw new Error('Required argument')
  }
}

// main.js
import { is } from 'utils'

const foo(name = is.required) => Array.from(name)

This example is from a world without Typescript.

Object [key] setting syntax

from here

let myKey = 'variableKey';
let obj = {
    key1: 'One',
    key2: 'Two',
    [myKey]: 'Three' /* yay! */
};

Async await

In fact every async function you write will return a promise, and every single thing you await will ordinarily be a promise.

Excellent article about the difference between await, return and await return

Try-Catch in async/await

Create helper function (Example from this SO answer)

// utility.js
export function catchEm(promise) {
  return promise.then(data => [null, data])
    .catch(err => [err]);
}

…and call it to handle errors similar to how GoLang does it:

import catchEm from 'utility';

async performAsyncWork() {
  const [err, data] = await catchEm(asyncFunction(arg1, arg2));
  if (err) {
    // handle errors
  } else {
    // use data
  }
}

Async await in functional methods

• How to use async functions with Array.reduce in Javascript