Learn to code

Learn to Code: Toptal’s Quick And Practical JavaScript Cheat Sheet: ES6 And Beyond

JavaScript: What is ES6?

ECMAScript 6 (ES6) is the latest standard specification of JavaScript, the programming language of the Web. Since HTML5 and the birth of Node.js, the runtime that allows us to run JavaScript on the server or desktop, JavaScript has gained a unique momentum. There is a growing adoption rate among enterprises, embracing it into production, and thus its newest features were greatly awaited.

We created this cheat sheet as a list of ES6 features we use everyday. Trying to be comprehensive but concise at the same time, new API methods are left apart. For those who need them, make a quick search by yourself or try to explore the MDN documentation to catch the latest experimental APIs. However, some the most bleeding edge characteristics like async and await from the next specification draft (ES7) are included. This is because of most of us developers are going to use a transpiler like Babel anyway to get advantage of the newest JavaScript.

You can test out some of the mentioned tips by running the node REPL with this command:

node --use-strict $(node --v8-options | grep harm | awk '{print $1}' | xargs) #ES6

Or, use directly a babel-node to get the most of Javascript in your console.

Download JavaScript ES6 Cheat Sheet

CLICK HERE TO DOWNLOAD JAVASCRIPT ES6 CHEAT SHEET

JavaScript (ES6 and Beyond) Cheat Sheet

Constants

> const EULER = 2.7182818284
> EULER = 13
> EULER
> 2.7182818284

let vs var

> var average = 5
> var average = (average + 1) / 2
> average
> 3
> let value = ‘hello world’
> let value = ‘what is new’
// -> throws TypeError: Identifier 'value' has already been declared

Warning! If array or object, the reference is kept constant. If the constant is a reference to an object, you can still modify the content, but never change the variable.

> const CONSTANTS = []
> CONSTANTS.push(EULER)
> CONSTANTS
> [ 2.7182818284 ]
> CONSTANTS = { ‘euler’: 2.7182818284 }
> CONSTANTS
> [ 2.7182818284 ]

Be aware of Temporal Dead Zones:

> console.log(val) // -> 'undefined'
> var val = 3
> console.log(val)
 // -> 3

Because it’s equivalent to:

> var val
> console.log(val)
> val = 3
> console.log(val)

Variables declared with “let/const” do not get hoisted:

> console.log(val)
// -> Throws ReferenceError
> let val = 3
> console.log(val)
// -> 3

Binary, Octal and Hex Notation

> 0b1001011101 // 605
> 0o6745 // 3557
> 0x2f50a // 193802

New Types

Symbols, Maps, WeakMaps and Sets

Arrow Function

> setTimeout(() => {
…  console.log(‘delayed’)
… }, 1000)

New Scoped Functions

> {
… let cue = 'Luke, I am your father'
 console.log(cue)
… }
> 'Luke, I am your father'

Equivalent with Anonymous Function

> setTimeout(function () {
…   console.log(‘delayed’)
… }.bind(this), 1000)

Equivalent with Immediately Invoked Function Expressions (IIFE)

> (function () {
… var cue = 'Luke, I am your father'
… console.log(cue) // 'Luke, I am –
… }())
> console.log(cue)
// Reference Error

Object Notation Novelties

// Computed properties
> let key = new Date().getTime()
> let obj = {  [key]: “value” }
> obj
> { '1459958882881': 'value' }

// Object literals
balloon = { color, size };

// Same as
balloon = {
  color: color,
  size: size
}
// Better method notations
obj = {
foo (a, b) { … },
bar (x, y) { … }
}


String Interpolation, Thanks to Template Literals

> const name = 'Tiger'
> const age = 13
>
console.log(`My cat is named ${name} and is ${age} years old.`)
> My cat is named Tiger and is 13 years old.

// We can preserve newlines…
let text = ( `cat
dog
nickelodeon`
)

Default Params

> function howAreYou (answer = ‘ok’) {      
 console.log(answer) // probably ‘ok’
}

Promises

new Promise((resolve, reject) => {
  request.get(url, (error, response,  
  body) => {
    if (body) {
        resolve(JSON.parse(body));
      } else {
        resolve({});
      }
  })
}).then(() => { ... })
.catch((err) => throw err)
// Parallelize tasks
Promise.all([
   promise1, promise2, promise3
]).then(() => {
   // all tasks are finished
})

Classes, Inheritance, Setters, Getters

class Rectangle extends Shape {
  constructor (id, x, y, w, h) {
    super(id, x, y)
    this.width = w
    this.height = h
  }
  // Getter and setter
  set width (w) { this._width = w }
  get width () { return this._width }
}
class Circle extends Shape {
  constructor (id, x, y, radius) {
    super(id, x, y)
    this.radius = radius
  }
  do_a(x) {
    let a = 12;
    super.do_a(x + a);
  }
  static do_b() { ... }
}
Circle.do_b()

Destructuring Arrays

> let [a, b, c, d] = [1, 2, 3, 4];
> console.log(a);

> 1
> b
> 2

Destructuring Objects

> let luke = {  occupation: 'jedi',
 father: 'anakin' }
> let {occupation, father} = luke
> console.log(occupation, father)

> jedi anakin

Spread Operator

// Turn arrays into comma separated
// values and more
> function logger (...args) {
 console.log(‘%s arguments’,
    args.length)
 args.forEach(console.log)
 // arg[0], arg[1], arg[2]
}

…Go Destructuring Like a Boss

> const [ cat, dog, ...fish ] = [
‘schroedinger’,  ‘Laika’, ‘Nemo’, ‘Dori’]
> fish // -> [‘Nemo’, ‘Dori’]

Or Do a Better Push

> let arr = [1, 2, 3]
> [...arr, 4, 5, 6]
> [1, 2, 3, 4, 5, 6]

…And Destructuring in the Future    ⚠ ES7

{a, b, ...rest} = {a:1, b:2, c:3, d:4}

Async   ⚠ ES7

async function schrodinger () {
return new Promise((resolve, reject)
  => {
   const result = Math.random > 0.5
   setTimeout(() => {
     return result ? resolve(‘alive’)
     : reject(‘dead’)
   })
  })
}

Await   ⚠ ES7

try {
console.log(await schrodinger())
// -> ‘alive’
} catch (err) {
console.log(err)
// -> ‘dead’
}

Export   ⚠ ES7

export function sumTwo (a, b) {
return a + b;
}
export const EULER = 2.7182818284
let stuff = { sumTwo, EULER }
export { stuff as default }

Importing   ⚠ ES7


import React from ‘react’
import { EULER } from ‘./myexports’
import * as stuff from ‘./myexports’
// equivalent to
import stuff from ‘./myexports’
// { sumTwo, EULER }

Generators

They return a objects that implement an iteration protocol. i.e. it has a next() method that returns { value: < some value>, done: <true or false> }.

function* incRand (max) { // Asterisk defines this as a generator
while (true) {
// Pause execution after the yield, resume
// when next(<something>) is called
// and assign <something> to x
let x = yield Math.floor(Math.random() * max + 1);
max += x;
}
}

var rng = incRand(2) // Returns a generator object
> rng.next() // { value: <between 1 and 2>, done: false }
> rng.next(3) // as above, but between 1 and 5
> rng.next() // NaN since 5 + undefined results in NaN
> rng.next(20) // No one expected NaN again?
> rng.throw(new Error('Unrecoverable generator state.'))
// Will be thrown from yield

This article was written by Jesus Dario Rivera, a Toptal Javascript developer.

Leave a Reply

Scroll to Top