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.

const string = "I am learning JavaScript not Java.";
const re = /Java[a-z]*/gi;

let result = string.matchAll(re);

for (match of result) {
  console.log(match);
}

Output

[
  'JavaScript',
  index: 14,
  input: 'I am learning JavaScript not Java.',
  groups: undefined
]
[
  'Java',
  index: 29,
  input: 'I am learning JavaScript not Java.',
  groups: undefined
]

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.

const arr1 = [0, 1, 2, [3, 4]];
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 entries = new Map([
  ['foo', 'bar'],
  ['baz', 42]
]);
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.

trimStart
const greeting = '   Hello world!   ';
console.log(greeting);
// expected output: "   Hello world!   ";
console.log(greeting.trimStart());
// expected output: "Hello world!   ";
trimEnd
const 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.

const symbol = Symbol("this is my description");
console.log(symbol.description) // this is my 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.

Before ES10
try{
//javascript line of code}
catch(error){
//code to handle exception 
}
finally {
  //clean up code
}
Optional Binding ES10
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.

function getMessage(msg) {
    var name = msg;
    // display name to console
    
    console.log(`Hello ${name}`);
}
console.log(getMessage.toString());
Output
function getMessage(msg) {
    var name = msg;
    // display name to console
    
    console.log(`Hello ${name}`);
}

8. Dynamic Imports can be assigned to a variable

element.addEventListener('click', async () => {
    const module = await import(`./api-scripts/button-click.js`);
    module.clickEvent();
});

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⁵³.

typeof 20;
⇨ 'number'
typeof 20n;
⇨ 'bigint'
const limit = Number.MAX_SAFE_INTEGER;
⇨ 9007199254740991
const bigger = 9007199254740992n;
⇨ 9007199254740992n

*Examples derived from MDN documentation*