The 5 most transformative JavaScript features from ES9

JavaScript has come a long way in the past 10 years with brand new feature upgrades in each one.

Let’s look at the 5 most significant features that arrived in ES9; and see the ones you missed.

1. Async generation and iteration

Async generators was a powerful one from ES9.

Just like normal generators but now it pops out the values after asynchronous work like a network request or something:

JavaScript
function* asyncGenerator() { yield new Promise((resolve) => setTimeout(() => resolve('done this βœ…'), 2000) ); yield new Promise((resolve) => setTimeout(() => resolve('done that βœ…'), 3000) ); }

So when we call .next() we’ll get a Promise:

JavaScript
const asyncGen = asyncGenerator(); asyncGen.next().value.then(console.log); asyncGen.next().value.then(console.log);

It’s such a powerful tool for streaming data in web app in a structured + readable manner β€” just look at this function that buffers and streams data for a video-sharing app like YouTube:

JavaScript
async function* streamVideo({ id }) { let endOfVideo = false; const downloadChunk = async (sizeInBytes) => { const response = await fetch( `api.example.com/videos/${id}` ); const { chunk, done } = await response.json(); if (done) endOfVideo = true; return chunk; }; while (!endOfVideo) { const bufferSize = 500 * 1024 * 1024; yield await downloadChunk(bufferSize); } }

And now to consume this generator we’ll use for await of — async iteration:

