CODINGNOW
← Back to JavaScript series
🧬
Objects & Arrays
Intermediate Β· Prerequisite: 08_Strings

09. Destructuring and Spread

Destructuring pulls values out of an object into variables of the same name in one step.

destructuringspreadrestES6
Duration
⏱ ~1 hour
Level
πŸ“Š Intermediate
Prerequisite
🎯 Lecture 8
OUTCOME
Destructuring pulls values out of an object into variables of the same name in one step.

What you'll learn

  • 1Extract just the values you need from objects and arrays.
  • 2Use default values and renaming (aliases).
  • 3Collect the rest with `...`.
  • 4Use `...` (spread) to merge or shallow-copy.
  • 5Apply destructuring in function parameters.

Overview

Destructuring pulls values out of an object into variables of the same name in one step.

Core Concepts

1. Object destructuring

Destructuring pulls values out of an object into variables of the same name in one step.

javascript
const user = { id: 1, name: "Minji", age: 21 };
const { name, age } = user;
const { id: userId } = user;        // rename
const { email = "none" } = user;    // default

2. Array destructuring

Arrays are destructured by position.

javascript
const [a, b, c] = [10, 20, 30];
const [first, , third] = [1, 2, 3]; // skip the second
const [x = 0, y = 0] = [5];          // y = 0

3. Rest parameters

Collect the remaining items into an array or object.

javascript
const [head, ...tail] = [1, 2, 3, 4];  // head=1, tail=[2,3,4]
const { name, ...rest } = user;         // rest contains everything except name

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

4. Spread

Spread expands an array or object β€” useful for merging and shallow copying.

javascript
const a = [1, 2];
const b = [3, 4];
const merged = [...a, ...b];          // [1,2,3,4]

const base = { x: 1, y: 2 };
const extended = { ...base, z: 3 };   // { x:1, y:2, z:3 }

When object spread sees duplicate keys, the rightmost one wins.

Examples

FileWhat it covers
`01_object_destructure.js`Object destructuring with defaults
`02_array_destructure.js`Array destructuring with a swap
`03_rest.js`Rest parameters
`04_spread.js`Array and object spread

src/01_object_destructure.js

javascript
/**
 * Object destructuring
 */
"use strict";

const user = { id: 1, name: "Yoon", age: 30, role: "admin" };

const { name, age } = user;
console.log(name, age);

const { id: userId, role: r } = user;
console.log(userId, r);

const { email = "unknown@example.com" } = user;
console.log("email =", email);

src/02_array_destructure.js

javascript
/**
 * Array destructuring
 */
"use strict";

const [a, b, c] = [10, 20, 30];
console.log(a, b, c);

// Swap
let x = 1;
let y = 2;
[x, y] = [y, x];
console.log("swapped =", x, y);

const [first, , third = 99] = [100, 200];
console.log(first, third);

src/03_rest.js

javascript
/**
 * Rest parameters and rest in destructuring
 */
"use strict";

/**
 * @param {...number} nums
 */
function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

const [head, ...tail] = [1, 2, 3, 4];
console.log("head =", head, "tail =", tail);

const { name, ...others } = { name: "Lee", age: 20, city: "Seoul" };
console.log("name =", name, "others =", others);

src/04_spread.js

javascript
/**
 * The spread operator
 */
"use strict";

const a = [1, 2];
const b = [3, 4];
console.log([...a, ...b]);

const base = { x: 1, y: 2 };
const merged = { ...base, z: 3, x: 99 };
console.log(merged); // { x:99, y:2, z:3 }

// Shallow copy
const copy = [...a];
copy.push(999);
console.log("original =", a, "copy =", copy);

Common Mistakes

  1. `const { name, age } = undefined` β†’ TypeError. Use a default like `= {}`.
  2. Forgetting that spread is **shallow** β€” nested objects are still shared by reference.
  3. Putting `...rest` anywhere but at the end.
  4. Mistaking the `key: alias` rename syntax for a type annotation.
  5. Miscounting positions in array destructuring so variables end up misaligned.

FAQ

Q1. What's the difference between spread and Object.assign?

The result is almost the same, but spread is shorter and returns a fresh object.

Q2. How do I deep-copy an array?

Use `structuredClone(arr)`, or the JSON workaround when appropriate.

Q3. When is parameter destructuring helpful?

When a function takes many options and you want named, self-documenting arguments.

Practice

  • `homework_01.js` β€” Destructure fields out of a user object.
  • `homework_02.js` β€” Merge two objects so that the second one wins on conflicts.

homework/README.md

## homework_01.js β€” Given the user object below, pull out `name` and `age` and take `email` with a default of `"none"`. Print the result.

text
{ id: 7, name: "Jisu", age: 27 }

## homework_02.js β€” Write `merge(a, b)` that spreads both objects. When a key conflicts, `b` wins.

homework/answer/homework_01.js

javascript
/**
 * Homework 1: destructure with defaults
 */
"use strict";

const user = { id: 7, name: "Jisu", age: 27 };
const { name, age, email = "none" } = user;
console.log(name, age, email);

homework/answer/homework_02.js

javascript
/**
 * Homework 2: merge via spread
 */
"use strict";

/**
 * @param {object} a
 * @param {object} b
 */
function merge(a, b) {
  return { ...a, ...b };
}

console.log(merge({ x: 1, y: 2 }, { y: 99, z: 3 })); // { x:1, y:99, z:3 }

Next Lecture

[10_Arrow_Functions](../../03_ν•¨μˆ˜ν˜•_ES6/10_ν™”μ‚΄ν‘œν•¨μˆ˜/) β€” ES6 function syntax.

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub β†—