JavaScript · ES2019

ES10 Interactive Hub — ECMAScript 2019

Quality-of-life upgrades: Array.flat/flatMap, Object.fromEntries, optional catch binding, trimStart/trimEnd, stable Array.sort, Symbol.description — many convenience methods for daily coding.

Experience

0 XP

Course completion0%

Array.flat() & flatMap()

Core topic

Medium6 min

💡 Concept summary

flat() flattens nested arrays, flatMap() combines map + a single-level flat in one pass.

🤔 Why do you need this feature?

Before ES10, flattening an array required a clumsy reduce + concat or spread. Especially when a map produces arrays (e.g. splitting sentences into words), the result is a 2D array that needs an extra flat call.

Before (old style)Verbose / clunky

// Before ES10 — manual flatten
var nested = [1, [2, 3], [4, [5, 6]]];
var flat = nested.reduce(function(acc, val) {
    return acc.concat(val);
}, []);
console.log(flat); // [1, 2, 3, 4, [5, 6]] (only 1 level)

// map producing arrays → needs flattening
var sentences = ['hello world', 'goodbye'];
var words = sentences.map(function(s) { return s.split(' '); });
console.log(words); // [['hello','world'], ['goodbye']]

ES10 (Modern)Optimal & recommended

// ES10 — flat() with a depth argument
const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());          // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2));         // [1, 2, 3, 4, 5, 6]
console.log(nested.flat(Infinity));  // flatten infinitely deep

// flatMap — map + single-level flat
const sentences = ['hello world', 'goodbye'];
const words = sentences.flatMap(s => s.split(' '));
console.log(words); // ['hello', 'world', 'goodbye']

Got it down? Try running real code or take the quiz!

ES10 Quick Reference

Quick syntax overview + copy snippets

Array.flat() & flatMap()

flat() flattens nested arrays, flatMap() combines map + a single-level flat in one pass.

const nested = [1, [2, 3], [4, [5, 6]]];
console.log(nested.flat());          // [1, 2, 3, 4, [5, 6]]
console.log(nested.flat(2));         // [1, 2, 3, 4, 5, 6]
...

Object.fromEntries()

The inverse of Object.entries() — converts an array of [key, value] pairs into an object.

const user = { name: 'Lan', age: 25, password: 'secret' };
const safe = Object.fromEntries(
    Object.entries(user).filter(([k]) => k !== 'password')
...

Optional catch binding

Lets you omit the error variable in catch when you do not need it — for more concise code.

function safeParse(str) {
    try {
        return JSON.parse(str);
...

String.trimStart() & trimEnd()

Removes whitespace only at the start or only at the end of a string — complementing the standard ES5 trim().

const str = "  Hello  ";
console.log(`[${str.trimStart()}]`); // [Hello  ]
console.log(`[${str.trimEnd()}]`);   // [  Hello]
...

Stable Array.sort()

ES10 officially requires Array.prototype.sort to be STABLE — elements that are equal (per the comparator) keep their original order of appearance.

const users = [
    { name: "An",   age: 25 },
    { name: "Bình", age: 25 },
...

Symbol.prototype.description

The "description" property lets you read a Symbol's description string directly instead of hacking it via String(sym).slice().

const sym = Symbol("userId");
console.log(sym.description); // 'userId'
const anon = Symbol();
...