What’s new in JavaScript (Google I/O ‘19)

Every May rings the bell for a new Google I/O conference in Mountain View and this year we had a talk by Mathias Bynens and Sathya Gunasekaran, V8 developers, about what to expect in JavaScript. This is the video of the talk, but if you prefer a quick sum up I’m gonna list everything they were talking about in that talk.

Class fields

Class fields can be declared outside the class’ constructor.

// Old way
class MyClass {
  constructor(){
  this.value = 0;
}
// New way
class MyClass {
  value = 0;
}

Private class fields

A class can now have private fields. To declare one, add a # before its name. If you try accessing a private field outside of the class’ definition, it’ll throw a SyntaxError.

class MyClass{
  #value = 0;
}

String matchAll

The new string.matchAll function will give you the same information as if you applied regex.exec to your string in a loop.

// Old way
while(match = regex.exec(myString)){
  console.log(‘Infos of one match’, match);
}
// New way
for(const match of string.matchAll(regex)){
  console.log(‘Infos of one match’, match);
}

More readable numbers

To improve readability, underscores are now considered correct separators for large numbers.

// Old way 
const large = 1000000000;
// New way
const large = 1_000_000_000;

Better support for BigInt

The function toLocaleString(locale) will transform your number in a readable string according to the specified locale.

12345678901234567890n.toLocaleString(‘en’);
// → ‘12,345,678,901,234,567,890’
12345678901234567890n.toLocaleString(‘de’);
// → ‘12.345.678.901.234.567.890’

Array.flat

Array.flat() flattens your array by one depth level :

const array = [1, [2, [3]]];
array.flat();
// → [1, 2, [3]];

flat() takes a parameter to specify the depth level you want to use. To flatten your array until there is no more nested arrays, use Infinity :

const array = [1, [2, [3]]];
array.flat(Infinity);
// → [1, 2, 3]

Object.fromEntries()

With this function, you can convert an array of entries to an object.

const myArray = [[ ‘x’, 42 ], [ ‘y’, 50 ]];
Object.fromEntries(myArray);
// → {x: 42, y: 50}

This is usefull for example when you combine it with Object.entries and arrays utility functions :

const obj = { x: 42, y: 50, abc: 9001 };
Object.fromEntries(
  Object.entries(obj)
  .filter(([key, value]) => key.length === 1 )
  .map(([key, value]) => [ key, value * 2 ]
);
// → { x: 84, y: 100 }

globalThis

You can acces the global this with the new globalThis variable (no more searching for it depending on your environment).

Sort is now stable

Array.sort was not stable until now, for example this code could give you two different result, for no apparent reason :

const dogs = [
{name: ‘Abby’, rating: 10},
{name: ‘Zoe’, rating: 10},
{name: ‘Rex’, rating: 9},
];
dogs.sort((a, b) => b.rating - a.rating);
// → [
// {name: ‘Abby’, rating: 10},
// {name: ‘Zoe’, rating: 10},
// {name: ‘Rex’, rating: 9},
// ]
// OR
// {name: ‘Zoe’, rating: 10},
// {name: ‘Abby’, rating: 10},
// {name: ‘Rex’, rating: 9},
// ]

Intl

— relativeTimeFromat
This allows to translate time to a human readable string according to the locale you are passing as parameter :

const rtf = new Intl.RelativeTimeFormat(‘en’, {numeric: auto});
rtf.format(-1, ‘day’) // → ‘yesterday’
rtf.format(0, ‘day’) // → ‘today’
rtf.format(0, ‘week’) // → ‘this week’

— listFormat
Same as the previous one but instead of translating times, it translates lists :

const lfEnglish = new Intl.ListFormat(‘en’);
lfEnglish.format([‘Ada’, ‘Grace’]); // → ‘Ada and Grace’
lfEnglish.format([‘Ada’, ‘Ida’, ‘Grace’]); // → ‘Ada, Ida and Grace’
lfEnglish.format([‘Ada’, ‘Grace’], { type: ‘disjunction’ }); // → ‘Ada or Grace’

— dateTimeFormat#formatRange
Same as the previous ones but it translates time ranges :

const start = new Date(startStamp); // → ‘May 7, 2019’
const end = new Date(endStamp); // → ‘May 9, 2019’
const fmt = new Intl.DateTimeFormat(‘en’, {
year : ‘numeric’, 
month: ‘long’,
day: ‘numeric’,
});
const output = fmt.formatRange(start, end); // → ‘May 7-9, 2019’

Soon

— Promise.allSettled and Promise.any
The combinator allSettled will signal when all given promises are settled, meaning they all have either succeded or rejected.
The combinator any will signal when any given promise fullfills, meaning it will reject only if all the promises reject.

— async induced function at top level
Your code will soon be automatically wrapped up in a async function calling itself, in order to be able to call await in your top-level function (without having to put yourself this top-level function inside an async).