JavaScript · ES2018

ES9 Interactive Hub — ECMAScript 2018

Async iteration + rest/spread for objects, advanced regex (lookbehind, named capture, dotAll) — extending functional patterns to async + upgrading the pattern-matching toolkit.

Experience

0 XP

Course completion0%

Object Rest / Spread

Core topic

Medium6 min

💡 Concept summary

The "..." operator now works on objects — allowing you to clone, merge, and extract properties immutably.

🤔 Why do you need this feature?

ES6 only had spread/rest for arrays. For objects, merging required the verbose Object.assign() and extracting properties had to be done by manual assignment. ES9 unifies the "..." syntax for objects.

Before (old style)Verbose / clunky

// Object merge using Object.assign() in ES6
var user = { name: "Lan", age: 25 };
var updated = Object.assign({}, user, { age: 26 });
console.log(updated); // { name: 'Lan', age: 26 }

// Extracting properties has to be done manually
var name = user.name;
var rest = { age: user.age }; // has to be built by hand

ES9 (Modern)Optimal & recommended

// Object spread in ES9 — clone + merge
const user = { name: "Lan", age: 25 };
const updated = { ...user, age: 26 };
console.log(updated); // { name: 'Lan', age: 26 }

// Object rest — extract properties
const { name, ...rest } = user;
console.log(name); // 'Lan'
console.log(rest); // { age: 25 }

// Merge multiple objects
const defaults = { theme: 'light', lang: 'vi' };
const user2 = { lang: 'en' };
const config = { ...defaults, ...user2 };
console.log(config); // { theme: 'light', lang: 'en' }

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

ES9 Quick Reference

Quick syntax overview + copy snippets

Object Rest / Spread

The "..." operator now works on objects — allowing you to clone, merge, and extract properties immutably.

const user = { name: "Lan", age: 25 };
const updated = { ...user, age: 26 };
console.log(updated); // { name: 'Lan', age: 26 }
...

for await...of

A loop for async iterables — letting you consume an async generator or data stream in a natural way.

async function* readPages(url) {
    let page = 1;
    while (true) {
...

Promise.prototype.finally

A callback that runs after a Promise settles (whether resolved or rejected) — used for cleanup such as turning off loading or closing connections.

setLoading(true);
fetchData()
    .then(data => setData(data))
...

RegExp nâng cao (Lookbehind, Named groups, dotAll)

A trio of regex upgrades: lookbehind (?<=...) / (?<!...), named capture groups (?<name>...), and the /s flag that lets "." match newline characters too.

const text = "Giá: $250 và €180";
const dollars = text.match(/(?<=\$)\d+/g);
console.log(dollars); // ['250']
...