Destructuring & Spread/Rest

Difficulty: Beginner

Question

Explain destructuring assignment and the spread/rest operator in JavaScript. How are they used in practice?

Answer

Destructuring assignment lets you unpack values from arrays or properties from objects into distinct variables. It provides a clean, readable syntax for extracting data and is used extensively in modern JavaScript and React.

The spread operator (...) expands an iterable (array, object, string) into individual elements. It is used for copying arrays/objects, merging, and passing array elements as function arguments.

The rest parameter (...) collects remaining elements into an array or remaining properties into an object. Despite using the same ... syntax as spread, rest is the opposite operation - it gathers instead of expanding. The distinction depends on context: spread appears in array literals and function calls, rest appears in function parameters and destructuring patterns.

Code examples

Object and Array Destructuring

// Object destructuring with renaming and defaults
const user = { name: 'Alice', age: 25, role: 'dev' };
const { name, age, role, country = 'India' } = user;
console.log(name, age, country);

// Renaming
const { name: userName, role: userRole } = user;
console.log(userName, userRole);

// Array destructuring with skipping
const [first, , third] = [10, 20, 30];
console.log(first, third);

// Swapping variables
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b);

// Nested destructuring
const response = { data: { users: [{ id: 1, name: 'Bob' }] } };
const { data: { users: [{ name: firstUser }] } } = response;
console.log(firstUser);

Destructuring supports defaults, renaming, skipping, nesting, and variable swapping. It mirrors the structure of the data.

Spread Operator

// Array spread - copy and merge
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
console.log(merged);

// Object spread - copy and override
const defaults = { theme: 'light', lang: 'en', fontSize: 14 };
const userPrefs = { theme: 'dark', fontSize: 16 };
const config = { ...defaults, ...userPrefs };
console.log(config);

// Spread is shallow copy
const original = { a: 1, nested: { b: 2 } };
const copy = { ...original };
copy.nested.b = 99;
console.log(original.nested.b); // 99 - shared reference!

// Convert string to array
console.log([...'hello']);

Spread creates shallow copies. Later properties override earlier ones during object merge. Nested objects share references.

Rest Parameters

// Rest in function parameters
function sum(first, ...rest) {
  console.log(`First: ${first}, Rest: [${rest}]`);
  return rest.reduce((a, b) => a + b, first);
}
console.log(sum(1, 2, 3, 4));

// Rest in object destructuring (omit properties)
const user = { id: 1, name: 'Alice', password: 'secret', email: 'a@b.com' };
const { password, ...safeUser } = user;
console.log(safeUser);

// Rest in array destructuring
const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head, tail);

// Practical: React props forwarding pattern
// const { className, ...restProps } = props;
// <div className={className} {...restProps} />

Rest collects remaining items. In objects, it is perfect for removing sensitive fields. In React, it is used for props forwarding.

Key points

• Spread creates a shallow copy - nested objects still share references
• Rest must be the last element in destructuring or parameter lists
• Destructuring works in function parameters: function({ name, age }) {}

Concepts covered

Destructuring, Spread Operator, Rest Parameters, Default Values, Nested Destructuring