Have you heard about New Features In ES – ES10 / ES2019 JavaScript. Chrome 72 has come up with lot brand new features in that one of that is ES10 new features and one of the features I have mentioned in the previous post i.e Native Lazy Loading Chrome New Feature.

array.flat()

let’s first start with the array.flat() method what is exactly does.
array.flat() will flattens the array by given depth. the flat(2) method accepts the parameter as depth to flatten the array.
array.flat(Infinity) : the Infinity flattens array to the last depth of array.
If you have ever use the lodash then you must be familiar with the features _.flatten or _.flattenDepth.

const someNumber = [12,3,3,[33,3,4,55,[34,6,7,9,0]]];
console.log(someNumber.flat()); // Default flat level is 1
// output : [12, 3, 3, 33, 3, 4, 55, Array(5)]
console.log(someNumber.flat(Infinity));
// output : [12, 3, 3, 33, 3, 4, 55, 34, 6, 7, 9, 0]

array.flatMap()

The another thing you can do now to play with array is you can call .flatMap() on them.
As the name only says that it flat and then map method allows us to map through the items in an array and then flatten the map array in just single method.

Example using .map() method

const numbers = [1,2,3,4,5,6];
const alphaNumber = ['one', 'two', 'three', 'four', 'five', 'six'];
const mappedExample = numbers.map((number, index) => [number, alphaNumber[index]]);
console.log(mappedExample);
// output : [[1,'one'], [2,'two'], [3, 'three'], [4,'four'], [5, 'five'], [6, 'six']]

Example using .flatMap() method

const numbers = [1,2,3,4,5,6];
const alphaNumber = ['one', 'two', 'three', 'four', 'five', 'six'];
const mappedAndFlattenedExample = numbers.flatMap((number, index) => [
  number,
  alphaNumber[index]
]);
console.log(mappedAndFlattenedExample);
// output : [1, 'one', 2, 'two', 3, 'three', 4, 'four', 5, 'five', 6, 'six']

So we have an array of nummbers from the above example, also provide a second set of array with the alphabitical number.
let’s stay that we want to merge both arrays so after each number there will be alphabitical number.
To do so we have to map through the numbers array with index and for each of the number, we will return an array merging number and alphabetical number in the same index.
then after if we log this we can see in the console we will get a two-dimensional array of numbers and the alphabetical number.
in other example we have change map() to flatMap(), then we have get one dimensional array of numbers and the alphabetical number.

string.trimStart() / string.trimEnd()

String prototype methods have also got some new updates, now we can trim whitespaces from starting or the ending of the string using string.trimStart() and string.trimEnd() methods.

const description = "     I got some whitespaces :)      ";
console.log(description.trimLeft());
// output :  "I got some whitespaces :)    ";

console.log(description.trimRight());
// output :  "     I got some whitespaces :)";

Object.fromEntries

Javascript object now has a new method names as fromEntries()

const numberNames = [[1,'one'], [2,'two'], [3, 'three'], [4,'four'], [5, 'five'], [6, 'six']];
const numberNamesObject = Object.fromEntries(numberNames);
console.log(numberNamesObject);
// output : {1: "one", 2: "two", 3: "three", 4: "four", 5: "five", 6: "six"}

Now you can take arrays of entries and form an object from it. Previously we had only the Object.entries which was taking an object and was returning an array of [key, value] pairs.

Optional Catch Binding

The other feature it came up with is ability to not to bind the error parameter to the catch clause.

    try {
      throw "Error not bothered about";
    } catch (error) {
      // your Tricky logic..
    }

So incase if you dont need the error parameter you can just avoid it.

    try {
      throw "Error not bothered about";
    } catch {
      // your Tricky logic..
    }

Function toString Revision

In ES6 when toString was invoked on a function it was returning string representation of that perticular function depending on ECMAScript engine.
when it was possible to compiled then it would return the source code. otherwise – a standardized placeholder.
so if toString couldn’t create syntactically valid Javascript code, it would return a string for which eval throws a SyntaxError. It was a requirement so that eval couldn’t parse this string.
Problem with that was that you could never be 100% sure that a future version of ECMAScript won’t make it syntactically valid.
New proposal standardizes the placeholder: a function with body { [native code] }.

For functions defined with Javascript code toString will return their original source code:

    function geekstrick() {
      // Hello, I'm an ordinary function
    }
    console.log(geekstrick.toString());

    // Output :

    // function geekstrick() {
    //     // Hello, I'm an ordinary function
    // }

Built-in function objects, bound function exotic objects and callable objects not defined in Javascript code will return a NativeFunction string.

console.log(isNaN.toString());
// function isNaN() { [native code] }

console.log(Math.pow.toString());
// function pow() { [native code] }

console.log(function foo() {}.bind(null).toString());
// function () { [native code] }