Javascript
ES10 What's New: New Features that Was Shipped with ES10 You Should Know

5c6fe45356c2f
ES6 was shipped into Javascript engine in 2015 with a lot of sugar, arrow functions was the most popular new feature added in ES6. After then ES7, ES8, ES9 followed along and just in 2018 ES10 was rolled out also but still in draft.

Though ES10 features has not yet been implemented in recent browsers since they are still in unstable version, but there is no crime learning these features on time before they get added and be ahead of the curve.

Here, I am going to roll down some of the features added in ES10

BigInt — Arbitrary precision integers

BigInt is the 7th primitive type.

According to MDN guide on Bigint
BigInt is a built-in object that provides a way to represent whole numbers larger than 2⁵³ , which is the largest number JavaScript can reliably represent with the Number primitive.

  BigInt(value);

A BigInt is created by appending n to the end of an integer literal — 10n — or by calling the function BigInt().

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n

const hugeString = BigInt("9007199254740991");
// ↪ 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

It is similar to a Number in some ways, but also differs in a few key matters — it cannot be used with methods in the built-in Math object and cannot be mixed in operations with any instances of Number.

typeof 1n === 'bigint'; // true
typeof BigInt('1') === 'bigint'; // true
typeof Object(1n) === 'object'; // true

Performing mathematical operations on BigInt and Number type will throw an error, hence

const a = 167n * 2 // This will throw an error
/* Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
    at <anonymous>:1:9
*/

A BigInt is not strictly equal to a Number, but it is loosely so.

0n === 0
// ↪ false
0n == 0
// ↪ true

Leading - are allowed but + is not allowed, since you are trying convert Bigint to Number this will throw an error

-100n  // -100n
+100n //Uncaught TypeError: Cannot convert a BigInt value to a number

New String method string.prototype.matchAll()

Performs a regular expression match of the String representing the this value against regexp and returns an iterator. Each iteration result’s value is an Array object containing the results of the match, or null if the String did not match.

// ES5
var str = "Hello, Gulp";
var matches = str.match(/l/g); //Array(3) ["l", "l", "l"]

//ES6 
var str = "Hello, Gulp";
var matches = str.matchAll("l"); //Array(3) ["l", "l", "l"]

Dynamic Import declaration
Imports can now be assigned to a variable

array.forEach(el => {
    const module = await import(`./addClass.js`);
    module.addClass();
});

Array.flat(deep)
This new method can be used for flattening of a multi-dimensional array:

optional deep parameter specifies how deep deep a nested array structure should be flattened. By default it is 1

Example from MDN

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

Array.flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map followed by a flat of depth 1, but flatMap is often quite useful, as merging both into one method is slightly more efficient.
let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// only one level is flattened
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

Object.fromEntries()

The Object.fromEntries() method transforms a list of key-value pairs into an object.

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// expected output: Object { foo: "bar", baz: 42 }

String.trimStart() & String.trimEnd() string methods

If you are a php developer you will understand that php has trim(), rtrim() and ltrim() functions which are used to remove spaces or any selected character from beginning, end or both side of the string, that's what these functions above has come to add in Javascript. We already has the String.trim( ) function which removes space from both side, but with these new methods programmers can now be specific on which side he want to remove the space from

let greeting = "     Space around     ";

greeting.trimEnd();   // "     Space around";

greeting.trimStart(); // "Space around     ";

Optional Catch Binding in Try/Catch

The try...catch statement marks a block of statements to try, and specifies a response, should an exception be thrown.

example:

try {
  nonExistentFunction();
}
catch(error) {
  console.error(error);
  // expected output: ReferenceError: nonExistentFunction is not defined
  // Note - error messages will vary depending on browser
}

In ES10 Catch Error Binding Is Optional

You can now skip error variable:

try {
    JSON.parse(text);
    return true;
}
catch
{
    return false;
}

Standardized globalThis object

The global this was not standardized before ES10.

In production code you would “standardize” it across multiple platforms on your own by writing this monstrosity:

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

But even this didn’t always work. So ES10 added the globalThis object which should be used from now on to access global scope on any platform:

// Access global array constructor
globalThis.Array(0, 1, 2);
⇨ [0, 1, 2]

// Similar to window.v = { flag: true } in <= ES5
globalThis.v = { flag: true };

console.log(globalThis.v);
⇨ { flag: true }

Symbol.description

Earlier there is no identifier that can be use to identify a particular Symbol in JS since no two Symbols are the same.

In ES10, you can now leverage the use of Symbol description

let mySymbol = 'My Symbol';
let symObj = Symbol(mySymbol);

symObj; // Symbol(My Symbol)
String(symObj) === 'Symbol(${mySymbol})`); // true
symObj.description; // "My Symbol"

