ES6+ Features

Introduction

ES6 (ECMAScript 2015) and later versions introduced modern features that make JavaScript:

• More readable
• Less error-prone
• More expressive
• Better for large-scale applications

---

Why ES6 Was Introduced

graph TD A[Old JS Problems] --> B[Global Scope Issues] A --> C[Verbose Syntax] A --> D[Callback Hell] B --> E[let/const] C --> F[Arrow Functions, Destructuring] D --> G[Promises, async/await]

---

let and const

let count = 1;
count = 2;

const appName = "StudyVault";

---

Scope Behavior

• let → block scoped
• const → block scoped + immutable binding

---

Temporal Dead Zone

console.log(a); // error
let a = 10;

---

Template Literals

const name = "Asha";
const msg = `Hello ${name}`;

---

Advanced Usage

const multi = `
Line 1
Line 2
`;

---

Destructuring

Object

const user = { name: "Riya", city: "Pune" };

const { name, city } = user;

---

Renaming + Default

const { name: username, age = 18 } = user;

Array

const [a, b] = [10, 20];

---

Skipping + Rest

const [first, , third, ...rest] = [1, 2, 3, 4, 5];

---

Spread vs Rest

const arr = [1, 2];
const newArr = [...arr, 3]; // spread

function sum(...nums) {
    // rest
    return nums.reduce((a, b) => a + b, 0);
}

---

graph LR A[Spread] --> B[Expand Values] C[Rest] --> D[Collect Values]

---

Default Parameters

function greet(name = "Guest") {
    return `Hello ${name}`;
}

---

Execution Behavior

function test(a = b, b = 2) {}
// error (TDZ)

---

Arrow Functions

const add = (a, b) => a + b;

---

Key Differences

No this binding

Uses lexical this

No arguments object

Use rest instead

Cannot be constructor

Cannot use new

---

this Behavior

const obj = {
    value: 10,
    fn: () => console.log(this.value),
};

obj.fn(); // undefined

---

Enhanced Object Literals

const name = "Asha";

const user = {
    name,
    greet() {
        return `Hi ${this.name}`;
    },
};

---

Modules

// old way
const { add } = require("./math.js");


// export
export function add(a, b) {
    return a + b;
}

// import
import { add } from "./math.js";

---

Types

• Named export
• Default export

export default function () {}

---

graph LR A[Module A] --> B[Exports] B --> C[Module B Imports]

---

Classes

class User {
    constructor(name) {
        this.name = name;
    }

    greet() {
        return `Hi ${this.name}`;
    }
}

---

Promise Helpers

Promise.all([p1, p2]);
Promise.race([p1, p2]);
Promise.allSettled([p1, p2]);

---

Behavior

all

waits for all

race

first resolved/rejected

allSettled

waits all (no fail)

---

Optional Chaining (?.)

user?.profile?.email;

---

Nullish Coalescing (??)

const value = input ?? "default";

---

Difference from ||

0 || "default"; // "default"
0 ?? "default"; // 0

---

ES6 Feature Ecosystem

graph TD A[ES6+] --> B[Syntax] A --> C[Async] A --> D[Modules] B --> E[let const destructuring] C --> F[promises async await] D --> G[import export]

---

Best Practices

1. Use const by default
2. Use destructuring carefully
3. Prefer arrow functions for callbacks
4. Use modules for structure
5. Avoid overusing short syntax

---

Error Handling with Async/Await

try {
    const response = await fetch("/api/data");
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
} catch (error) {
    console.error("Request failed:", error.message);
}