Scribd
Upload
28 views3 pages

Es 6 Cheatsheet

The document provides a cheat sheet overview of ES6 and beyond features including let/const, arrow functions, classes, promises, generators and more. Key points covered include variable scoping, template literals, object destructuring, and async/await syntax.

Uploaded by

apic20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views3 pages

Es 6 Cheatsheet

The document provides a cheat sheet overview of ES6 and beyond features including let/const, arrow functions, classes, promises, generators and more. Key points covered include variable scoping, template literals, object destructuring, and async/await syntax.

Uploaded by

apic20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

ES6 and Beyond

Cheat Sheet
Constants let vs var

> const EULER = 2.7182818284 > var average = 5


> EULER = 13 > var average = (average + 1) / 2
> EULER > average
> 2.7182818284 > 3
> let value = ‘hello world’
> let value = ‘what is new’
Warning! If array or object, the reference is kept // -> throws TypeError: Identifier 'value' has
constant. If the constant is a reference to an object, already been declared
you can still modify the content, but never change the
variable.
Be aware of Temporal Dead Zones:

> const CONSTANTS = []


> console.log(val) // -> 'undefined'
> CONSTANTS.push(EULER)
> var val = 3
> CONSTANTS
> console.log(val) // -> 3
> [ 2.7182818284 ]
> CONSTANTS = { ‘euler’: 2.7182818284 }
Because it's equivalent to:
> CONSTANTS
> [ 2.7182818284 ]
> var val
> console.log(val)
Binary, Octal and Hex Notation
> val = 3
> console.log(val)
> 0b1001011101 // 605
> 0o6745 // 3557
Variables declared with "let/const" do not get hoisted:
> 0x2f50a // 193802

> console.log(val)
New Types // -> Throws ReferenceError
> let val = 3
Symbols, Maps, WeakMaps and Sets > console.log(val) // -> 3

New Scoped Functions


Arrow Function

> {
… let cue = 'Luke, I am your father'
> setTimeout(() => {
… console.log(cue)
… console.log(‘delayed’)
… }
… }, 1000)
> 'Luke, I am your father'

Equivalent with Immediately Invoked


Equivalent with Anonymous Function Function Expressions (IIFE)

> (function () {
> setTimeout(function () { … var cue = 'Luke, I am your father'
… console.log(‘delayed’) … console.log(cue) // 'Luke, I am –
… }.bind(this), 1000) … }())
> console.log(cue) // Reference Error
Object Notation Novelties String Interpolation, Thanks to Template Literals

// Computed properties
> let key = new Date().getTime()
> const name = 'Tiger'
> let obj = { [key]: “value” }
> const age = 13
> obj
> console.log(`My cat is named ${name} and is
> { '1459958882881': 'value' }
${age} years old.`)
> My cat is named Tiger and is 13 years old.

// We can preserve newlines…


// Object literals
let text = ( `cat
balloon = { color, size };
dog
nickelodeon`
// Same as
)
balloon = {
color: color,
size: size
} Default Params

// Better method notations


obj = { > function howAreYou (answer = ‘ok’) {
foo (a, b) { … }, console.log(answer) // probably ‘ok’
bar (x, y) { … } }
}

Promises Classes, Inheritance, Setters, Getters

class Rectangle extends Shape {


constructor (id, x, y, w, h) {
super(id, x, y)
new Promise((resolve, reject) => {
this.width = w
request.get(url, (error, response,
this.height = h
body) => {
}
if (body) {
// Getter and setter
resolve(JSON.parse(body));
set width (w) { this._width = w }
} else {
get width () { return this._width }
resolve({});
}
}
})
class Circle extends Shape {
}).then(() => { ... })
constructor (id, x, y, radius) {
.catch((err) => throw err)
super(id, x, y)
this.radius = radius
// Parallelize tasks
}
Promise.all([
do_a(x) {
promise1, promise2, promise3
let a = 12;
]).then(() => {
super.do_a(x + a);
// all tasks are finished
}
})
static do_b() { ... }
}
Circle.do_b()

Destructuring Arrays Destructuring Objects

> let [a, b, c, d] = [1, 2, 3, 4]; > let luke = { occupation: 'jedi',
> console.log(a); father: 'anakin' }
> 1 > let {occupation, father} = luke
> b > console.log(occupation, father)
> 2 > jedi anakin
Spread Operator
...Go Destructuring Like a Boss

// Turn arrays into comma separated


// values and more
> function logger (...args) {
> const [ cat, dog, ...fish ] = [
console.log(‘%s arguments’,
‘schroedinger’, ‘Laika’, ‘Nemo’, ‘Dori’]
args.length)
> fish // -> [‘Nemo’, ‘Dori’]
args.forEach(console.log)
// arg[0], arg[1], arg[2]
}

...And Destructuring in the Future ES7


Or Do a Better Push

> let arr = [1, 2, 3]


> [...arr, 4, 5, 6] {a, b, ...rest} = { a:1, b:2, c:3, d:4 }
> [1, 2, 3, 4, 5, 6]

Async ES7 Await ES7

async function schrodinger () {


return new Promise((resolve, reject)
=> { try {
const result = Math.random > 0.5 console.log(await schrodinger())
setTimeout(() => { // -> ‘alive’
return result ? resolve(‘alive’) } catch (err) {
: reject(‘dead’) console.log(err)
}) // -> ‘dead’
}) }
}

Export ES7 Importing ES7

export function sumTwo (a, b) { import React from ‘react’


return a + b; import { EULER } from ‘./myexports’
} import * as stuff from ‘./myexports’
export const EULER = 2.7182818284 // equivalent to
let stuff = { sumTwo, EULER } import stuff from ‘./myexports’
export { stuff as default } // { 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

You might also like