Hashbang Grammar

AKA the shebang unix users will be familiar with.

It specifies an interpreter (what will execute your JavaScript file?).

ES10 standardizes this. I won’t go into details on this because this is technically not really a language feature. But it basically unifies how JavaScript is executed on the server-side end.

$ ./index.js

Instead of:

$ node index.js

ES10 Classes: private, static & public members

New syntax character # octothorpe (hash tag) is now used to define variables, functions, getters and setters directly inside the class body’s scope… alongside the constructor and class methods.
Here is a rather meaningless example that focuses only on new syntax:

class Raven extends Bird {

#state = { eggs: 10};

// getter
    get #eggs() { 
        return state.eggs;
    }

// setter
    set #eggs(value) {
        this.#state.eggs = value;
    }

#lay() {
        this.#eggs++;
    }

constructor() {
        super();
        this.#lay.bind(this);
    }

#render() {
        /* paint UI */
    }
}

Conclusion & Feedback

ES10 is a new set of features that hasn’t had the chance to be fully explored in a production environment yet. Let me know if you have any corrections, suggestions or any other feedback.

![5c6fe45356c2f](serve/attachment&amp;path=5c6fe45356c2f) **ES6 was shipped into Javascript engine in 2015 with a lot of sugar, arrow functions was the most popular new feature added in ES6. After then ES7, ES8, ES9 followed along and just in 2018 ES10 was rolled out also but still in draft.** Though ES10 features has not yet been implemented in recent browsers since they are still in unstable version, but there is no crime learning these features on time before they get added and be ahead of the curve. Here, I am going to roll down some of the features added in **ES10** BigInt &mdash; Arbitrary precision integers ========================== BigInt is the 7th primitive type. &gt; According to [MDN guide on Bigint](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) BigInt is a built-in object that provides a way to represent whole numbers larger than 2⁵&sup3; , which is the largest number JavaScript can reliably represent with the Number primitive. ```` BigInt(value); ```` A BigInt is created by appending **n** to the end of an integer literal &mdash; 10n &mdash; or by calling the function BigInt(). ```` const theBiggestInt = 9007199254740991n; const alsoHuge = BigInt(9007199254740991); // ↪ 9007199254740991n const hugeString = BigInt(&quot;9007199254740991&quot;); // ↪ 9007199254740991n const hugeHex = BigInt(&quot;0x1fffffffffffff&quot;); // ↪ 9007199254740991n const hugeBin = BigInt(&quot;0b11111111111111111111111111111111111111111111111111111&quot;); // ↪ 9007199254740991n ```` It is similar to a **Number** in some ways, but also differs in a few key matters &mdash; it cannot be used with methods in the built-in **Math object** and cannot be mixed in operations with any instances of **Number**. ```` typeof 1n === &#039;bigint&#039;; // true typeof BigInt(&#039;1&#039;) === &#039;bigint&#039;; // true typeof Object(1n) === &#039;object&#039;; // true ```` Performing mathematical operations on BigInt and Number type will throw an error, hence ```` const a = 167n * 2 // This will throw an error /* Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions at &lt;anonymous&gt;:1:9 */ ```` A BigInt is not strictly equal to a Number, but it is loosely so. ```` 0n === 0 // ↪ false 0n == 0 // ↪ true ```` Leading **-** are allowed but **+** is not allowed, since you are trying convert Bigint to Number this will throw an error ```` -100n // -100n +100n //Uncaught TypeError: Cannot convert a BigInt value to a number ```` New String method string.prototype.matchAll() ================== Performs a regular expression match of the String representing the this value against regexp and returns an iterator. Each iteration result&rsquo;s value is an Array object containing the results of the match, or null if the String did not match. ```` // ES5 var str = &quot;Hello, Gulp&quot;; var matches = str.match(/l/g); //Array(3) [&quot;l&quot;, &quot;l&quot;, &quot;l&quot;] //ES6 var str = &quot;Hello, Gulp&quot;; var matches = str.matchAll(&quot;l&quot;); //Array(3) [&quot;l&quot;, &quot;l&quot;, &quot;l&quot;] ```` Dynamic Import declaration Imports can now be assigned to a variable ```` array.forEach(el =&gt; { const module = await import(`./addClass.js`); module.addClass(); }); ```` Array.flat(deep) This new method can be used for flattening of a multi-dimensional array: &gt;optional **deep** parameter specifies how deep deep a nested array structure should be flattened. By default it is 1 Example from **MDN** ```` var arr1 = [1, 2, [3, 4]]; arr1.flat(); // [1, 2, 3, 4] var arr2 = [1, 2, [3, 4, [5, 6]]]; arr2.flat(); // [1, 2, 3, 4, [5, 6]] var arr3 = [1, 2, [3, 4, [5, 6]]]; arr3.flat(2); // [1, 2, 3, 4, 5, 6] ```` Array.flatMap() =============== The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It is identical to a map followed by a flat of depth 1, but flatMap is often quite useful, as merging both into one method is slightly more efficient. let arr1 = [1, 2, 3, 4]; ```` arr1.map(x =&gt; [x * 2]); // [[2], [4], [6], [8]] arr1.flatMap(x =&gt; [x * 2]); // [2, 4, 6, 8] // only one level is flattened arr1.flatMap(x =&gt; [[x * 2]]); // [[2], [4], [6], [8]] ```` Object.fromEntries() ==================== The Object.fromEntries() method transforms a list of key-value pairs into an object. ```` const entries = new Map([ [&#039;foo&#039;, &#039;bar&#039;], [&#039;baz&#039;, 42] ]); const obj = Object.fromEntries(entries); console.log(obj); // expected output: Object { foo: &quot;bar&quot;, baz: 42 } ```` String.trimStart() &amp; String.trimEnd() string methods ===================================== If you are a php developer you will understand that php has **trim(), rtrim() and ltrim()** functions which are used to remove spaces or any selected character from beginning, end or both side of the string, that&#039;s what these functions above has come to add in Javascript. We already has the **String.trim( )** function which removes space from both side, but with these new methods programmers can now be specific on which side he want to remove the space from ```` let greeting = &quot; Space around &quot;; greeting.trimEnd(); // &quot; Space around&quot;; greeting.trimStart(); // &quot;Space around &quot;; ```` Optional Catch Binding in Try/Catch =================================== The try...catch statement marks a block of statements to try, and specifies a response, should an exception be thrown. **example:** ```` try { nonExistentFunction(); } catch(error) { console.error(error); // expected output: ReferenceError: nonExistentFunction is not defined // Note - error messages will vary depending on browser } ```` ### In ES10 Catch Error Binding Is Optional You can now skip error variable: ```` try { JSON.parse(text); return true; } catch { return false; } ```` Standardized globalThis object ============================== The global this was not standardized before ES10. In production code you would &ldquo;standardize&rdquo; it across multiple platforms on your own by writing this monstrosity: ```` var getGlobal = function () { if (typeof self !== &#039;undefined&#039;) { return self; } if (typeof window !== &#039;undefined&#039;) { return window; } if (typeof global !== &#039;undefined&#039;) { return global; } throw new Error(&#039;unable to locate global object&#039;); }; ```` But even this didn&rsquo;t always work. So ES10 added the globalThis object which should be used from now on to access global scope on any platform: ```` // Access global array constructor globalThis.Array(0, 1, 2); ⇨ [0, 1, 2] // Similar to window.v = { flag: true } in &lt;= ES5 globalThis.v = { flag: true }; console.log(globalThis.v); ⇨ { flag: true } ```` Symbol.description ================== Earlier there is no identifier that can be use to identify a particular Symbol in JS since no two Symbols are the same. In ES10, you can now leverage the use of Symbol description ```` let mySymbol = &#039;My Symbol&#039;; let symObj = Symbol(mySymbol); symObj; // Symbol(My Symbol) String(symObj) === &#039;Symbol(${mySymbol})`); // true symObj.description; // &quot;My Symbol&quot; ```` Hashbang Grammar ================ AKA the shebang unix users will be familiar with. It specifies an interpreter (what will execute your JavaScript file?). ES10 standardizes this. I won&rsquo;t go into details on this because this is technically not really a language feature. But it basically unifies how JavaScript is executed on the server-side end. ```` $ ./index.js ```` Instead of: ```` $ node index.js ```` ES10 Classes: private, static &amp; public members ============================================== New syntax character # octothorpe (hash tag) is now used to define variables, functions, getters and setters directly inside the class body&rsquo;s scope&hellip; alongside the constructor and class methods. Here is a rather meaningless example that focuses only on new syntax: ```` class Raven extends Bird { #state = { eggs: 10}; // getter get #eggs() { return state.eggs; } // setter set #eggs(value) { this.#state.eggs = value; } #lay() { this.#eggs++; } constructor() { super(); this.#lay.bind(this); } #render() { /* paint UI */ } } ```` Conclusion &amp; Feedback ===================== ES10 is a new set of features that hasn&rsquo;t had the chance to be fully explored in a production environment yet. Let me know if you have any corrections, suggestions or any other feedback.
edited Feb 22 at 8:49 pm
0
362
0
2
live preview
enter atleast 10 characters
WARNING: You mentioned %MENTIONS%, but they cannot see this message and will not be notified
Saving...
Saved
With selected deselect posts show selected posts
All posts under this topic will be deleted ?
Pending draft ... Click to resume editing
Discard draft