나머지 매개변수와 전개 구문 — 관용적인 배열과 객체 활용

소개

배열 전개 구문 기초

// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];

const clone = [...a];
const merged = [...a, ...b];

console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);

배열 rest 패턴

// Array rest collects the remaining items
const nums = [10, 20, 30, 40];

const [head, ...tail] = nums;

console.log("head:", head);
console.log("tail:", tail);

객체 전개 구문 기초

// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };

const copy = { ...base };
const merged = { ...base, ...override };

console.log("copy:", copy);
console.log("merged:", merged);

객체 rest 패턴

// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };

const { id, ...publicInfo } = user;

console.log("id:", id);
console.log("publicInfo:", publicInfo);

복사로 변경 방지하기

// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };

// Mutating version (avoid in shared state)
// settings.volume = 6;

// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };

console.log("settings:", settings);
console.log("updated:", updated);

객체 rest 퀴즈

복습