Built-ins

Symbols

A symbol is a unique and immutable data type that is often used to identify object properties.
To create a symbol, write Symbol() with an optional string as its description.


const sym1 = Symbol('apple');
console.log(sym1);
// Symbol(apple)

Uniqueness

Each time a new symbol is created, regardless of the description.
The description is only used to describe the symbol. It’s not used as part of the symbol itself.


const sym2 = Symbol('banana');
const sym3 = Symbol('banana');
console.log(sym2 === sym3);
// false

Use case

It is most often used to uniquely identify properties within an object.


// use string as property keys, and the
// second banana overwrites the first one
const bowl = {
  'apple': { color: 'red', weight: 136.078 },
  'banana': { color: 'yellow', weight: 183.151 },
  'orange': { color: 'orange', weight: 170.097 },
  'banana': { color: 'yellow', weight: 176.845 }
};
 
// use symbol as property keys,
// and each symbol is unique
const bowl = {
  [Symbol('apple')]: { color: 'red', weight: 136.078 },
  [Symbol('banana')]: { color: 'yellow', weight: 183.15 },
  [Symbol('orange')]: { color: 'orange', weight: 170.097 },
  [Symbol('banana')]: { color: 'yellow', weight: 176.845 }
};

`Set`

Sets are not indexed-based.
Items in a Set cannot be accessed individually.


// create
const set1 = new Set()
const set2 = new Set(array)
 
// modify
set1.add(element);    // return the set itself
set2.delete(element); // return true or false
 
// delete
set1.clear();
 
// check length
set1.size;
 
// check element existence
set2.has(element);
 
// retrieve all values
const iterator1 = set1.keys();   // return a SetIterator
const iterator2 = set1.values(); // return a SetIterator

`WeakSet`

A normal Set with the following differences:
- WeakSet only contains objects.
- Not iterable and thus cannot be looped over.
- Does not have a .clear() method.
When an object is deleted, it will also be deleted from the WeakSet when garbage collection runs.
WeakSet is useful when there needs an efficient, lightweight solution for creating groups of objects.

`Map`

Both the keys and the values can be objects, primitive values, or a combination of the two.


const map = new Map();
map.set(key, value); // return the map itself
map.get(key);
map.delete(key);     // return true or false
map.clear();
map.has(key);

Looping through `Map`

Default MapIterator


const iterator1 = map.keys();
iterator1.next();
 
const iterator2 = map.values();
iterator2.next();

for...of loop


for (const [key, value] of map) {
  // ...
}

forEach loop


map.forEach((value, key) => fn(value, key));

`WeakMap`

A normal Map with the following differences:
- Only contain objects as keys.
- Not iterable.
- Does not have a .clear() method.
When an object is deleted, the object key will also be deleted from the WeakMap when garbage collection runs.

Promises

A promise will start some work that will be done asynchronously.
A Promise constructor takes a function with two functions.
- When the promise succeeds, the resolve function will be called.
- When the promise fails, the reject function will be called.
A promise returns immediately.
The promise object has a .then() method that takes in the resolve and reject functions.


const promise = new Promise(function (resolve, reject) {
  if (successful) {
    resolve(arguments);
  } else {
    reject('Promise failed');
  }
});
 
promise.then((params) => {
  console.log(`Succeed: ${params}`);
}, (errorMessage) => {
  console.log(errorMessage);
});

Proxies

Proxy constructor takes in two items:
- The object to be proxied.
- The proxy handler object.
  - It contains the list of methods it will handle for the proxied object.
Pass through proxy
- new Proxy(object, {})
- It just passes the request directly to the source object.

`get` trap

Intercept calls to properties.
Take over whenever any property on the proxy is accessed.


const richard = {status: 'looking for work'};
const handler = {
  /**
   * @param target   the proxied object (richard)
   * @param propName the name of the property being accessed (status)
   */
  get(target, propName) {
    return target[propName];
  }
};
const agent = new Proxy(richard, handler);

`set` trap

Intercepting code that will change a property.


const richard = {status: 'looking for work'};
const handler = {
  /**
   * @param target   the proxied object (richard)
   * @param propName the name of the property being modified (payRate)
   * @param value    the new value to be set to propName (payRate)
   */
  set(target, propName, value) {
    // if the pay is being set, take 15% as commission
    if (propName === 'payRate') {
        value = value * 0.85;
    }
    target[propName] = value;
  }
};
const agent = new Proxy(richard, handler);

All traps

get trap: handle calls to property access.
set trap: handle setting the property to a new value.
apply trap: handle being invoked (the object being proxied is a function).
has trap: handle the using in operator.
deleteProperty trap: handle if a property is deleted.
ownKeys trap: handle when all keys are requested.
construct trap: handle when the proxy is used with the new keyword as a constructor.
defineProperty trap: handle when defineProperty is used to create a new property on the object.
getOwnPropertyDescriptor trap: handle getting the property’s descriptors.
preventExtenions trap: handle calls to Object.preventExtensions() on the proxy object.
isExtensible trap: handle calls to Object.isExtensible on the proxy object.
getPrototypeOf trap: handle calls to Object.getPrototypeOf on the proxy object.
setPrototypeOf trap: handle calls to Object.setPrototypeOf on the proxy object.

Proxies vs ES5 getter / setter

With ES5’s getter and setter methods, you need to know before hand the properties that are going to be get/set.
With ES6 Proxies, we do not need to know the properties beforehand.


var obj = {
  _age: 5,
  _height: 4,
 
  get age() {
    console.log(`getting the "age" property`);
    console.log(this._age);
  },
  get height() {
    console.log(`getting the "height" property`);
    console.log(this._height);
  }
};
 
obj.age;    // logs 'getting the "age" property' & 5
obj.height; // logs 'getting the "height" property' & 4

Generators

Use a generator to be able to pause a function mid-execution.
- function* name() { ... }
The asterisk of the generator can be placed anywhere between the function keyword and the function name.
The community has coalesced into having the asterisk appear right next to the function keyword.
Generators cannot be defined with fat arrow functions.
Every call to next() will
- Fulfill the previous yield expression if there is any;
- Return the value following the next yield;
- Pause at the same next yield statement.


function* foo() {
  console.log(`function starts`);
  // the first next() returns 123 and pause here
  const a = (yield 123);
  console.log(`a: ${a}`);
  // the second next(456) replace (yield 123) with 456,
  // and assign it to a, print out a's value, and pause here
  yield a;
  console.log(`function ends`);
  // the third next() will print out the statement,
  // and return undefined
}
 
const iterator = foo();
iterator.next();
// function starts
// { value: 123, done: false }
 
iterator.next(456);
// a: 456
// { value: 456, done: false }
 
iterator.next();
// function ends
// { value: undefined, done: false }

Built-ins

Symbols

Uniqueness

Use case

Set

WeakSet

Map

Looping through Map

WeakMap

Promises

Proxies

get trap

set trap

All traps

Proxies vs ES5 getter / setter

Generators

`Set`

`WeakSet`

`Map`

Looping through `Map`

`WeakMap`

`get` trap

`set` trap