Destructuring Assignment

Examples

Objects

varobj={foo:'Mr.Foo',bar:'Mr.Bar'}var{ foo}=obj// var foo = obj.foovar{foo:bar}=obj// var bar = obj.foovar{ foo='default'}={}// var foo = ({}).foo || 'default'var{ foo, bar}=obj// var foo = obj.foo; var bar = obj.barvar{ foo}={}// var foo = undefinedvar{foo:{bar:deep}}={foo:{bar:'bar'}}// deep = 'bar'var{foo:{ bar}}={}// ERROR - {}.foo.bar does not exits

Arrays

var[a,b]=[6,3]// var a = [6,3][0]; var b = [6,3][1]var[a,,c]=[6,9,3]// var a = [6,9,3][0]; var c = [6,9,3][2]var[a,b]=[b,a]// var a = [b,a][0]; var b = [b,a][1]

Functions

// Parameter with default value.varfoo=function(bar=2){console.log(bar)}foo()// 2foo(3)// 3// Parameter with default value object.varfoo=function(bar={a:1,b:2}){console.log(bar)}foo()// {a: 1, b: 2}foo({a:3})// {a: 3}// Parameter object with default values.varfoo=function({a=1, b=2}){console.log(a)console.log(b)}foo()// ERROR - No default when object is not provided.foo({})// 1, 2foo({a:3})// 3, 2// Parameter object (with default values) and default value.varfoo=function({a=1, b=2}={}){console.log(a)console.log(b)}foo()// 1, 2foo({})// 1, 2foo({a:3})// 3, 2

Further Reading

Arrow Functions

Examples

varincrement=(value)=>{returnvalue+1}increment(3)// 4

Block Scope

varincrement=(value)=>value+1// Remove the {} from the function body.increment(3)// 4varincrement=value=>value+1// Removed the () from the value parameter.increment(3)// 4

Object Returning

// The return statement needs to be wrapped on '()'.varfoo=()=>({value:3})foo()// { value : 3 }

this

// "this" is bound to the scope.this.bar=3// ES5functionfoo(){returnbar}foo()// Error - bar undefined// ES6varfoo=()=>this.barfoo()// 3

Further Reading

Block Scope

Examples

// ES5// In order to have a block scope, we would use// IIFEs (Immediately Invoked Function Expression).(functionIIFE(){// Begin block scopevarfoo='Mr.Foo'// End block scope})()foo// Reference Error// ES6// Use {} + let or const for block scope{// Begin block scopevarzed='Mr.Zed'letfoo='Mr.Foo'constbar='Mr.Bar'// End block scope}zed// Mr.Zedfoo// Reference Errorbar// Reference Error

Further Reading

Let && Const

Examples

Let

letfoo='Mr.Foo'// Let variables://  - are block-scoping (i.e. they live in their defined block.)//  - can be reassigned.functionfunc(flag){if(flag){// new block scopeletfoo='NewFoo'returnfoo// end block scope}returnfoo}func(true)// NewFoofunc(false)// Mr.Foo

Const

constfoo='Mr.Foo'// Const variables://  - are block-scoping.//  - can't be reassigned (assignment is immutable.)foo='NewFoo'// ERROR - No new assignment allowed.// An interesting exampleconstbar={a :3}bar={b :7}// error - No new assignment allowed.bar.a=7// OK - We are updating a property, not the assignment.

Further Reading

Template Literals

Examples

`ES6 Template String`// String wrapped into ""`Double "quote"`// Double "quote"// String wrapped into ''`Single 'quote'`// Single 'quote'// Multiple line`MultipleLine`

Interpolation

`${1+2}`// 3constfoo='MrFoo'`Hello${foo}`// Hello MrFooconstbar=()=>'MrBar'`Hello${bar()}`// Hello MrBar

Build Template

