[JS] 09. 현대 JS: 구조분해할당, Spread & Rest

• 주제: 코드의 양을 획기적으로 줄여주는 ES6+ 문법
• 핵심: 객체와 배열에서 필요한 것만 쏙 뽑아 쓰는 법, ... 연산자의 두 얼굴(펼치기 vs 모으기).
• 팁: 리액트의 Props나 State를 다룰 때 필수!

 

세 가지 핵심 문법을 알아보자. 이 문법들은 데이터를 분해하고, 펼치고, 모으는 데 특화되어 있다.

 

1. 구조 분해 할당 (Destructuring Assignment)

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다.

① 배열 구조 분해 할당

배열의 인덱스 순서대로 변수에 할당된다.

JavaScript

 

const colors = ["red", "green", "blue"];

// 기존 방식
// const first = colors[0];
// const second = colors[1];

// 구조 분해 할당
const [first, second, third] = colors;

console.log(first, second, third); // red green blue

② 객체 구조 분해 할당

객체의 키(Key) 이름을 기준으로 할당된다. 순서는 상관없다.

JavaScript

 

const user = {
    name: "SinYoung",
    age: 30,
    job: "Developer"
};

// 필요한 것만 쏙쏙 뽑아오기
const { name, job, sns = "None" } = user; 

console.log(name, job, sns); // SinYoung Developer None (기본값 설정 가능)

// 변수 이름을 바꾸고 싶을 때
const { name: userName } = user;
console.log(userName); // SinYoung

---

2. Spread 연산자 (펼침 연산자)

점 세 개(...)를 사용하여 배열이나 객체 안에 있는 요소들을 하나씩 낱개로 펼치는 역할을 한다.

① 배열에서의 Spread

배열을 복사하거나 합칠 때 유용하다.

JavaScript

 

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2]; 
console.log(combined); // [1, 2, 3, 4, 5, 6]

② 객체에서의 Spread (중요!)

기존 객체를 수정하지 않고 새로운 객체를 만들 때(불변성 유지) 필수이다.

JavaScript

 

const config = { theme: "dark", language: "ko" };
const newConfig = { ...config, font: "Pretendard" };

console.log(newConfig); // { theme: "dark", language: "ko", font: "Pretendard" }

---

3. Rest 매개변수 (나머지 매개변수)

Spread와 똑같이 ...을 쓰지만 역할은 반대이다. 흩어져 있는 여러 개의 인자를 하나의 배열로 모아주는 역할을 한다.

JavaScript

 

function sumAll(...numbers) {
    // numbers는 [1, 2, 3, 4, 5] 배열이 됩니다.
    return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sumAll(1, 2, 3, 4, 5)); // 15

💡 주의: Rest 매개변수는 항상 함수의 마지막 파라미터여야 한다.

---

 

📝 08편 종합 실습 코드 (Chapter09-1.js)

 

실무에서 이 문법들이 어떻게 유기적으로 섞이는지 보여주는 예제코드이다.

JavaScript

 

// [상황: 유저 설정 업데이트 시스템]

const defaultSettings = { theme: "light", fontSize: 14, showSidebar: true };
const userUpdate = { fontSize: 18, showSidebar: false };

// 1. 객체 병합 (Spread)
const finalSettings = { ...defaultSettings, ...userUpdate };

// 2. 특정 값 추출 및 나머지 모으기 (Rest)
const { theme, ...restInfo } = finalSettings;

console.log(`현재 테마: ${theme}`); // light
console.log("기타 설정:", restInfo); // { fontSize: 18, showSidebar: false }

// 3. 함수에서 활용 (Destructuring + Rest)
function displayInfo({ theme, fontSize }, ...tags) {
    console.log(`설정: ${theme}(${fontSize}px)`);
    console.log(`태그 목록: ${tags.join(", ")}`);
}

displayInfo(finalSettings, "Work", "Personal", "Update");