ES2019/ES10 Features

Recently, TC39 committee has approved and added few bunch of feature to ECMAScript 2019 Standard, which are ported to major JavaScript engine like V8,SpiderMonkey…

Completed Features:-

• Array.prototype.{flat, flatmap}
• String.prototype.{trimStart,trimEnd, matchAll*}
• Object.fromEntries
• Function.prototype.toString
• Sysmbol.prototype.description
• Optional catch binding
• JSON superset
• well-formed JSON.stringify
• BigInt*
• globalThis*

* - at stage 3

Arrays.prototype.{flat, flatmap}

Two methods has added.

• Array.prototype.flat
• Array.prototype.flatMap

Array.prototype.flat:-

It is originally proposed as Array.prototype.flatten, flattens arrays recursively up to the specified depth, which defaults to 1.

  let data = [
    "alpha",
    "beta",
    ["gamma", "delta", ["epsilon", "zeta", ["eta", "theta", "iota", "kappa"]]]
  ];
  console.log(data.flat());
  //(5) ["alpha", "beta", "gamma", "delta", Array(3)]
  console.log(data.flat(2));
  //(7) ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", Array(4)]
  console.log(data.flat(3));
  //(10) ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa"]
  console.log(data.flat(Infinity));
  //(10) ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa"]

Array.prototype.flatMap:-

Combined flatten and map behaviour for arrays. Flatten the result in to single array.

[1, 2, 3, 4, 5].map(data => [data * 2, data * 3]);
//[[2, 3], [4, 6], [6, 9], [8, 12], [10, 15]]

[1, 2, 3, 4, 5].map(data => [data * 2, data * 3]).flat();
//[2, 3, 4, 6, 6, 9, 8, 12, 10, 15];

[1, 2, 3, 4, 5].flatMap(data => [data * 2, data * 3]);
//[2, 3, 4, 6, 6, 9, 8, 12, 10, 15]

String.prototype.{trimStart,trimEnd, matchAll*}:-

• String.prototype.trimStart()
• String.prototype.trimEnd()
• String.prototype.matchAll()

  let data = " Hacker Rank  ";
  console.log(data.trimStart()); //Hacker Rank
  console.log(data.trimEnd()); //Hacker Rank
  console.log(data.match("a")); //["a", index: 2, input: " Hacker Rank  ", groups: undefined]
  let iterator = data.matchAll("a");
  for (let i of iterator) console.log(i); 
  /*let result;
  do {
    result = iterator.next();
    console.log(result);
  } while (!result.done); */

//["a", index: 2, input: " Hacker Rank  ", groups: undefined]
//["a", index: 9, input: " Hacker Rank  ", groups: undefined]

Function.prototype.toString:-

• If function is written ECMAScript code, then toString should return source code.

  function multiply(a, b) {
    return a * b;
  }
  multiply.toString();
  /*"function multiply(a, b) {
    return a * b;
  }"*/
  let add = new Function("a", "b", "return a+b");
  add.toString();
  /*"function anonymous(a,b
  ) {
  return a+b
  }"*/
  

• For built-in and binding function, it returns NativeFunction string.

  JSON.stringify.toString();
  //"function stringify() { [native code] }"
  

  Object:-

• A new static method Object.fromEntries is added to Object.

• To be specific, it converts array of arrays(Array which has nested arrays in it) in to Object, Let’s see, how is it working.

Object.fromEntries([["one", "alpha"], ["two", "beta"], ["three", "gamma"]]);
//{one: "alpha", two: "beta", three: "gamma"}

Few Questions:-

1. What if, Nested arrays have more than 2 elements in it?

    Object.fromEntries([
      ["one", "alpha", "two", "beta"],
      ["three", "gamma", "delta"]
    ]);
    //{one: "alpha", three: "gamma"}

1. What if, Array inside arrays contains objects?

    Object.fromEntries([
      [{ one: "alpha" }, { two: "beta" }],
      [{ three: "gamma" }, { four: "delta" }]
    ]);
    //{[object Object]: {four: "delta"}}

Symbol:-

• As we know, Symbol is built in datatype for unique identifiers, we can create hidden properties for an object.
• A new property Symbol.prototype.description is added to get description from symbol.

const connectionUrl = Symbol("CONNECTION_URL");
console.log(onnectionUrl.description); //"CONNECTION_URL"

• Examples:- Symbol.iterator, Symbol.asyncIterator,Symbol.match,Symbol.matchAll...

Catch binding:-

If there is no use of exceptions details in catch block, developer can remove catch binding happily. This will remove unused and boilerplate code.

function add(a, b) {
  let result;
  try {
    if (typeof a === "number" && typeof b === "number") result = a + b;
    else result = "Not a valid number!";
  } catch {}
  return result;
}

BigInt:-

A BigInt is created by appending n to the end of the integer or by calling the constructor.

let bnum1 = 10n;
let bnum2 = BigInt(10); //10n
let bnum3 = BigInt(10.5);
//(d8):1: RangeError: The number 10.5 cannot be converted to a BigInt because it is not an integer.
let bnum4 = BigInt("10.5");
//(d8):1: SyntaxError: Cannot convert 10.5 to a BigInt.

• BigInt can’t mix with numbers, but can concat with strings.
• Can’t use decimals.
• parseInt returns number.
• JSON.stringify doesn't support.
• TypedArray BigInt64Array (-263 to 263-1) BigUint64Array (0 to 264-1)

globalThis:

• Accessing global object from browser(window), node(global)...
• globalThis will infer the enviroment and return the global object .

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");
};

Conclusion:-

As we know, ECMAScript standards are used in various programming languages like Microsoft’s JScript, Oracle Nashorn Engine, it is strictly based on the language engine to choose which standard to support. let’s keep an eye on TC39 proposal for latest updates.

Thanks for reading!!!

Please feel free to comment your suggestions.