JavaScript ES11 (2020)

JavaScript ES11, also known as ECMAScript 2020, introduced several features that improve readability, performance, and developer productivity. These additions are useful when working with complex data structures, asynchronous functions, and optional chaining.

This tutorial covers:

1. ES11 feature overview
2. Key ES11 features with examples
3. A real-world code model project using ES11

---

🔍 ES11: What’s New?

Major features in ES11 (2020):

• Optional Chaining (?.)
• Nullish Coalescing Operator (??)
• Dynamic import()
• BigInt
• Promise.allSettled()
• globalThis
• matchAll() for RegExp

Let’s dive into each.

---

1. 🔗 Optional Chaining (?.)

Optional chaining lets you safely access nested properties without causing errors if an intermediate value is null or undefined.

🧪 Example:

javascriptCopyEditconst user = { profile: { name: "Alice" } };
console.log(user.profile?.name);      // "Alice"
console.log(user.settings?.theme);    // undefined (no error!)

---

2. 🧐 Nullish Coalescing Operator (??)

Returns the right-hand value only if the left-hand is null or undefined.

🧪 Example:

javascriptCopyEditconst name = null;
console.log(name ?? "Guest"); // "Guest"

Unlike ||, it does not treat 0, '', or false as fallback cases.

---

3. 📦 Dynamic import()

You can now dynamically import modules at runtime using import().

🧪 Example:

javascriptCopyEditimport("./math.js").then(module => {
  console.log(module.add(2, 3));
});

This enables lazy loading — loading code only when it’s needed.

---

4. 🔢 BigInt

Handles numbers larger than Number.MAX_SAFE_INTEGER.

🧪 Example:

javascriptCopyEditconst big = 9007199254740991n + 1n;
console.log(big); // 9007199254740992n

Add n at the end of the number to define a BigInt.

---

5. 🔄 Promise.allSettled()

Waits for all promises to settle (resolve or reject) and returns their outcomes.

🧪 Example:

javascriptCopyEditconst p1 = Promise.resolve("A");
const p2 = Promise.reject("B");
const p3 = Promise.resolve("C");

Promise.allSettled([p1, p2, p3]).then(results => console.log(results));

This is useful when you want all results regardless of failure.

---

6. 🌍 globalThis

A universal global object that works across browsers, Node.js, and workers.

javascriptCopyEditglobalThis.setTimeout(() => console.log("Runs globally"), 1000);

---

7. 🔍 matchAll() for RegExp

Returns an iterator of all matched groups, not just the first one.

🧪 Example:

javascriptCopyEditconst text = "Email: test@example.com, contact@example.org";
const regex = /\b(\w+@\w+\.\w+)\b/g;

for (const match of text.matchAll(regex)) {
  console.log(match[1]); // test@example.com, contact@example.org
}

---

🛠 Code Model: User Profile Checker

🎯 Objective:

Build a script that:

• Handles deeply nested object access
• Uses ?? for default values
• Collects multiple API results (some may fail)
• Uses matchAll() to find all emails in a string

---

✅ ES11 Code Model:

javascriptCopyEditconst user = {
  profile: {
    name: "Alice",
    contact: {
      email: "alice@example.com",
    },
  },
};

// Optional chaining and nullish coalescing
const theme = user.settings?.theme ?? "light";
console.log("Theme:", theme); // "light" as fallback

// Fake API promises
const p1 = Promise.resolve({ status: "ok" });
const p2 = Promise.reject("Error loading");
const p3 = Promise.resolve({ status: "ok" });

Promise.allSettled([p1, p2, p3]).then(results => {
  results.forEach((res, i) => {
    if (res.status === "fulfilled") {
      console.log(`API ${i + 1} succeeded:`, res.value);
    } else {
      console.log(`API ${i + 1} failed:`, res.reason);
    }
  });
});

// Email extractor using matchAll
const message = "Please contact us at info@site.com or support@help.org.";
const emailRegex = /\b([\w.%+-]+@[\w.-]+\.\w+)\b/g;

const emails = [...message.matchAll(emailRegex)].map(match => match[1]);
console.log("Extracted emails:", emails);

---

🖥 Output:

cssCopyEditTheme: light
API 1 succeeded: { status: 'ok' }
API 2 failed: Error loading
API 3 succeeded: { status: 'ok' }
Extracted emails: [ 'info@site.com', 'support@help.org' ]

---

🧠 Summary Table

Feature	Description	Example
?.	Optional chaining for safe property access	obj?.prop?.nested
??	Nullish coalescing (not '', 0, false)	input ?? "default"
Promise.allSettled()	Wait for all promises to settle	[...].allSettled().then(...)
BigInt	Large integers beyond safe range	123456789123456789n
import()	Dynamically load modules	import('./file.js')
globalThis	Cross-platform global object	globalThis.setTimeout(...)
matchAll()	Match all RegExp groups	str.matchAll(regex)

---

✅ Conclusion

ES11 (2020) focused on developer convenience, particularly around error-safe property access, working with async results, and processing structured data. These features are widely supported in modern environments and are incredibly helpful in real-world applications.

Whether you’re building a form handler, API consumer, or utility script — mastering these tools will help you write smarter and more resilient JavaScript.