constmr=(template, ...expressions)=>{// template is an Array broke at the interpolations// e.g. for `foo {$a} bar {$b}`// template = ['Dear ', ' and ', '']returntemplate.reduce((result,current,index)=>{return`${result}Mr.${expressions[index-1]}${current}`})}constfoo='Foo'constbar='Bar'mr`Dear${foo} and${bar}`// Dear Mr.Foo and Mr.Bar

Further Reading

Object Literals

Examples

// Property value shorthandconstfoo='Mr.Foo'{// Because the property 'foo' has the// same name as the const 'foo'// no need to write { foo: foo }foo}// Computed properties{// [ value to compute to property ] : value[1+3] :'Number 4'}// Method definition{bar(){// Code for function bar}}

Further Reading

Spread Operator

Examples

Destructuring Assignment

[foo,, ...rest]=[1,2,3,4,5]console.log(foo)// 1console.log(rest)// [3,4,5]functionfoo(...parameters){// parameters is an Array// with all parameters.console.log(parameters)}foo(1,2,3)// [1,2,3]foo([1,2,3],4)// [[1,2,3],4]// We can name some parametersfunctionfoo(bar, ...parameters){// bar is the first parameter.// parameters is an Array containing// the remaining parameters.console.log(bar,parameters)}foo()// undefined, []foo(1)// 1, []foo(1,2,3)// 1, [2,3]

Array Literals

[1, ...[2,3],4]// [1,2,3,4]

Function Call

functionfoo(a,b,c){console.log(a,b,c)}foo(...[1,2,3])// 1, 2, 3

Further Reading

Classes

Examples

classCounter{constructor(){this.count=0}increment(){this.count++}decrement(){this.count--}staticisNil(counter){returncounter.count===0}}letcounter=newCounter()counter.increment()// 1counter.increment()// 2counter.decrement()// 1Counter.isNil(counter)// false

Extends

// We now can use the keyword "extends" to easily "inherit" from other "classes".// Not forgetting that this is only syntax sugar to ES5 prototype terminology.classTemperatureextendsCounter{constructor(){// The super keyword identifies our base class "Counter".super()}decrement(){if(this.count>0){super.decrement()}}}lettermo=newTemperature()termo.decrement()// 0 // no decrement because "count" was already 0termo.increment()// 1termo.decrement()// 0

Further Reading

Iterators

Examples

constiterable={[Symbol.iterator](){}}// An iterator is a pointer for traversing the elements of a data structure.// Under the wood JS has a method called @@iterator,// By using the well-known Symbol.iterator we can assign an iterator to this method.// @@iterator is called once, whenever an object needs to be iterated (e.g. for..of loop)// @@iterator will be asked for an iterator.// The returned iterator is then used to obtain the values of the object.// The iterator protocol has to define how to get values out of an object.// We need to define an @@iterator that satisfies that.// The iterator protocol indicates that we must have an object with a 'next' method.// The 'next' method has no arguments and returns an object with two properties:// * done - true if the sequence has end, false otherwise.// * value - the current item in the sequenceconstiterable={[Symbol.iterator](){constitems=['f','o','o']constiterator={next(){return{done:items.length===0,value:items.shift()}}}returniterator}}for(letitemofiterable){console.log(item)// f// o// o}

Further Reading

Generators

Examples

// We use the symbol * to mark a function as a generator and 'yield' to emit an element sequence.function*generator(){yield'f'yield'o'yield'o'}[...generator()]// ['f', 'o', 'o']// Generator object follow both iterable and iterator protocol.varg=generator()// It is an iterable because if has na @@iterator.typeofg[Symbol.iterator]==='function'// true// It is an iterator because if has the .next method.typeofg.next==='function'// true// The iterator for a generator is the generator itself.g[Symbol.iterator]()===g// true[...g]// ['f','o','o']Array.from(g)// ['f', 'o', 'o']for(letitemofg){console.log(item)// 'f'// 'o'// 'o'}// Whenever the 'yield' expression is reached, the value is emitted// by the iterator and the function execution is suspended.function*generator(){yield'foo'console.log('and')yield'bar'}varfoo=generator()foo.next()// emits { value: 'f', done: false } and suspendsfoo.next()// logs 'and', emits { value: 'bar', done: false }, and suspendsfoo.next()// emits {value: undefined, done: true } and finishes// Whenever .next() is called on a generator, there's four events that can suspend the execution:// * yield - emits the next value in the sequence// * return - returns the last value in the sequence// * throw - stops the execution in the generator entirely// Use 'yield*' to delegate to other generator function.function*generator(){yield*'foo'}console.log([...generator()])// ['f','o','o']

Further Reading

Symbols

typeofSymbol()// 'symbol'

Examples

// They are simple tokens that can be used as unique IDs.// We can create a new symbol by using the function Symbol().constID=Symbol()// Every symbol returned by Symbol() is unique.Symbol()===Symbol()// false

Description

// Symbol() has an optional string-value parameters,// which represents the symbol description.// This description is used to convert the symbol to a String.constsymbol=Symbol('aSymbol')String(symbol)// 'Symbol(aSymbol)'

As Object Property

constKEY=Symbol()constobj={[KEY]:'Value'}console.log(obj[KEY])// 'Value'

As Concept

constCAR_BMW=Symbol('BMW')constCAR_AUDI=Symbol('Audi')constCAR_MERCEDES=Symbol('Mercedes')

.for() and .keyFor()

// We can add symbols at run-time with Symbol.for(key) and Symbol.keyFor(symbol)// We can lookup key in runtime-wide on symbol registry.// If a symbol with that key exists then it would be returned.// If no symbol exists, then on would be created.// Therefore, Symbol.for(key) is idempotent.Symbol.for('foo')===Symbol.for('foo')// true// Symbol.keyFor(symbol) returns the key to which the symbol was associated with.constBAR=Symbol.for('bar')console.log(Symbol.keyFor(BAR))// 'bar'

Further Reading

Promises

Examples

.then()

fetch('foo').then(functiononFulfilled(response){// Handle success response.console.log(response)},functiononRejected(){// Handle error.console.log('error')})

new Promise()

newPromise(resolve=>resolve())// promise is fulfillednewPromise((resolve,reject)=>reject())// promise is rejected// Resolving a promise with a value.newPromise(resolve=>resolve('foo')).then(result=>console.log(result))// foo// Resolving a promise with an exception.newPromise((resolve,reject)=>reject(newError('Connection Timeout'))).then(null,reason=>console.log(reason))// Error: Connection Timeout

Promise.all

Promise.all([newPromise(resolve=>resolve('foo')),newPromise(resolve=>resolve('bar'))]).then(response=>console.log(response))// ['foo', 'bar']// If a single promise is rejected, the Promise.all is entirely rejected.Promise.all([Promise.reject(),newPromise(resolve=>resolve('foo'))]).then(()=>console.log('All Resolved'),()=>console.log('All Rejected'))// 'All Rejected'

Further Reading

Maps

Examples

new Map

varmap=newMap()// We can use any object that follows the iterable protocol.// e.g. ['key', 'value']varmap=newMap([['foo','Mr.Foo'],['bar','Mr.Bar']])console.log(map)// Map { 'foo' => 'Mr.Foo', 'bar' => 'Mr.Bar' }// We can use the spread operator to have the opposite effect.console.log([...map])// [ [ 'foo', 'Mr.Foo' ], [ 'bar', 'Mr.Bar' ] ]

.set()

varmap=newMap()// Use primitive as values.map.set('foo','Mr.Foo')// Map { 'foo' => 'Mr.Foo' }map.set(3,'Mr.3')// Map { 'foo' => 'Mr.Foo', 3 => 'Mr.3'  }// Because `keys` are unique, when setting a key that is already defined,// it will override the existing one.map.set('foo','Mr.Bar')// Map { 'foo' => 'Mr.Bar', 3 => 'Mr.3'  }// Use objects as values.map.set(()=>'key','Value')// Map { [Function] => 'Value' }map.set({},'Value')// Map { {} => 'Value'}map.set(newDate,'Value')// Map { 2017-03-16T16:37:15.488Z => 'Value' }map.set(Symbol,'Value')// Map { Symbol => 'Value' }

.has()

varmap=newMap([['foo','Mr.Foo']])console.log(map.has('foo'))// trueconsole.log(map.has('bar'))// false

Deletingkey/value

varmap=newMap([['foo','Mr.Foo'],['bar','Mr.Bar']])// Using .delete()map.delete('bar')console.log(map)// Map { 'foo' => 'Mr.Foo' }// Using .clear(), which deletes everythingmap.clear()console.log(map)// Map { }

Iterating

varmap=newMap([['foo','Mr.Foo'],['bar','Mr.Bar']])// Use .entries() to iterate over the map.console.log(map.entries())// MapIterator { [ 'foo', 'Mr.Foo' ], [ 'bar', 'Mr.Bar' ] }// Use .keys() to iterate over the map keys.console.log(map.keys())// MapIterator { 'foo', 'bar' }// Use .values() to iterate over the map values.console.log(map.values())// MapIterator { 'Mr.Foo', 'Mr.Bar' }

Further Reading

Weak Maps

Examples

varmap=newWeakMap()// Every key must be an object.map.set('foo','Mr.Foo')// TypeError: Invalid value used as weak map key// This enables the map keys to be garage collected//  when they're only being referenced as WeakMap keys.// This is useful when we want to store data that will//  eventually be lost, e.g. DOM nodes.// We can pass an iterable to populate the WeakMap.varfoo=newDate()varbar=()=>{}varmap=newWeakMap([[foo,'Mr.foo'],[bar,'Mr.bar']]);// .has()console.log(map.has(foo))// true// .get()console.log(map.get(bar))// 'Mr.Bar'// .delete()map.delete(foo);console.log(map.has(foo))// false

Further Reading

Sets

Examples

varset=newSet()set.add('foo')// Set { 'foo' }set.add('bar')// Set { 'foo', 'bar' }// .sizeset.size// 2// .keys()varkeysIterator=set.keys()// SetIterator { 'foo', 'bar' }keysIterator.next().value// 'foo'keysIterator.next().value// 'bar'// .values()varvaluesIterator=set.values()valuesIterator.next().value// 'foo'valuesIterator.next().value// 'bar'// .entries()// Returns a new Iterator object containing an array of [value, value]// for each element in the Set, in insertion order.varentriesIterator=set.entries()console.log(entriesIterator.next().value)// ['foo', 'foo']console.log(entriesIterator.next().value)// ['bar', 'bar']// .add()set.add('zed')// Set { 'foo', 'bar', 'zed' }// .has()set.has('zed')// true// .delete()set.delete('zed')// Set { 'foo', 'bar' }

Further Reading

Weak Sets

Examples

varset=newSet()// .add()set.add('foo')// Set { 'foo' }// .has()set.has('foo')// true// .delete()set.delete('foo')// Set { }

Further Reading

Proxies

Examples

// Proxies allows us to defined behaviour whenever// the properties of a target object are accessed.vartarget={}// The handler object is used to configure traps for our Proxy.varhandler={}varproxy=newProxy(target,handler)// Proxy works as a simple pass-through to the target.proxy.foo='Mr.Foo'console.log(target.foo)// 'Mr.Foo'console.log(target.bar)// undefined

Traps

// Let's define a Trap on the handler.get().varhandler={// The handler.get() method is a trap for getting a property value.get:function(target,property,receiver){// We run our Trap code, i.e. console.log.console.log(`Got property${property}`)// Then return the value as .get() will usually do.returntarget[property]}}vartarget={foo:'Mr.Foo'}varproxy=newProxy(target,handler)console.log(proxy.foo)// 'Got property foo'// 'Mr.Foo'

Revoke

vartarget={}varhandler={}var{ proxy, revoke}=Proxy.revocable(target,handler)proxy.foo='Mr.Foo'console.log(proxy)// { foo: 'Mr.Foo' }// By revoking a Proxy we disable any operations on the Proxy.// After revoking, any operations on the Proxy will throw an error.revoke()proxy.foo// TypeError: Cannot perform 'get' on a proxy that has been revoked

Further Reading

Number

Examples

// Binary Literals.// 0b prefix for binary literals.console.log(0b001)// 1console.log(0b010)// 2// Octal Literals.// 0o prefix for octal literals.console.log(0o001)// 1console.log(0o010)// 8// .isNaN()// Determines if the provided value is NaN and its type is Number.Number.isNaN(NaN)// trueNumber.isNaN(0/0)// trueNumber.isNaN('a'*'b')// trueNumber.isNaN(1)// falseNumber.isNaN('foo')// falseNumber.isNaN(undefined)// false// .isFinite()// Determines if the provided value is a finite number.Number.isFinite(Infinity)// falseNumber.isFinite(-Infinity)// falseNumber.isFinite(NaN)// falseNumber.isFinite(0)// trueNumber.isFinite(0b001)// trueNumber.isFinite(0o001)// trueNumber.isFinite('0')// false, would be true with global isFinite('0')Number.isFinite(null)// false, would be true with global isFinite(null)// .parseInt()// Parses a String to an integer in the specified radix.// Has exactly the same functionality as the global parseInt().Number.parseInt('10',2)// 2Number.parseInt('10',8)// 8Number.parseInt('10',10)// 10// .parseFloat()// As for parseInt, Number.parseFloat() has exactly the same// functionality as the global parseFloat().// .isInteger()// Determines if the provided value is a finite number// without a decimal part.Number.isInteger(Infinity)// falseNumber.isInteger(-Infinity)// falseNumber.isInteger(NaN)// falseNumber.isInteger(undefined)// falseNumber.isInteger(null)// falseNumber.isInteger(0)// trueNumber.isInteger(2.75)// falseNumber.isInteger(-5)// trueNumber.EPSILON// Which represents the smallest positive value.// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/EPSILONNumber.MAX_SAFE_INTEGER// Which represents the largest integer that// can be safely and precisely represented in JavaScript.Number.MIN_SAFE_INTEGER// Which represents the smallest integer that// can be safely and precisely represented in JavaScript.Number.isSafeInteger// Returns true for any integer between// [MIN_SAFE_INTEGER, MAX_SAFE_INTEGER].

Further Reading

Array

Examples

// .from()// Creates a new Array from an array-like or iterable object.varfoo=['f','o','o']Array.from(foo)// ['f', 'o', 'o']Array.from('foo')// ['f', 'o', 'o']// .of()// Create a new Array from a variable number of arguments.Array.of(3)// [3]// Which differs from:Array(3)// [ , , ]Array.of(3,'foo',{})// [ 3, 'foo', {} ]// Which is equal to:Array(3,'foo',{})// [ 3, 'foo', {} ]// .copyWithin(target, start, end)// Copies part of an array (start-end)// to another location (target) in the same array.Array(1,2,3,4).copyWithin(2)// [ 1, 2, 1, 2 ]Array(1,2,3,4).copyWithin(2,1)// [ 1, 2, 2, 3 ]Array(1,2,3,4).copyWithin(2,0,1)// [ 1, 2, 1, 4 ]// .fill(value, start, end)// Fills all elements in the array (start-end)// with the provided value.Array(3).fill('foo')// [ 'foo', 'foo', 'foo' ]Array(3).fill('foo',1)// [ , 'foo', 'foo' ]Array(3).fill('foo',1,2)// [ , 'foo',  ]// .find(callback)// Returns the first element in the array// that satisfies the condition.functionisEven(value){returnvalue%2===0}Array(1,2,3,4).find(isEven)// 2// .findIndex(callback)// Returns the index of the first element in the array// that satisfies the condition.Array(1,2,3,4).findIndex(isEven)// 1 <- index of element 2

Iterators

// .keys()// Returns a new Array Iterator that contains the keys// for each index in the array.variterator=['foo','bar','zed'].keys()console.log(iterator.next().value)// 0console.log(iterator.next().value)// 1console.log(iterator.next().value)// 2// .values()// Returns a new Array Iterator that contains the values// for each index in the array.variterator=['foo','bar','zed'].values()console.log(iterator.next().value)// 'foo'console.log(iterator.next().value)// 'bar'console.log(iterator.next().value)// 'zed'// .entries()// Returns a new Array Iterator that contains the pairs// [ key, value ] for each index in the array.variterator=['foo','bar','zed'].entries()console.log(iterator.next().value)// [ 0, 'foo' ]console.log(iterator.next().value)// [ 1, 'bar' ]console.log(iterator.next().value)// [ 2, 'zed' ]

Further Reading

Object

Example

// .assign(target, ...sources)Object.assign({},{foo:'Mr.Foo'},{bar:'Mr.Bar'})// { foo: 'Mr.Foo', bar: 'Mr.Bar' }Object.assign({foo:'Mr.Foo'},{foo:'Foo'})// { foo: 'Foo' }// .is(value1, value2)Object.is([],[])// falseObject.is({},{})// falseObject.is(0,-0)// falseObject.is('foo','foo')// trueObject.is(null,null)// true// .getOwnPropertySymbols(obj)varobjectSymbols=Object.getOwnPropertySymbols({[Symbol('foo')]:'Mr.Foo',[Symbol('bar')]:'Mr.Bar'})// [ Symbol(foo), Symbol(bar) ]console.log(objectSymbols.length)// 2console.log(objectSymbols[0])// Symbol(foo)// .setPrototypeOf(obj, prototype)varfoo={}Object.setPrototypeOf(foo,null)console.log(Object.getPrototypeOf(foo))// null

Further Reading

Strings

Examples

String Manipulation

// .startsWith(searchString[, position])// Determines if a string beings with the specified characters// at the specific position.'foo & bar'.startsWith('foo')// true'foo & bar'.startsWith('bar')// false'foo & bar'.startsWith('bar',6)// true// .endsWith(searchString[, position])// Determines if a string ends with the specified characters// at the specific position.'foo & bar'.endsWith('bar')// true'foo & bar'.endsWith('foo')// false'foo & bar'.endsWith('foo',3)// true// .includes(searchString[, position])// Determines if a string can be founds within another string.'Mr.foo'.includes('foo')// true'Mr.foo'.includes('bar')// false'Mr.foo'.includes('Mr',2)// false// .repeat(count)// Returns a new string containing the specified// number (count) of copies.'foo'.repeat(2)// 'foofoo'// [Symbol.iterator]// Returns a new Iterator object that iterates over// each code character or its code point representation.variterator='ABC'[Symbol.iterator]()console.log(iterator.next().value);// 'A'console.log(iterator.next().value);// 'B'console.log(iterator.next().value);// 'C'variterator='A\uD835\uDC68B\uD835\uDC69C\uD835\uDC6A'[Symbol.iterator]()console.log(iterator.next().value);// 'A'console.log(iterator.next().value);// '\uD835\uDC68'console.log(iterator.next().value);// 'B'

Unicode

// .codePointAt(position)// Returns the unicode of the character at the specified position.'Foo'.codePointAt(0)// 70// .fromCodePoint(num1[, ...[, numN]])// Returns the string created by the specified// sequence of code points.String.fromCodePoint(70,111,111)// 'Foo'// .normalize([form])// Returns a Unicode Normalization Form of a give string.// https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String/normalize

Further Reading

Modules

Examples

Export

// Default exportexportdefault'foo'exportdefaultNaNexportdefault{foo:'Mr.Foo'}exportdefault()=>'Mr.Foo'// Naming exportexportvarfoo='Mr.Foo'varfoo='Mr.Foo'varbar='Mr.Bar'export{foo,bar}varfoo='Mr.Foo'export{fooasmyFoo}// Default export with namingvarapi={foo:'Mr.Foo',bar:'Mr.Bar'}exportdefaultapi

Import

// Default import// export default 'foo'import*from'_moduleName_'// Naming import// export var foo = 'Mr.Foo'import{foo}from'_moduleName_'// export { foo: 'Mr.Foo', bar: 'Mr.Bar' }import{foo,bar}from'_moduleName_'// export { foo as myFoo }import{myFoo}from'_moduleName_'

Further Reading