JavaScript ES6+ Features

What is ES6?

ES6 (ECMAScript 2015) added many features that make JavaScript easier to write. These are now standard in modern JavaScript.

Destructuring: Unpacking Values

Destructuring lets you extract values from arrays and objects easily.

### Array Destructuring - Step by Step

**Old way:** ```javascript const numbers = [1, 2, 3]; const first = numbers[0]; const second = numbers[1]; const third = numbers[2]; ```

**New way (ES6):** ```javascript const numbers = [1, 2, 3]; const [first, second, third] = numbers; ```

**What happens:** ``` ┌─────────────┐ │ numbers = │ │ [1, 2, 3] │ └──────┬──────┘ │ │ Destructure │ ┌──────▼──────────────────┐ │ first = 1 │ │ second = 2 │ │ third = 3 │ └─────────────────────────┘ ```

**Skip values:** ```javascript const [first, , third] = numbers; // Skip second ```

### Object Destructuring - Step by Step

**Old way:** ```javascript const user = { name: 'John', age: 25, email: 'john@example.com' }; const name = user.name; const age = user.age; ```

**New way (ES6):** ```javascript const user = { name: 'John', age: 25, email: 'john@example.com' }; const { name, age } = user; ```

**What happens:** ``` ┌─────────────────────┐ │ user = { │ │ name: 'John', │ │ age: 25, │ │ email: '...' │ │ } │ └──────┬──────────────┘ │ │ Destructure │ ┌──────▼──────────────┐ │ name = 'John' │ │ age = 25 │ └────────────────────┘ ```

**Rename while destructuring:** ```javascript const { name: userName, age: userAge } = user; ```

Spread Operator: Expanding Values

The spread operator (`...`) "spreads out" arrays and objects.

### Copying Arrays

**Problem:** Arrays are references, so this doesn't work: ```javascript const arr1 = [1, 2, 3]; const arr2 = arr1; // arr2 points to same array! arr2.push(4); console.log(arr1); // [1, 2, 3, 4] - arr1 changed too! ```

**Solution with spread:** ```javascript const arr1 = [1, 2, 3]; const arr2 = [...arr1]; // Creates new array arr2.push(4); console.log(arr1); // [1, 2, 3] - arr1 unchanged! ```

**How it works:** ``` ┌─────────────┐ │ arr1 = │ │ [1, 2, 3] │ └──────┬──────┘ │ │ ...arr1 spreads it │ ┌──────▼──────────────┐ │ [1, 2, 3] │ │ (new array) │ └─────────────────────┘ ```

### Combining Arrays

```javascript const fruits = ['apple', 'banana']; const vegetables = ['carrot', 'broccoli']; const all = [...fruits, ...vegetables]; // ['apple', 'banana', 'carrot', 'broccoli'] ```

### Object Spread

**Updating objects:** ```javascript const user = { name: 'John', age: 25 }; const updated = { ...user, age: 26 }; // { name: 'John', age: 26 } ```

**Adding properties:** ```javascript const user = { name: 'John' }; const withEmail = { ...user, email: 'john@example.com' }; // { name: 'John', email: 'john@example.com' } ```

Template Literals: Better Strings

**Old way:** ```javascript const name = 'John'; const message = 'Hello, ' + name + '! How are you?'; ```

**New way (ES6):** ```javascript const name = 'John'; const message = `Hello, ${name}! How are you?`; ```

**Benefits:** - Can use variables with `${variable}` - Multi-line strings work naturally - Cleaner and easier to read

**Multi-line example:** ```javascript const html = ` <div> <h1>${title}</h1> <p>${content}</p> </div> `; ```

Arrow Functions: Shorter Syntax

**Old way:** ```javascript const add = function(a, b) { return a + b; }; ```

**New way (ES6):** ```javascript const add = (a, b) => a + b; ```

**When to use:** - Short functions - Callbacks - Array methods

**Important:** Arrow functions don't have their own `this` - they use `this` from the outer scope.

Default Parameters

**Old way:** ```javascript function greet(name) { name = name || 'Guest'; return 'Hello, ' + name; } ```

**New way (ES6):** ```javascript function greet(name = 'Guest') { return `Hello, ${name}`; } ```

Real Example: Using All Features

```javascript // Function with default parameter function createUser({ name, age = 18, email }) { // Object destructuring in parameters return { name, age, email, isAdult: age >= 18 }; }

// Using template literals and spread const user1 = createUser({ name: 'John', email: 'john@example.com' }); const user2 = createUser({ name: 'Sarah', age: 25, email: 'sarah@example.com' });

const allUsers = [...user1, user2]; const message = `Users: ${allUsers.length}`; ```

Quick Reference

**Destructuring:** - Arrays: `const [a, b] = array` - Objects: `const { a, b } = object`

**Spread:** - Arrays: `[...arr1, ...arr2]` - Objects: `{ ...obj1, ...obj2 }`

**Template Literals:** - Use backticks: ``text ${variable}``

**Arrow Functions:** - `(a, b) => a + b`

These features make JavaScript code shorter, cleaner, and easier to read. They're used everywhere in modern JavaScript, so it's important to understand them.