ECMAScript 2018 (ES9)

Welcome to TheCodingCollege.com! ECMAScript 2018 (ES9) introduced several exciting updates that improve code readability, enhance performance, and make JavaScript more developer-friendly. These changes focus on asynchronous programming, object manipulation, and improved regular expressions.

In this article, we’ll cover:

  1. Key features of ES9.
  2. Practical examples of its new capabilities.
  3. How these changes impact modern JavaScript development.

Key Features of ECMAScript 2018

  1. Asynchronous Iteration (for-await-of)
  2. Rest/Spread Properties for Objects
  3. Regular Expression Enhancements
  4. Promise.prototype.finally()

1. Asynchronous Iteration (for-await-of)

With ES9, you can now iterate over asynchronous data sources using the for-await-of loop. This makes working with streams or other asynchronous data sources much easier.

Example:

async function fetchData(urls) {
  const responses = [];
  for await (const url of urls) {
    const response = await fetch(url);
    responses.push(await response.json());
  }
  return responses;
}

const urls = ["https://api.example.com/data1", "https://api.example.com/data2"];
fetchData(urls).then((data) => console.log(data));

Why It Matters:

  • Streamlines asynchronous data processing.
  • Eliminates complex Promise chains or nested loops.

2. Rest/Spread Properties for Objects

ES9 extends the use of the spread operator (...) to objects, enabling easier manipulation of object properties.

Rest Properties (...): Extract specific properties from an object.

const user = { name: "Alice", age: 25, city: "New York" };
const { name, ...rest } = user;

console.log(name); // "Alice"
console.log(rest); // { age: 25, city: "New York" }

Spread Properties (...): Combine or clone objects.

const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, city: "New York" };

console.log(updatedUser); 
// { name: "Alice", age: 25, city: "New York" }

Benefits:

  • Simplifies object manipulation.
  • Reduces boilerplate code for copying or merging objects.

3. Regular Expression Enhancements

ES9 introduced several improvements to regular expressions, making them more powerful and easier to use:

Named Capture Groups: Label groups in regex for better readability.

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2024-12-04");

console.log(match.groups); 
// { year: "2024", month: "12", day: "04" }

Lookbehind Assertions: Match patterns that precede a certain substring.

const lookbehind = /(?<=\$)\d+/;
console.log("$100".match(lookbehind)); // ["100"]

Dot-All Mode (s flag): Match newline characters with ..

const text = "Line1\nLine2";
const regex = /Line1.Line2/s;
console.log(regex.test(text)); // true

4. Promise.prototype.finally()

The finally() method lets you execute cleanup code after a Promise is settled, regardless of whether it was resolved or rejected.

Example:

fetch("https://api.example.com/data")
  .then((response) => response.json())
  .catch((error) => console.error("Error:", error))
  .finally(() => console.log("Fetch attempt complete."));

Why Use finally()?

  • Ensures cleanup code runs no matter the outcome.
  • Reduces code duplication for cleanup tasks.

Why Upgrade to ECMAScript 2018?

  1. Simplified Asynchronous Workflows: Features like for-await-of make it easier to handle asynchronous operations.
  2. Improved Code Readability: Enhancements like named capture groups and the spread operator improve clarity and reduce complexity.
  3. Modern Developer Tools: ES9 focuses on real-world use cases, making JavaScript more powerful and intuitive.

Learn ECMAScript 2018 with TheCodingCollege.com

At TheCodingCollege.com, we provide detailed tutorials to help developers stay updated with JavaScript’s evolution. Whether you’re just getting started or refining your skills, our content is tailored to make learning easy and practical.

Conclusion

ECMAScript 2018 brought several valuable updates to JavaScript, from asynchronous iteration to improved regular expressions. These features simplify code, enhance readability, and improve performance.

Leave a Comment