🧬
객체 · 배열
중급 · 선수: 08_문자열
09. 구조분해와 스프레드
객체에서 키 이름과 같은 이름의 변수에 값을 한 번에 꺼냅니다.
구조 분해스프레드레스트ES6
소요 시간
⏱ 약 1시간
난이도
📊 중급
선수 조건
🎯 단원 8
결과물
객체에서 키 이름과 같은 이름의 변수에 값을 한 번에 꺼냅니다.
이 강의에서 배우는 것
- 1객체와 배열에서 필요한 값만 변수로 꺼낼 수 있다.
- 2기본값과 별칭(rename)을 사용할 수 있다.
- 3rest(`...`) 로 나머지를 묶는다.
- 4spread(`...`) 로 펼쳐서 합치거나 복사한다.
- 5함수 매개변수에서 구조 분해를 활용한다.
소개
객체에서 키 이름과 같은 이름의 변수에 값을 한 번에 꺼냅니다.
핵심 개념
1. 객체 구조 분해
객체에서 키 이름과 같은 이름의 변수에 값을 한 번에 꺼냅니다.
javascript
const user = { id: 1, name: "민지", age: 21 };
const { name, age } = user;
const { id: userId } = user; // 별칭
const { email = "none" } = user; // 기본값2. 배열 구조 분해
배열은 위치 기반으로 꺼냅니다.
javascript
const [a, b, c] = [10, 20, 30];
const [first, , third] = [1, 2, 3]; // 두번째 생략
const [x = 0, y = 0] = [5]; // y = 03. rest 매개변수
나머지를 배열/객체로 모읍니다.
javascript
const [head, ...tail] = [1, 2, 3, 4]; // head=1, tail=[2,3,4]
const { name, ...rest } = user; // rest 는 name 제외 모두
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}4. spread
배열/객체를 펼쳐 결합하거나 얕은 복사합니다.
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 }객체 spread 에서 같은 키가 있으면 뒤쪽이 이깁니다.
핵심 예제
| 파일 | 다루는 내용 |
|---|---|
| `01_object_destructure.js` | 객체 구조 분해 + 기본값 |
| `02_array_destructure.js` | 배열 구조 분해 + 스왑 |
| `03_rest.js` | rest 매개변수 |
| `04_spread.js` | 배열/객체 spread |
src/01_object_destructure.js
javascript
/**
* 객체 구조 분해
*/
"use strict";
const user = { id: 1, name: "윤", 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
/**
* 배열 구조 분해
*/
"use strict";
const [a, b, c] = [10, 20, 30];
console.log(a, b, c);
// 스왑
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 매개변수와 rest 분해
*/
"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
/**
* spread 연산자
*/
"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 }
// 얕은 복사
const copy = [...a];
copy.push(999);
console.log("original =", a, "copy =", copy);
자주 하는 실수
- `const { name, age } = undefined` → TypeError. 기본값으로 `= {}` 처리.
- spread 는 **얕은 복사** 임을 잊는다 (중첩 객체는 참조 공유).
- rest 는 항상 마지막에 와야 한다.
- 객체 분해 시 별칭 문법 `key: alias` 를 type 표기로 오해.
- 배열 분해에서 위치를 잘못 세어 변수가 어긋난다.
FAQ
Q1. spread 와 Object.assign 차이?
결과는 거의 같지만 spread 가 더 간결하고 새 객체를 반환합니다.
Q2. 배열 깊은 복사는?
`structuredClone(arr)` 또는 JSON 우회를 사용합니다.
Q3. 함수 인자로 구조 분해는 언제 좋나요?
옵션 객체가 많을 때 가독성이 좋아집니다.
과제
- `homework_01.js` — 사용자 객체에서 필요한 필드를 구조 분해로 추출하세요.
- `homework_02.js` — 두 객체를 spread 로 병합하고 충돌 키는 두 번째가 이기게 하세요.
homework/README.md
## homework_01.js 다음 사용자 객체에서 `name`, `age` 를 추출하고 `email` 은 기본값 `"none"` 으로 받으세요. 결과를 출력하세요.
text
{ id: 7, name: "지수", age: 27 }## homework_02.js 두 객체를 spread 로 병합하는 `merge(a, b)` 를 작성하세요. 같은 키가 있으면 `b` 가 우선합니다.
homework/answer/homework_01.js
javascript
/**
* 과제 1: 구조 분해 + 기본값
*/
"use strict";
const user = { id: 7, name: "지수", age: 27 };
const { name, age, email = "none" } = user;
console.log(name, age, email);
homework/answer/homework_02.js
javascript
/**
* 과제 2: 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 }
다음 단원
[10_화살표함수](../../03_함수형_ES6/10_화살표함수/) — ES6 함수 표현.