🎨 전개 연산자(...), 나머지 매개변수, 구조 분해 할당 – 고급 활용 정리

🎨 전개 연산자(...), 나머지 매개변수, 구조 분해 할당 – 고급 활용 정리

ES6에서 도입된 ... 연산자는 문맥에 따라 전개(spread) 또는 나머지(rest)로 동작합니다.
이 글에서는 구조 분해와 결합된 고급 활용, 배열/객체 처리 패턴, 함수 인자 처리 등 실무에서 자주 사용하는 방식으로 정리합니다.

---

1. 전개 연산자 (Spread Operator)

배열이나 객체를 펼쳐서 복사하거나 병합할 때 사용합니다.

// 배열 복사 및 결합
const arr = [1, 2, 3];
const copy = [...arr];             // 복사
const merged = [...arr, 4, 5];     // 결합

// 객체 병합
const base = { a: 1 };
const extended = { ...base, b: 2 }; // { a: 1, b: 2 }

📌 원본을 변경하지 않고 새로운 값 생성 = 불변성 유지

---

2. 나머지 매개변수 (Rest Parameters)

함수의 나머지 인자를 배열로 수집할 때 사용합니다.

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

console.log(sum(1, 2, 3, 4)); // 👉 10

• ...변수명은 항상 마지막 매개변수에만 사용 가능

---

3. 구조 분해 할당 (Destructuring) + 나머지

배열 또는 객체에서 일부만 추출하고 나머지를 분리할 수 있습니다.

// 배열 구조 분해
const [head, ...tail] = [1, 2, 3, 4];
// 👉 head = 1, tail = [2, 3, 4]

// 객체 구조 분해
const { id, ...rest } = { id: 1, name: "Alice", age: 30 };
// 👉 id = 1, rest = { name: "Alice", age: 30 }

---

4. 실전 예제 – React 스타일 props 분리

function MyButton({ label, ...restProps }) {
  return <button {...restProps}>{label}</button>;
}

// 사용
<MyButton label="Save" className="primary" onClick={handleClick} />

👉 label은 컴포넌트에서 직접 사용하고, ...restProps는 하위 요소로 전달

---

5. 함수 인자 커스터마이징

function createLogger(prefix, ...tags) {
  return msg => {
    console.log(`[${prefix}] [${tags.join(",")}] ${msg}`);
  };
}

const log = createLogger("APP", "debug", "v1");
log("Started"); // 👉 [APP] [debug,v1] Started

---

6. 구조 분해 + 기본값 + 별칭

const user = { name: "Bob" };

const {
  name = "Guest",
  age = 0,
  name: displayName = "N/A"
} = user;

• name = "Guest": 기본값
• name: displayName: 별칭 사용

---

7. 객체 배열 필터링과 추출

const users = [
  { id: 1, admin: true },
  { id: 2, admin: false },
  { id: 3, admin: true }
];

const admins = users.filter(({ admin }) => admin);

👉 구조 분해를 인자 위치에서 직접 적용하여 코드 간결화

---

📌 마무리

전개 연산자, 나머지 매개변수, 구조 분해 할당은 단순한 문법을 넘어 함수 설계, 불변성 유지, 선언형 코드 작성에 매우 중요한 도구입니다.
이 패턴들은 특히 React, Redux, Node.js 유틸 구현에서 널리 활용되니 반드시 익숙해지세요.

다음 글에서는 템플릿 리터럴, Symbol, BigInt 같은 특수 타입