Overview of ECMAScript 6 Part 4 - Promise, Reflect, Tail Call Optimization, Binary and Octal Numeric Literals and Enhanced API for Built-in Objects

Introduction

ES6, also ES2015, is a significant update to ES5 which was standardized early in 2009. The full specification can be found at ECMA - ES6 Standard and JavaScript engines support for ES6 can be found at GitHub - Kangax.

This is the fourth and the last article where I try to reintroduce ES6 new features (containing a little bit code piece newer than ES6) in the middle of 2018 based on Luke Hoban's excellent ES6 overview article.

New JavaScript language features introduced by ES6 in this article are as follows:

ES6 New Features

Promise

Promise provides a more neat way to write asynchronous codes.

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Key points:

Code example:

// timeout example, which usually successes
function timeout(duration = 0) {
    return new Promise((resolve, reject) => {
        setTimeout(resolve, duration);
    })
}

timeout(1000).then(() => {
    console.log("after 1000ms");
    return 'another promise which takes string imidiately after the "after 1000ms"';
}).then((msg) => {
    console.log(msg);
});

Promise.all([timeout(1000), timeout(2000)]).then((resultArray) => {
    console.log("after approximately 2000ms");
}).catch((err) => {
    throw new Error("Somthing wrong is any of the above timeout async calls");
});

Promise.resolve().then(() => {
    console.log("after approximately 0ms");
});

Promise.reject().catch((err) => {
    throw new Error("The error when Promise fails", err);
});

// great example when combined with AJAX
function ajaxGET(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.onload = () => resolve(xhr.responseText);
    xhr.onerror = () => reject(xhr.statusText);
    xhr.send();
  });
}

More: MDN - Promise

Reflect

Reflect is a built-in object that provides methods for interceptable JavaScript operations.

Key point:

Code example:

// Method API
Reflect.apply() // Reflect.apply(target, thisArgument, argumentsList), Function.prototype.apply()

Reflect.construct() // new operator, new target(...args)
Reflect.ownKeys()

Reflect.set()
Reflect.get()
Reflect.has() // in operator

Reflect.defineProperty() // Object.defineProperty()
Reflect.setPrototypeOf()
Reflect.getPrototypeOf() // Object.getPrototypeOf()
Reflect.deleteProperty() // delete operator, delete target[name]
Reflect.getOwnPropertyDescriptor() // Object.getOwnPropertyDescriptor()

Reflect.isExtensible() // Object.isExtensible()
Reflect.preventExtensions() // Object.preventExtensions()

// Runable codes
// Only for .apply since I think .apply bares the most fun parts
Reflect.apply(Math.max, undefined, [1, 2, 3])
Reflect.apply(String.fromCharCode, undefined, [104, 101, 108, 108, 111])
Reflect.apply(RegExp.prototype.exec, /ab/, ['confabulation']).index
Reflect.apply(''.charAt, 'ponies', [3])

More: MDN - Reflect

Tail Call Optimization

The internal implementation which makes recursive algorithms safe facing larger input.

A tail call optimization may occur when the last thing to evaluate before a function returns is a function invocation.

In certain circumstances, the interpreter can the reuse current stack frame for the function call instead of creating a new one.

Key points:

Code example:

function fib(n) {
  if (n <= 1){
    return n;
  } else {
    return fib(n-1) + fib(n - 2);
  }
}

// fib(1000) // don't run it, since it takes time

More: ES6 Tail Call Optimization Explained

Binary and Octal Numeric literals

Like Unicode point escapes and Template, Binary and Octal Numeric literal are just new Lexical Grammar to support my expression from my point of view.

Key points:

Code example:

0b111110111 === 503 // true
0o767 === 503 // true

More: MDN - Numeric Literals

Enhanced API for Objects

ES6 bring many handful tools adopted from other JavaScript libraries.

Code example:

// some of my like most

Object.assign({}, oneObject, { thePropertyToOverwriteOneObject: 'overwrited' })

[1, 2, 3].includes(1)

"abcde".includes("cd")

[1, 2, 3].find(x => x == 3)

["a", "b", "c"].entries()
["a", "b", "c"].values()
["a", "b", "c"].keys()

More: MDN - Number, MDN - Math, MDN - Array.from, MDN - Array.of, MDN - Array.prototype.copyWithin, MDN - Object.assign

Sorry, I don't take enough time to consume all the above listed MDN docs. More information abstraction may come in latter articles.

Summary

With 4 articles of which each one re-introduce 5 new features of ES6 based on Luck Hoban's Overview of ES5, I finished this ES5 new feature exploration and study. Hope my endeavor would bring some help for those who come across my articles.


* cached version, generated at 2019-06-21 23:17:39 UTC.

Subscribe by RSS