ES10 Features with Simple Examples

ES10 or ECMAScript 2019 was released in the year 2019.This version will go some of the new features that can make your code cleaner syntax and easier to write.

Below is the list of features that have come with ES10 Version

• prototype.(flat, flatmap)
• prototype.(trimStart,trimEnd, matchAll*)
• fromEntries
• prototype.toString
• prototype.description
• Optional catch binding
• JSON superset
• Improvement on Unicode support for JSON.stringify()
• sort now retains order if keys are equal
• BigInt
• globalThis

# Array.Flat() in ES10

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

Example:

let multi = [1,2,3,[4,5,6,[7,8,9,[10,11,12]]]];

multi.flat();               // [1,2,3,4,5,6,Array(4)]

multi.flat().flat();        // [1,2,3,4,5,6,7,8,9,Array(3)]

multi.flat().flat().flat(); // [1,2,3,4,5,6,7,8,9,10,11,12]

multi.flat(Infinity);       // [1,2,3,4,5,6,7,8,9,10,11,12]

# Array.flatMap() in ES10

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array.

Example:

let array = [1, 2, 3, 4, 5,6];

array.map(x => [x, x * 2]);

Output: [Array(2), Array(2), Array(2)]

0: (2)[1, 2]

1: (2)[2, 4]

2: (2)[3, 6]

3: (2)[4, 8]

4: (2)[5, 10]

5: (2)[6,12]

 Array.flatmap(y=> [y,y*2])

Output:

//[1,2,2,4,3,6,4,8,5,10,6,12]

# String.trimStart() & String.trimEnd() in ES10

The trimStart() method removes whitespace from the beginning of a string.

The trimEnd() method removes whitespace from the end of a string.

Example:

let welcome = "     interviewgig     ";

greeting.trimEnd();   // "     interviewgig";

greeting.trimStart(); // "interviewgig     ";

# Object.fromEntries() in ES10

Example:

const users = [['Ricky', 39], ['Leon', 15], ['Jack', 26]];

const usersAge = Object.fromEntries(users);

console.log(usersAge);

 output: outputs: {Ricky: 39, Leon: 15, jack: 26}

# Optional Catch Binding in ES10

Allow developers to use try/catch without creating an unused binding.

Example:

try {

  // some code

  return true;

} catch {

  return false;

}

# Object.fromEntries() in ES10

Example:

const users = [['Ricky', 39], ['Leon', 15], ['Jack', 26]];

const usersAge = Object.fromEntries(users);

console.log(usersAge);

 output: outputs: {Ricky: 39, Leon: 15, jack: 26}

# Function.toString() in ES10

The toString() method returns a string representing the source code of the function.

Example:

function interviewgig() {

      // Hello, This is a interviewgig Website

    }

    console.log(interviewgig.toString());

    // Output :

    // function interviewgig() {

// Hello, This is a interviewgig Website

    // }

# 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

  }"*/

# BigInt

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

Example:

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.

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

};