JavaScript ES9 (2018)

JavaScript ES9, also known as ECMAScript 2018, brought enhancements that improved working with objects, asynchronous operations, and more expressive code. While ES9 didn’t introduce as many features as ES6, it still delivered some important tools that simplify modern development.

In this tutorial, you’ll learn:

1. Overview of ES9 (2018)
2. Key ES9 features with examples
3. A real-world code model using ES9

---

🔍 What’s New in ES9 (2018)?

The most notable ES9 features include:

• Rest/Spread properties for objects
• Asynchronous iteration (for await...of)
• Promise finally()
• RegExp enhancements

---

1. 🧩 Rest and Spread Properties for Objects

ES6 introduced rest/spread operators for arrays. ES9 extended this capability to objects.

✅ Spread in Objects:

Allows copying properties into a new object.

javascriptCopyEditconst user = { name: "Alice", age: 25 };
const clone = { ...user };
console.log(clone); // { name: "Alice", age: 25 }

✅ Rest in Objects:

Allows extracting some properties and storing the rest.

javascriptCopyEditconst { name, ...other } = user;
console.log(name);  // Alice
console.log(other); // { age: 25 }

---

2. 🔄 Asynchronous Iteration (for await...of)

You can now loop over async iterables with for await...of, making it easier to work with streams or sequences of async data.

javascriptCopyEditasync function fetchItems() {
  const items = ["apple", "banana", "cherry"];
  for await (const item of items) {
    console.log(item);
  }
}
fetchItems();

Note: The items must be returned from an async iterable, such as a function that returns Promises.

---

3. ⏳ Promise.prototype.finally()

The .finally() method runs a block of code after a Promise is settled — whether it’s resolved or rejected.

🧾 Example:

javascriptCopyEditfetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log("Success:", data))
  .catch(error => console.error("Error:", error))
  .finally(() => console.log("Finished fetching"));

This ensures cleanup logic (like hiding a loader) runs in every case.

---

4. 🧪 RegExp Enhancements

New RegExp features improve performance and functionality.

– s (dotAll) flag:

Allows . to match newline characters.

javascriptCopyEditconst regex = /hello.world/s;
console.log(regex.test("hello\nworld")); // true

– Named capture groups:

Easier to reference captured groups by name.

javascriptCopyEditconst dateReg = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = dateReg.exec("2025-05-26");
console.log(result.groups); // { year: "2025", month: "05", day: "26" }

---

🛠 Model Project: Fetch and Format User Data

🎯 Objective:

Create a small app that:

• Fetches user data
• Uses object rest/spread
• Handles cleanup with .finally()
• Uses async iteration (simulated)

---

✅ Code Model:

javascriptCopyEdit// Simulated fetch function returning multiple user names
function getUserNames() {
  const names = ["Alice", "Bob", "Charlie"];
  return names.map(name => Promise.resolve(name));
}

// Async function using for-await-of
async function processUsers() {
  const users = getUserNames();

  try {
    for await (const user of users) {
      // Spread syntax for cloning and adding info
      const userInfo = { ...{ name: user }, role: "student" };
      console.log(userInfo);
    }
  } catch (err) {
    console.error("Error:", err);
  } finally {
    console.log("Finished processing users.");
  }
}

processUsers();

---

🖥 Output:

pgsqlCopyEdit{ name: 'Alice', role: 'student' }
{ name: 'Bob', role: 'student' }
{ name: 'Charlie', role: 'student' }
Finished processing users.

This model demonstrates the combination of several ES9 features:

• Spread operator for objects
• Async iteration
• Promise .finally()

---

🧠 Summary Table

Feature	Description	Example
Object Rest/Spread	Copy and extract properties from objects	{ ...obj }, { ...rest }
for await...of	Loop over async iterables	for await (let x of y)
Promise.prototype.finally	Code to run after Promise settles	.finally(() => {})
RegExp dotAll (s) flag	. matches newlines	/hello.world/s
Named capture groups	Use named groups in regex patterns	/(?<year>\d{4})/

---

✅ Conclusion

ES9 (2018) made JavaScript more elegant and expressive for both synchronous and asynchronous code. With features like Promise.finally, async iteration, and object spread/rest, developers can write code that’s both easier to read and easier to manage.

These improvements help especially when dealing with APIs, data processing, and clean-up logic in apps. The model provided above is a great starting point to explore these features in a real-world context.