Destructuring, Spread, and Rest Operators

ES6 introduced destructuring and the spread/rest operators. These syntaxes make it extremely easy to unpack elements from arrays, extract properties from objects, and copy/merge data structures.

1. Destructuring

Destructuring lets you unpack values from arrays or properties from objects into distinct variables.

A. Object Destructuring

Extract values by matching the keys of the object.

const user = { username: "Alice", age: 25, role: "admin" };

// Extracting properties:
const { username, role } = user;
console.log(username, role); // "Alice" "admin"

Custom Variable Names & Defaults

You can rename properties or assign default values in case a key is missing:

const user = { username: "Alice" };

const { username: displayName, location = "Unknown" } = user;
console.log(displayName); // "Alice"
console.log(location);    // "Unknown"

Nested Object Destructuring

const config = { db: { host: "localhost", port: 5432 } };
const { db: { host, port } } = config;
console.log(host, port); // "localhost" 5432

B. Array Destructuring

Extract values based on their position (index) in the array.

const coordinates = [10.5, 20.3, 100.0];

// Extracting by position:
const [x, y] = coordinates; // Third element is ignored
console.log(x, y); // 10.5 20.3

// Skipping elements using empty spaces:
const [lat, , alt] = coordinates;
console.log(lat, alt); // 10.5 100.0

2. The Spread Operator (...)

The Spread operator expands an iterable (like an array or object) into individual elements. It is commonly used to create shallow copies and merge data.

A. Operations on Arrays

• Cloning an array: const copy = [...original]
• Merging arrays: const combined = [...arr1, ...arr2]

const base = [1, 2];
const numbers = [...base, 3, 4]; // [1, 2, 3, 4] (pure copy, base is untouched)

B. Operations on Objects

• Cloning an object: const copy = {...original}
• Merging / Overwriting properties:

const user = { name: "Alice", theme: "light" };
const updatedUser = { ...user, theme: "dark", role: "admin" };
console.log(updatedUser); // { name: "Alice", theme: "dark", role: "admin" }

Warning: The spread operator creates a shallow copy. Nested objects or arrays are still copied by reference, not by value.

3. The Rest Operator (...)

The Rest operator uses the exact same syntax (...) but does the opposite of spread: it collects multiple elements into a single array or object. It is used in function parameter definitions or destructuring.

A. Rest in Arrays

const rgb = [255, 120, 0, 0.5];
const [red, green, ...others] = rgb;
console.log(red);    // 255
console.log(others); // [0, 0.5] (collects the rest of the array)

B. Rest in Objects

const user = { id: 101, email: "a@test.com", password: "encrypted123", age: 30 };
// Separate sensitive info:
const { password, ...publicProfile } = user;
console.log(publicProfile); // { id: 101, email: "a@test.com", age: 30 }

In the next module, we will learn how to interface with the browser document structure using DOM manipulation and events.