ES6 Things to remember

by Corey Snyder

In an attempt to brush up on my ES6 skills I'm creating a cheatsheet to reflect back on as I'm writing my code to remember to take advantage of some of these features where it makes sense.

Fat Arrow Functions

Awesome for one-liners when working with UnderscorejS or when you need scope to be preserved.

var add = (a, b) => a + b;

Object Spread Operator

Also notice the shorthand for setting named properties.

const a = 'a';
const oldA = { a: a }; // long, redundant way
const oA = { a }; // short an sweet!
const b = 'b';
const oB = { b };
const c = {...oA, ...oB}; // { a: 'a', b: 'b' }

Destructuring

Both objects and arrays support destructuring, meaning that you can extract values from them and assign them to named variables:

const [firstName, lastName] = ['Corey', 'Snyder'];
firstName; // 'Corey'
lastName; // 'Snyder'

var book = {author: "Corey", year: "2012", length: 500}

// The following is equivalent to:
// const author = book.author;
const { author, year } = book;
author; // 'Corey'
year; // '2012'

// You can use a different name like this:
// const {property: as} = book
const {year: publicationYear} = book;

Parameter Defaults

var concatenator = (numOne = 'UndefinedWordOne', numTwo = 'UndefinedWordTwo') => numOne + ' ' + numTwo;
concatenator("Corey") // "Corey UndefinedWordTwo"

Combining some of these ideas to create a function which creates an object with defaults:

const createUser = ({
  name = 'Anonymous',
  avatarThumbnail = '/avatars/anonymous.png'
}) => ({
  name,
  avatarThumbnail
});
const george = createUser({
  name: 'George'
});
george;
/*
{
  name: 'George',
  avatarThumbnail: '/avatars/anonymous.png'
}
*/

What to look at next?