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.
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.