JavaScript v.6 Cheat Sheet

In the fast-paced web development landscape, it’s important to stay up-to-date with the latest advancements in programming languages. ECMAScript 6 (ES6) is the latest specification of Javascript which introduced a suite of powerful new features and functionalities.

Our ES6 cheat sheet includes features that have become an integral part of our coding projects. Read on to learn more.

What is JavaScript

JavaScript is a versatile programming language used to create interactive and dynamic content on websites. Originally developed in the mid-1990s, it has served as the backbone of numerous web applications on the Internet.

JavaScript operates as a client-side scripting language, meaning it executes code within a web browser. Developers can manipulate webpage content, manage form interactions, create responsive designs, and update page elements without requiring the page to reload.

The emergence of Node.js enabled the execution of JavaScript on the server-side for backend development. This shift has broadened JavaScript's utility, allowing developers to create full-stack applications, handle server-side operations, and manage databases.

JavaScript is known for its flexibility. It supports procedural, object-oriented, and functional programming styles. Its rich ecosystem, vast community support, and regular updates (such as ECMAScript standards) make it a dynamic and ever-evolving language.

Released in 2015, 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: 'jeff@jeff.jeff' };
const { name, email } = person;
console.log(name, email); // 'Jeff' 'jeff@jeff.jeff'

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!'