TL;DR What’s new in JavaScript — Google I/O’19
The entire talk is available at Google’s developer channel on YouTube
This post is a quick summary of the talk for super busy JavaScript developers.
0. Public and private class fields
Earlier you could write something like
class IncreasingCounter {
constructor() {
this._count = 0;
}
get value() {
console.log('Getting the current value!');
return this._count;
}
increment() {
this._count++;
}
}
// But nothing stops people from reading or messing with the
// `_count` instance property. 😢Enters Private class fields
class IncreasingCounter {
#count = 0; // Private field
get value() {
console.log('Getting the current value!');
return this.#count;
}
increment() {
this.#count++;
}
}const counter = new IncreasingCounter();
counter.#count; // → SyntaxError
counter.#count = 42;
// → SyntaxError
1. Numeric Separators
Make numeric literals more readable by creating a visual separation between groups of digits
//Instead of
let budget = 1000000000000;
// You can write
let readableBudget = 1_000_000_000_000;2. Flatten nested arrays
const array = [1, [2, [3]]]array.flat() // Flattens 1 level [1, 2, [3]]// You can pass any depth to flatten the array till that level
// To keep flattening recursively until the array contains no more nested array
// You can pass Infinityarray.flat(Infinity) // [1, 2, 3]
3. flatMap
Without flatMap
const duplicate = (x) => [x, x][1, 2, 3].map(duplicate) // [[1,1], [2,2], [3,3]]
[1, 2, 3].map(duplicate).flat() // [1, 1, 2, 2, 3, 3]
With flatMap : method first maps each element using a mapping function, then flattens the result into a new array.
[1, 2, 3].flatMap(duplicate) // [1, 1, 2, 2, 3, 3]4. fromEntries
We already had Object.entries
const obj = { x: 42, y: 21}
const entries = Object.entries(obj) // [['x', 42], [y, 21]]// Useful with for of loop
for (const [key, value] of entries) {
console.log(`The value of ${key} is ${value}`)
}
Now you can go back to the object from these entries
const object = Object.fromEntries(entries)Use case #1: When you want to transform the object. Eg. Getting only the keys of length one from the object
const obj = { x: 42, y: 21, abc: 23}
const result = Object.fromEntries(
Object.entries(obj).filter(([key, value]) => key.length === 1)
) // -> { x: 42, y: 21}Use case #2: Convert Map back into an Object
const obj = { x: 42, y: 21, abc: 23}
// To convert Object into Map
const map = new Map(Object.entries(obj))// Now you can convert Map back to an object
const object = Object.fromEntries(map)
5. globalThis
Earlier
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');
};var globals = getGlobal();if (typeof globals.setTimeout !== 'function') {
// no setTimeout in this environment!
}
// But it can break in many cases
Now you can simply use globalThis to get the global this value, which is akin to the global object.
6. stableSort
sort function in javascript doesn’t guarantee stability by its specification.
Now you can use stableSort if your code needs stable sorting.
7. New In Intl (Internationalization API)
# Quick Example:
var rtf1 = new Intl.RelativeTimeFormat('en', { style: 'narrow' })
rtf1.format(-1, 'day')// "1 day ago"Quick Example:
const animals = ['dog', 'cat', 'rat']
const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' })
formatter.format(animals) // dog, cat, and ratIntl.DateTimeFormat.prototype.formatRange: `formatRange(date1, date2)` and `formatRangeToParts(date1, date2)` with `Intl.DateTimeFormat` to enable date range formatting.
