JavaScript ES10: Whats New?

Being up to date with the newest updates in JavaScript can be overwhelming since it’s ever changing, but it is important to notice the changes happening and use what you can to your advantage! I am going to rattle through the new features with ES10!

1. String.matchAll()

The JavaScript String matchAll() method returns an iterator of results of matching a string against a regular expression.

Output

2. Array.flat() & Array.flatMap()

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

console.log(arr1.flat());
// expected output: [0, 1, 2, 3, 4]
const arr2 = [0, 1, 2, [[[3, 4]]]];console.log(arr2.flat(2));
// expected output: [0, 1, 2, [3, 4]]

flat.Map is simply mapping an object and then flattening. 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.

3. Object.fromEntries()

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

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

4. trimStart() & trimEnd()

trimStart() will remove the whitespace from the beginning of a string. Alternatively, trimEnd() will remove the whitespace from the end of a string.

console.log(greeting);
// expected output: " Hello world! ";
console.log(greeting.trimStart());
// expected output: "Hello world! ";
trimEndconst greeting = ' Hello world! ';console.log(greeting);
// expected output: " Hello world! ";
console.log(greeting.trimEnd());
// expected output: " Hello world!";

5. Symbol.Description

Get the description of a Symbol object with Symbol.description.

6. Optional Catch Binding

ES10 allows for optional catch binding in try, catch functions. This gives flexibility to use try and catch without error bindings.

try {

} catch {

}

Before, if we did not specify an error variable in our catch we would run into an error, in ES10 it is optional to include.

7. Function.toString()

ES10 improved this feature to now return the source of the function with preserving the comments and blank/new lines.

Outputfunction getMessage(msg) {
var name = msg;
// display name to console

console.log(`Hello ${name}`);
}

8. Dynamic Imports can be assigned to a variable

9. BigInt datatype

Before ES10, JavaScript could not handle numbers greater than 2⁵³ and would revert to MAX_SAFE_INTEGER + (how many over you went). Now with the BigInt datatype you can exceed that 2⁵³.

const limit = Number.MAX_SAFE_INTEGER;
⇨ 9007199254740991
const bigger = 9007199254740992n;
⇨ 9007199254740992n

*Examples derived from MDN documentation*