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:

const numbers = [1, 2, 3];
const first = numbers[0];
const second = numbers[1];
const third = numbers[2];

New way (ES6):

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:

const [first, , third] = numbers; // Skip second

Object Destructuring - Step by Step

Old way:

const user = { name: 'John', age: 25, email: 'john@example.com' };
const name = user.name;
const age = user.age;

New way (ES6):

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:

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:

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:

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

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

Object Spread

Updating objects:

const user = { name: 'John', age: 25 };
const updated = { ...user, age: 26 };
// { name: 'John', age: 26 }

Adding properties:

const user = { name: 'John' };
const withEmail = { ...user, email: 'john@example.com' };
// { name: 'John', email: 'john@example.com' }

Template Literals: Better Strings

Old way:

const name = 'John';
const message = 'Hello, ' + name + '! How are you?';

New way (ES6):

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:

const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

Arrow Functions: Shorter Syntax

Old way:

const add = function(a, b) {
  return a + b;
};

New way (ES6):

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:

function greet(name) {
  name = name || 'Guest';
  return 'Hello, ' + name;
}

New way (ES6):

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

Real Example: Using All Features

// 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.