Modern ES6+ Features: Modules, Set, Map, Optional Chaining & structuredClone

1. Simple Definition

Modern JavaScript (ES2015 se lekar ES2024+) ne language me aise powerful features introduce kiye hain jo code ko saaf, modular aur crash-proof banate hain. Inme ES Modules (code splitting), Set & Map (high performance unique collections), Optional Chaining (?.) (undefined error killer), aur structuredClone() (perfect deep copy) shamil hain.

2. Real-Life Analogy

3. Why Do We Need It?

Badi real-world applications me agar 10,000 lines of code ek hi single file me ho, toh organize karna namumkin ho jata hai. ES Modules code ko maintainable banate hain. Aur real backend APIs se aane wale messy nested objects ko bina application crash kiye safely read karne ke liye modern operators zaroori hain.

4. Syntax Overview

// 1. ES Modules (Named & Default Export/Import)
// file: utils.js
export const TAX_RATE = 0.18;
export function calculateTax(amount) {
  return amount * TAX_RATE;
}
export default function logger(msg) { console.log("[LOG]:", msg); }

// file: main.js
import logger, { TAX_RATE, calculateTax } from './utils.js';

// 2. Set (Only Unique Values, Zero Duplicates!)
const tags = new Set(["html", "css", "html", "javascript"]);
console.log([...tags]); // ["html", "css", "javascript"] (Duplicate 'html' auto removed)

// 3. Map (Fast Key-Value Pair, Keys can be Any Data Type)
const userRoles = new Map();
const user1 = { id: 1 };
userRoles.set(user1, "Administrator"); // Object itself is a key!
console.log(userRoles.get(user1)); // "Administrator"

// 4. Optional Chaining (?.) & Nullish Coalescing (??)
const apiResponse = { user: { name: "Aman" } };
// Safe read (Crash nahi karega agar address undefined ho)
const city = apiResponse?.user?.address?.city ?? "Default City (Delhi)";
console.log(city); // "Default City (Delhi)"

// 5. Native Deep Cloning with structuredClone()
const original = { id: 1, info: { theme: "dark" }, date: new Date() };
const trueCopy = structuredClone(original);
trueCopy.info.theme = "light";
console.log(original.info.theme); // "dark" (Original bilkul safe raha!)

5. Basic Example: Unique Category Filter from E-Commerce List

const products = [
  { id: 1, title: "Laptop", category: "Electronics" },
  { id: 2, title: "T-Shirt", category: "Fashion" },
  { id: 3, title: "Mouse", category: "Electronics" },
  { id: 4, title: "Jeans", category: "Fashion" },
  { id: 5, title: "Coffee Mug", category: "Home" }
];

// Extract Unique Categories in 1 Line using Set
const uniqueCategories = ["All", ...new Set(products.map(p => p.category))];
console.log(uniqueCategories);
// Output: ["All", "Electronics", "Fashion", "Home"]

6. Output & Interactive Safe-Accessor Simulator

7. Code Explanation: Deep Clone vs Shallow Clone

8. Real-World Example: Safe API Config Fallback

function renderPlayerScore(userSettings) {
  // CRITICAL: ?? vs || difference!
  // Agar score 0 hai, toh 0 ek VALID number hai!
  // || operator 0 ko falsy man kar 100 bana dega (BUG)
  // ?? operator 0 ko preserve karega (CORRECT)
  const score = userSettings?.game?.score ?? 100;
  const isMuted = userSettings?.audio?.muted ?? false;
  
  console.log(`Current Score: ${score}, Audio Muted: ${isMuted}`);
}

renderPlayerScore({ game: { score: 0 } }); // Output: Current Score: 0 (Properly preserved!)

9. Common Mistakes

10. Best Practices

• HTML me module use karte waqt <script type="module" src="app.js"></script> lagana zaroori hai (ye automatic defer behave karta hai).
• Array me se duplicates hatane ke liye [...new Set(array)] sabse fast aur clean pattern hai.
• Deep objects ko clone karte waqt bina kisi external library (jaise Lodash cloneDeep) ke native structuredClone() use karein.

11. Try It Yourself

Playground me const m = new Map(); m.set("count", 1); m.set("count", m.get("count") + 1); console.log(m.get("count")); likh kar word counter test karein.

12. Challenge

Ek Word Frequency Counter banayein: Diye gaye sentence ke sabhi words ko tod kar Map me count karein ki kaunsa word kitni baar aaya hai.

13. Interview Questions

14. Quick Revision

• import / export creates modular, clean codebases.
• Set stores unique values (Instant [...new Set(arr)] dedupe).
• Map allows any key type and preserves insertion order.
• ?. prevents TypeError crashes; ?? handles null/undefined fallbacks safely.
• structuredClone() is browser's built-in true deep copier.

15. FAQ

Modern ES6+ Features: Modules, Set, Map, Optional Chaining & structuredClone

1. Simple Definition

Modern ES6+ Features represent the latest evolutions of ECMAScript that elevate JavaScript into a mature, modular, enterprise-grade language. These include ES Modules (import / export), high-performance data structures (Set and Map), Optional Chaining (?.), and native deep cloning via structuredClone().

2. Real-Life Analogy

3. ES Modules: Export and Import

// 1. In utils.js (Exporting functions)
export const formatCurrency = (amount) => `$${amount.toFixed(2)}`;
export const calculateTax = (amount, rate = 0.18) => amount * rate;

// Default export
export default function logger(msg) {
  console.log(`[APP LOG]: ${msg}`);
}

// 2. In app.js (Importing modules)
import logger, { formatCurrency, calculateTax } from './utils.js';

logger("Computing order totals...");
console.log(formatCurrency(199.5)); // "$199.50"

4. Set & Map Data Structures

// 1. Set: Collection of GUARANTEED UNIQUE values (instant deduplication!)
const tags = ["js", "css", "html", "js", "css"];
const uniqueTags = [...new Set(tags)]; // ["js", "css", "html"]

// 2. Map: Key-value dictionary where KEYS can be ANY type (including objects!)
const userRoles = new Map();
const userObj = { id: 101 };
userRoles.set(userObj, "Administrator");
console.log(userRoles.get(userObj)); // "Administrator"

5. Common Mistakes

6. Best Practices

• Always break large files into single-responsibility ES modules.
• Use Set whenever you need to filter duplicate values or check membership in O(1) time.
• Use Map when keys are dynamically determined or are non-string objects.

7. Practice Exercise

8. Interview Questions

9. Summary / Cheat Card

• ES Modules: import and export clean modular dependencies.
• Set stores unique values; instant array deduplication.
• Map maps arbitrary keys to values.
• structuredClone() creates deep, safe object copies.

10. FAQ