JavaScript 2020 - New Features - Part 2

Dynamic Import

Allows the programmer to load modules asynchronously and dynamically i.e on demand. The import() is used for loading the modules. The import() returns a promise.

// mymath.mjs
export function add(a,b) {
    return a+b;
}


// program.js
// dynamic import 
let mod = './mymath.mjs'
import(mod).then (arg => {
    console.log("module loaded", arg);
}).catch(err => {
    console.log("Error loading module", err);
});

In the above code the module mymath.mjs is loaded asynchronously and dynamically.If the loading of the module is successful then() function is executed else catch() is executed.

Promise.allSettled() function

The function Promise.allSettled() takes an iterable object which contains one or more promise objects. It waits for all the promise objects to finish (irrespective of their state i.e the promises can be resolved or rejected).

// Promise.allSettled
let prm = [
    Promise.resolve("success"),
    Promise.reject(new Error("Failed"))
];

Promise.allSettled(prm).then (arg => {
    console.log("all settled", arg[0], arg[1]);
});
/* output
all settled {status: 'fulfilled', value: 'success'} {status: 'rejected', reason: Error: Failed}
*/

In the above code the Promise.allSettled takes an array of promise objects. When both the promises are completed .

Promise.allSettled([
    Promise.resolve("ram"),
    new Promise((resolve) => setTimeout(() => resolve(100), 4000)),
    true,
    Promise.reject(new Error("an error")),
  ]).then((values) => {
    for (let ob in values)
    console.log("values", values[ob]);    
  });
  /* 
  output
        values {status: 'fulfilled', value: 'ram'}
        values {status: 'fulfilled', value: 100}
        values {status: 'fulfilled', value: true}
        values {status: 'rejected', reason: Error: an error}
*/

In the above code an array of promise objects are passed to Promise.allSettled() function. The then() clause is only executed after all the promises have finished.

globalThis

It represents the global context in the given environment. It is a standardization of the global object across browsers and Node.js i.e now globalThis can be used instead of window object on browsers and instead of global object in Node.js.

console.log(globalThis== global); // true - Node.js
console.log(globalThis == window); // true - browser

In the above code globalThis object when compared with global object and window object returns true as they are same.

Complete Code Listing

// mymath.mjs
export function add(a,b) {
    return a+b;
}


// program.js
// dynamic import 
let mod = './mymath.mjs'
import(mod).then (arg => {
    console.log("module loaded", arg);
}).catch(err => {
    console.log("Error loading module", err);
});

// Promise.allSettled
let prm = [
    Promise.resolve("success"),
    Promise.reject(new Error("Failed"))
];

Promise.allSettled(prm).then (arg => {
    console.log("all settled", arg[0], arg[1]);
});
/* output
all settled {status: 'fulfilled', value: 'success'} {status: 'rejected', reason: Error: Failed}
*/


Promise.allSettled([
    Promise.resolve("ram"),
    new Promise((resolve) => setTimeout(() => resolve(100), 4000)),
    true,
    Promise.reject(new Error("an error")),
  ]).then((values) => {
    for (let ob in values)
    console.log("values", values[ob]);    
  });
  /* 
  output
        values {status: 'fulfilled', value: 'ram'}
        values {status: 'fulfilled', value: 100}
        values {status: 'fulfilled', value: true}
        values {status: 'rejected', reason: Error: an error}
*/

console.log(globalThis== global); // true - Node.js
console.log(globalThis == window); // true - browser