Recently released JavaScript v.6, also known as ES6, provides some great new tools to give you more control over your code. We've outlined some of the biggest differences from ES5 for your convenient reference.

JavaScript Tips

var vs. let and const

let is reassignable, const needs you to assign something immediately.

const mustBeAssignedImmediately;
// SyntaxError: Missing initializer in const declaration

const cantReassign = 3;
cantReassign = 4;
// TypeError: Assignment to constant variable.

let thisIsCool;

let thisIsAlsoCool = 3;
thisIsAlsoCool = 4;

Unlike var, which only respects function and global scope, let and const will respect code blocks (like in an if, while, or for).

for (var i = 0; i < 6; i++) {
  var i_sq = i * i;
  console.log(i_sq);
}

console.log(i); // > 6
console.log(i_sq); // > 25

for (let i = 0; i < 6; i++) {
  const i_sq = i * i;
  console.log(i_sq);
}

console.log(i);
// ReferenceError: i is not defined
console.log(i_sq);
// ReferenceError: i_sq is not defined

Object Definition Shorthand

// You can short hand object literals where the key and variable match.
const x = 3;
console.log({ x }); // { x: 3 }

// You can use variables for key names now.
const propName = 'favorite candy';
console.log({[propName]: 'licorice'});
// {'favorite candy': 'licorice'}

// And you can create functions quickly
const methodProps = {
  doThing(){
    console.log('Did thing');
  }
}

methodProps.doThing(); // 'Did thing'

Functions

Fat arrow functions are the preferred method of making anonymous functions:

// Use the braces if you're not returning anything,
// or if you have more than one line of code.
const logTwoThings = (thingOne, thingTwo) => {
  console.log(thingOne, thingTwo);
};

// If you're just returning one expression, you can get rid of the return and the braces.
const square = num => num * num;

// If you want to return a hash, wrap it in parentheses
const makeObject = name => ({name: name});

// You can determine what a value should be if none is provided.
const defaultParams = (x = 3) => {
  console.log(x);
}

Destructuring

Destructuring lets you assign individual variables out of data structures, like arrays or objects.

// If you have an array, you can save the individual values
const [one, two] = [1, 2];
console.log(one, two); // 1 2

// You can do the same with objects;
const person = { name: 'Jeff', email: '[email protected]' };
const { name, email } = person;
console.log(name, email); // 'Jeff' '[email protected]'

You can even do this in params.

const greet = (person) => {
  console.log(person.name);
};

const greet = ({name}) => {
  console.log(name);
}

Rest and Spread

The rest parameters can be used with destructuring or function params to go between arrays and specific values.

const [one, two, ...others] = [1, 2, 3, 4];
// 1, 2, [3, 4]

const restFunc = (one, two, ...others) => {
  console.log(one, two, others);
}
restFunc(1, 2, 3, 4); // 1, 2, [3, 4]

The spread operators let us easily compose new arrays and objects from existing arrays and objects. It copies the values without changing the originals.

const oneAndTwo = [1, 2];
const fourAndFive = [4, 5]
console.log([...oneAndTwo, 3, ...fourAndFive]);
// [1, 2, 3, 4, 5]

const person = { name: 'Jeff' }
console.log({ ...person, id: 1 });
// { name: 'Jeff', id: 1}

Template Literals

Template literals let us concatenate strings from variables.

const name = 'Jeff';
console.log(`Hello, ${name}!`);
// 'Hello, Jeff!'