JavaScript
for await (const chunk of streamVideo({ id: 2341 })) { // process video chunk }

I wonder if the actual YouTube JavaScript code uses generators like this?

2. Rest / spread operator

No doubt you’ve stumbled upon the modern spread syntax somewhere.

A genius way to rapidly and immutable clone arrays:

JavaScript
const colors = ['πŸ”΄', 'πŸ”΅', '🟑']; console.log([...colors, '🟒']); // [ 'πŸ”΄', 'πŸ”΅', '🟑', '🟒' ]

We never had it before ES9, and now it’s all over the place.

Redux is big one:

JavaScript
export default function userState(state = initialUserState, action){ console.log(arr); switch (action.type){ case ADD_ITEM : return { ...state, arr:[...state.arr, action.newItem] } default:return state } }

And it works for objects too:

JavaScript
const info = { name: 'Coding Beauty', site: 'wp.codingbeautydev.com', }; console.log({ ...info, theme: 'πŸ”΅' }); // { name: 'Coding Beauty', // site: 'wp.codingbeautydev.com', // theme: 'πŸ”΅' }

Overrides props:

JavaScript
const langs = { j: 'java', c: 'c++', }; console.log({ ...langs, j: 'javascript ' }); // { j: 'javascript ', c: 'c++' }

This makes it especially great for building upon default values, especially when making a public utility.

Or customizing a default theme like I did with Material UI:

With the spread syntax you can even scoop out an object’s copy without properties you don’t want.

JavaScript
const colors = { Β  yellow: '🟑', Β  blue: 'πŸ”΅', Β  red: 'πŸ”΄', }; const { yellow, ...withoutYellow } = colors; console.log(withoutYellow); // { blue: 'πŸ”΅', red: 'πŸ”΄' }

That’s how you remove properties from an object immutably.

3. String.raw

When I use String.raw I’m saying: Just give me what I give you. Don’t process anything.

Leave those escape characters alone:

JavaScript
// For some weird reason you can use it without brackets // like this πŸ‘‡ const message = String.raw`\n is for newline and \t is for tab`; console.log(message); // \n is for newline and \t is for tab

No more escaping backslashes:

JavaScript
const filePath = 'C:\\Code\\JavaScript\\tests\\index.js'; console.log(`The file path is ${filePath}`); // The file path is C:\Code\JavaScript\tests\index.js

We can write:

JavaScript
const filePath = String.raw`C:\Code\JavaScript\tests\index.js`; console.log(`The file path is ${filePath}`); // The file path is C:\Code\JavaScript\tests\index.js

Perfect for writing regexes with a stupid amount of these backslashes:

Something like this but much worse:

From thisβœ…:

JavaScript
const patternString = 'The (\\w+) is (\\d+)'; const pattern = new RegExp(patternString); const message = 'The number is 100'; console.log(pattern.exec(message)); // ['The number is 100', 'number', '100']

To thisβœ…:

JavaScript
const patternString = String.raw`The (\w+) is (\d+)`; const pattern = new RegExp(patternString); const message = 'The number is 100'; console.log(pattern.exec(message)); // ['The number is 100', 'number', '100']

So “raw” as in unprocessed.

That’s why we have String.raw() but no String.cooked().

4. Sophisticated regex features

And speaking of regexes ES9 didn’t disappoint.

It came fully loaded with state-of-the-art regex features for advanced string searching and replacing.

Look-behind assertions

This was a new feature to make sure that only a certain pattern comes before what you’re searching for:

  • Positive look-behind: Whitelist ?<=pattern
  • Negative look-behind: Blacklist ?<!pattern
JavaScript
const str = "It's just $5, and I have €20 and Β£50"; // Only match number sequence if $ comes first const regexPos = /(?<=\$)\d+/g; console.log(str.match(regexPos)); // ['5'] const regexNeg = /(?<!\$)(\d+)/g; // ['20', '50' ] console.log(str.match(regexNeg));

Named capture groups

Capture groups has always been one of the most invaluable regex features for transforming strings in complex ways.

JavaScript
const str = 'The cat sat on a map'; // $1 -> [a-z] // $2 -> a // $3 -> t // () indicates group str.replace(/([a-z])(a)(t)/g, '$1*$3'); // -> The c*t s*t on a map

So normally the groups go by their relative position in the regex: 1, 2, 3…

But this made understanding and changing those stupidly long regexes much harder.

So ES9 solved this with ?<name> to name capture groups:

JavaScript
const str = 'The cat sat on a map'; // left & right console.log(str.replace(/(?<left>[a-z])(a)(?<right>t)/g, '$<left>*$<right>')); // -> The c*t s*t on a map

You know how when things break in VS Code, you can quickly Alt + Click to go to the exact point where it happened? πŸ‘‡

VS Code uses capture groups to make the filenames clickable and make this rapid navigation possible.

I’d say it’s something like this:

JavaScript
// The stupidly long regex const regex = /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/gi; // βœ… String.raw! const filePoint = String.raw`C:\coding-beauty\coding-beauty-javascript\index.js:3:5`; const extractor = /(?<path>[a-z]:(?:(?:\/|(?:\\?))[\w \.-]+)+):(?<line>\d+):(?<char>\d+)/i; const [path, lineStr, charStr] = filePoint .match(regex)[0] .match(extractor) .slice(1, 4); const line = Number(lineStr); const char = Number(charStr); console.log({ path, line, char }); // Replace all filePoint with <button> tag // <button onclick="navigateWithButtonFilepointInnerText">{filePoint}</button>

5. Promise.finally

Finally we have Promise.finally πŸ˜‰.

You know how finally always run some code whether errors are there or not?

JavaScript
function startBodyBuilding() { if (Math.random() > 0.5) { throw new Error("I'm tired😫"); } console.log('Off to the gym πŸ‘ŸπŸ’ͺ'); } try { startBodyBuilding(); } catch { console.log('Stopped excuseπŸ›‘'); } finally { console.log("I'm going!πŸƒ"); }

So Promise.finally is just like that but for async tasks:

JavaScript
async function startBodyBuilding() { await think(); if (Math.random() > 0.5) { throw new Error("I'm tired😫"); } console.log('Off to the gym πŸ‘ŸπŸ’ͺ'); } startBodyBuilding() .then(() => { console.log('Started βœ…'); }) .catch(() => { console.log('No excuses'); }) .finally(() => { console.log("I'm going!πŸƒ"); });

The biggest pro of Promise.finally() is when you’re chaining lots of Promises:

It also works well with Promise chains:

JavaScript
getFruitApiUrl().then((url) => { return fetch(url) .then((res) => res.json()) .then((data) => { fruits.push(data); }) .catch((err) => { console.error(err); }) .finally(() => { console.log(fruits); }); });

Brought forth by ES9.

Final thoughts

ES9 marked a significant leap forward for JavaScript with several features that have become essential for modern development.

Empowering you to write cleaner code with greater conciseness, expressiveness, and clarity.



11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *