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

Valentin PARSY
Jun 11 · 4 min read

Class fields

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

Private class fields

class MyClass{
#value = 0;
}

String matchAll

// 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

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

Better support for BigInt

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

Array.flat

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

Object.fromEntries()

const myArray = [[ ‘x’, 42 ], [ ‘y’, 50 ]];
Object.fromEntries(myArray);
// → {x: 42, y: 50}
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

Sort is now stable

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

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

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Valentin PARSY

Written by

Javascript enthusiast. Developper at @sfeir. Follow me at @ParsyValentin

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co