Level: Intermediate | Player: 08_string

Learning Objectives

Only necessary values can be taken out as variables from objects and arrays.
Default values and aliases (rename) can be used.
Bind the rest with rest(...).
Spread and merge or copy with spread(...).
Use structural decomposition in function parameters.

1. Object structure decomposition

The value is retrieved from the object into a variable with the same name as the key name at once.

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

2. Array decomposition

Arrays are retrieved based on location.

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

3. rest parameters

Collect the rest from as-array/object.

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

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

4. spread

array/object Spread, combine or shallow copy.

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 }

If the object spread has the same key, the latter wins.

Core example

file	Contents covered
`01_object_destructure.js`	object destructuring + default
`02_array_destructure.js`	array destructuring + swap
`03_rest.js`	rest parameters
`04_spread.js`	array/object spread

⚠️ Common Mistakes

const { name, age } = undefined → TypeError. Handles = {} by default.
Forgetting that spread is a shallow copy (nested objects share references).
Rest should always come last.
When disassembling an object, the alias syntax key: alias is misunderstood as a type notation.
In array decomposition, variables are misaligned due to incorrect counting of positions.

❓ Frequently Asked Questions (FAQ)

Q1. Difference between spread and Object.assign? A. The result is almost the same, but spread is more concise and returns a new object.

Q2. Array deep copy? A. Use structuredClone(arr) or JSON bypass.

Q3. When is it good to destructure into function arguments? A. Readability improves when there are many option objects.

Example files

The runnable files used in this lesson. Copy them into your own project and experiment.

src/01_object_destructure.jsJavaScript

/**
 *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 = "[email protected]" } = user;
console.log("email =", email);

src/02_array_destructure.jsJavaScript

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

/**
 *rest parameters and rest decomposition
 */
"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.jsJavaScript

/**
 *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);

Assignment

homework_01.js

Extract name, age from the following user objects, and get email as the default "none". Print the results.

{ id: 7, name: "Jisoo", age: 27 }

homework_02.js

Write merge(a, b) to merge two objects with spread . If the same key exists, b takes precedence.

Show the reference solution

Try the assignment yourself first — comparing your attempt with a working solution is where most of the learning happens.

homework_01.jsJavaScript

/**
 *Challenge 1: Destructuring + Defaults
 */
"use strict";

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

homework_02.jsJavaScript

/**
 *Challenge 2: Spread Merge
 */
"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 }

Destructuring & Spread