ECMAScript | ES10 | Using javascript in day to day routine

In this part we will go through the ES10 or ECMAScript® 2019 most useful operators in our day to day coding practices.

ES 10 | try-catch, Object.fromEntires, flat, flatMap, dynamic imports

Optional catch binding (try-catch)

The try...catch statement marks a block of statements to try and specifies a response should an exception be thrown. With ES 10 feature one can ignore exception variable binding.

A typical syntax for handling errors with javascript, try-catch looks like this

try {
  try_statements
}
catch (exception_var) {
  catch_statements
}
finally {
  finally_statements
}

The exception_var in above block is referred as exception identifier, which holds the information about what went wrong and from where the error is being triggered.

Prior to ES10 the exception identifier is a required parameter. With the ES10 feature, a developer can use try-catch block without exception identifier. This is a being used when we don’t want to do any operations based on the error raised.

Handling error with / without error identifier

Object.fromEntries

It creates an object or transforms key-value pairs into an object. It only accepts iterables.

Object.fromEntries | to create objects from key-value pair based iterables

The only limitation with the Object.fromEntries() is, if the iterables (array / map, etc.) has multiple fields with the same name, only the last one will be included in the object.

sort

Elements with the same sorting precedence will appear in the same order in the sorted array.

sort script es 10

If we run the above script, the output has retained the same order of elements (after sort is applied) as provided in the input with node 12.13. Whereas when we ran the script on node 10.24.1, we see the movies that are release in 2016 are not retained in same order as the elements provided in the input.

sort — differences by running above script on node 12.13 and node 10.24.1

Previously, V8 used an unstable QuickSort for arrays with more than 10 elements. As of V8 v7.0, V8 uses the stable TimSort algorithm.

Dynamic import

Dynamic import Imports can now be assigned to a variable!

import(moduleSpecifier) returns a promise for the module namespace object of the requested module, which is created after fetching, instantiating, and evaluating all of the module’s dependencies, as well as the module itself.

When a program which is not need on page load / main entry, imports module statically, it slows the loading time and increases the memory allocation too.

const someModule = 'modules/sum.js';
const module = await import(someModule);
// here we do other stuff, with imported module 

If you need to know more explanation have a look at this (MDN | imports).

flat

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

The example for flat() was given along with flatMap() at below example.

flatMap

The flatMap() method returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level. It is identical to a map() followed by a flat() of depth 1, but slightly more efficient than calling those two methods separately. — Mozilla.

flatMap can be used as a way to add and remove items (modify the number of items) during a map .

flatMap

This is equivalent to map.().flat()

globalThis

ES10 added the globalThis object which should be used from now on to access global scope on any platform: The global globalThis property returns the top level global object.

While working with cross-platform, developers need to get the global context using some kind of polyfills or below code snippet.

var getGlobal = function () {
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('unable to locate global object');
};
var globals = getGlobal();
if (typeof globals.setTimeout !== 'function') {
  // no setTimeout in this environment!
}
// source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

With globalThis available, the additional search for the global across environments is not necessary anymore:

if (typeof globalThis.setTimeout !== 'function') {
  // no setTimeout in this environment!
}
// source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis

For additional information refer to following resources

JavaScript | MDN

ECMAScript® 2019 Language Specification