JS LAB
    JS 3.7 · 3부. 데이터 다루기

    구조 분해 할당과 스프레드

    필요한 값만 꺼내고, ... 로 복사하고 병합합니다.

    예상 학습 시간 15분 실행 단추가 있는 예제는 고쳐서 실행해 볼 수 있습니다 난이도 중급
    개념 설명

    꺼내는 것과 펼치는 것

    앞 단원처럼 person.name 을 여러 번 적다 보면 같은 말이 되풀이됩니다. 구조 분해 할당 은 필요한 속성만 한 번에 꺼내 변수로 만듭니다.

    스프레드(...)는 반대로 담겨 있는 것을 펼칩니다. 복사하거나 합칠 때 사용합니다. 2.3 의 나머지 매개 변수와 같은 기호인데 쓰이는 자리가 반대입니다.

    최소 예제 · 편집 가능

    객체에서 꺼내기

    script.js 
    const person = { name: "홍길동", age: 27, city: "서울" };

const { name, age } = person;

console.log(name, age);
    출력
    홍길동 27

    왼쪽의 중괄호는 객체를 만드는 것이 아니라 꺼낼 이름을 적는 자리입니다. 속성 이름과 같은 이름의 변수가 만들어집니다.

    상세 사용법

    이름 바꾸기와 기본값

    script.js 
    const person = { name: "홍길동", age: 27 };

const { name: userName, email = "없음" } = person;

console.log(userName);
console.log(email);
    출력
    홍길동 없음

    name: userName 은 다른 이름으로 받는 것입니다. 기본값은 2.3 과 같은 규칙으로, 속성이 없거나 undefined 일 때만 쓰입니다.

    상세 사용법

    배열에서 꺼내기

    배열은 이름이 없으므로 차례로 받습니다. 대괄호를 씁니다.

    script.js 
    const colors = ["빨강", "파랑", "노랑"];

const [first, second] = colors;
const [head, ...rest] = colors;

console.log(first, second);
console.log(head);
console.log(rest);
    출력
    빨강 파랑 빨강 ["파랑", "노랑"]

    마지막에 ... 를 붙이면 남은 것이 배열로 들어옵니다. 2.3 의 나머지 매개 변수와 같습니다.

    상세 사용법

    스프레드로 복사하고 합치기

    script.js 
    const base = { name: "연필", price: 1000 };

const sale = { ...base, price: 900 };
const merged = { ...base, stock: 5 };

console.log(base);
console.log(sale);
console.log(merged);

const a = [1, 2];
const b = [3, 4];
console.log([...a, ...b]);
    출력
    { name: "연필", price: 1000 } { name: "연필", price: 900 } { name: "연필", price: 1000, stock: 5 } [1, 2, 3, 4]

    같은 속성이 겹치면 뒤에 적은 것이 이깁니다. 원본을 두고 일부만 바꾼 새 객체를 만드는 데 자주 사용합니다.

    상세 사용법

    얕은 복사

    3.5 에서 말한 것을 여기서 확인합니다. 스프레드는 한 겹만 복사합니다. 안에 든 객체는 여전히 같은 것을 가리킵니다.

    script.js 
    const original = {
	name: "연필",
	maker: { company: "문구사" }
};

const copy = { ...original };

copy.name = "공책";
copy.maker.company = "바뀐회사";

console.log(original.name);
console.log(original.maker.company);
    출력
    연필 바뀐회사

    첫 줄은 지켜졌는데 둘째 줄이 바뀌었습니다. maker 는 복사되지 않고 같은 객체를 가리키는 것만 복사되었기 때문입니다. 안쪽까지 복사하려면 안쪽도 따로 펼쳐야 합니다.

    상세 사용법

    매개 변수에서 바로 꺼내기

    script.js 
    function show({ name, price }) {
	console.log(`${name} ${price}원`);
}

show({ name: "공책", price: 2000 });

const products = [
	{ name: "연필", price: 1000 },
	{ name: "지우개", price: 500 }
];

products.forEach(({ name, price }) => console.log(`${name}: ${price}`));
    출력
    공책 2000원 연필: 1000 지우개: 500

    함수 안에서 p.name 을 여러 번 적는 대신 받는 자리에서 한 번에 꺼냅니다. 실제 코드에서 가장 많이 보는 모양입니다.

    흔한 실수

    처음에 자주 걸리는 것

    1. 배열에 중괄호를 씁니다

    객체는 중괄호, 배열은 대괄호입니다. 배열에 중괄호를 쓰면 이름으로 찾으므로 undefined 가 됩니다.

    2. 얕은 복사를 깊은 복사로 압니다

    { ...original } 로 복사했는데 안쪽 객체를 고치면 원본도 바뀝니다. 중첩된 데이터를 다룰 때 가장 자주 겪는 문제입니다.

    3. 없는 속성을 꺼내고 그대로 씁니다

    구조 분해로 꺼낸 값도 없으면 undefined 입니다. 기본값을 적어 두면 안전합니다.

    실습 문제

    직접 해보기

    1. 필요한 것만 꺼내기 난이도 하

    이름·가격·재고를 담은 객체에서 이름과 가격만 꺼내 한 줄로 출력하세요.

    const item = { name: "연필", price: 1000, stock: 3 }; const { name, price } = item; console.log(`${name} ${price}원`);
    2. 값을 바꾼 새 객체 만들기 난이도 중

    상품 객체를 받아 원본을 두고 가격만 10% 깎은 새 객체를 돌려주는 함수를 만드세요.

    펼친 뒤에 바꿀 속성을 다시 적으면 그것이 이깁니다.
    const discount = item => ({ ...item, price: Math.floor(item.price * 0.9) }); const pencil = { name: "연필", price: 1000 }; console.log(discount(pencil)); console.log(pencil);
    요약

    이 단원의 정리

    • 구조 분해는 필요한 속성만 꺼내 변수로 만듭니다. 객체는 중괄호, 배열은 대괄호입니다.
    • 이름: 다른이름 으로 바꿔 받고, = 값 으로 기본값을 둡니다.
    • 스프레드는 담긴 것을 펼칩니다. 복사하거나 합칠 때 사용합니다.
    • 겹치는 속성은 뒤에 적은 것이 이깁니다.
    • 스프레드는 한 겹만 복사합니다. 안쪽 객체는 원본과 같은 것을 가리킵니다.