[javascript] 전개 연산자(Spread Operator)

전개 연산자(Spread Operator)

• ... 문법을 사용해 배열, 객체, 문자열 등 반복 가능한(iterable) 값의 요소를 개별적으로 펼쳐서 전달하는 ES6 문법
• 사용위치 : 함수 호출, 배열, 객체 리터럴 등에서 사용

* iterable :  배열, 문자열, 객체 등 반복 가능한 값 또는 펼칠 수 있는 값을의미

const arr = [1, 2, 3];
console.log(...arr);  // 1 2 3

✓ 배열/객체 펼쳐서 낱개로 만듦

---

주요 사용 패턴

배열 복사 (얕은 복사)

• 원본 배열 변경 없이 복사 (얕은 복사)

// [문법]
const 새배열 = [...기존배열];

const original = [1, 2, 3];
const copy = [...original];

console.log(copy); // [1, 2, 3]
console.log(copy === original); // false (다른 참조)

---

배열 병합

• 서로 다른 배열을 병합할 때 사용
• concat 메서드 대신 더 간결하게 배열을 이어 붙일 수 있음.

// [문법]
const 병합배열 = [...배열1, ...배열2];

const a = [1, 2];
const b = [3, 4];
const combined = [...a, ...b];

console.log(combined); // [1, 2, 3, 4]

 

---

문자열을 배열로 변환

• 문자열울 문자 하나하나로 분해해서 배열로 만듦

// [문법]
const 배열 = [...문자열];

const word = 'hello';
const letters = [...word];

console.log(letters); // ['h', 'e', 'l', 'l', 'o']

---

배열 중간 삽입

• 배열 중간에 다른 배열을 삽입하는 데 유용.
• 예를 들어 리스트에 특정 항목을 끼워 넣는 경우에 자주 씀

// [문법]
const 새배열 = [앞값, ...끼워넣을배열, 뒷값];

const base = [2, 3];
const result = [1, ...base, 4]; // [1, 2, 3, 4]

---

객체 복사 (얕은 복사)

• 객체도 전개 연산자를 사용하면 불변성을 유지한 복사가 가능.
• 특히 React에서 상태(state)를 관리할 때 자주 사용됨.

// [문법]
const 새객체 = { ...기존객체 };

const user = {name : 'kim', age:28};
const copy = {...user}

console.log(copy);
console.log(user === copy); // ⇒ false

---

객체 병합 및 속성 덮어쓰기

• 여러 객체를 합쳐 하나의 객체로 만듦
• 나중에 오는 속성이 앞의 속성을 덮어씀

// [문법 - 병합]
const 병합객체 = { ...객체1, ...객체2 };

// [문법 - 덮어쓰기]
const 수정된객체 = { ...원본객체, 바꿀속성: 새로운값 };

const user = {name: 'kim', age:25};
const updated = {...user, age:30};

console.log(updated);// ⇒ { name: 'kim', age: 30 }

---

함수 인자에 배열 펼치기

• 배열을 Math.max나 Math.min처럼 여러 인자를 받는 함수에 전달하려면 전개 연산자로 펼쳐야 함.
• Math.max(nums)는 NaN이 나옴 → Math.max(...nums)가 맞는 방법

// [문법]
함수이름(...배열);

const nums = [10, 30, 5]
console.log(Math.max(...nums)) // ⇒ 30

console.log(...nums) // ⇒ 10 30 5

---

React 상태 업데이트

• React에서 setState는 상태를 덮어쓰기 때문에 전체 객체를 복사한 뒤 일부만 변경해야 함.
• 불변성을 유지하는 것이 핵심.

// [문법]
setState(이전값 => ({ ...이전값, 바꿀속성: 새로운값 }));

const [user, setUser] = useState({ name: 'Kim', age: 20 });

setUser(prev => ({
  ...prev,
  age: prev.age + 1
}));

---

기본 옵션에 사용자 옵션 덮어쓰기

• 기본 설정을 제공하고, 사용자가 덮어쓰도록 할 때 유용.
• 우선순위는 나중에 오는 속성이 이김.

const defaultOptions = { darkMode: false, language: 'en' };
const userOptions = { darkMode: true };
const finalOptions = { ...defaultOptions, ...userOptions };
// { darkMode: true, language: 'en' }

---

배열에서 특정 항목 제거

• 배열은 불변이라 원본을 직접 바꾸지 않음.
• 전개 연산자와 slice를 함께 써서 특정 요소를 제외한 새 배열을 만듦.

// [문법]
const 새배열 = [...원본.slice(0, 제거할인덱스), ...원본.slice(제거할인덱스 + 1)];

const items = [10, 20, 30, 40];
const index = 2;

const newItems = [
  ...items.slice(0, index),
  ...items.slice(index + 1)
]; // [10, 20, 40]

 

---

함수의 가변 인자 전달

• 인자의 개수가 고정되지 않거나 배열로 받은 값을 그대로 전달하고 싶을 때 사용.
• 특히 이벤트 핸들러나 콜백 함수에서 많이 쓰임.

function log(a, b, c) {
  console.log(a, b, c);
}
const values = [1, 2, 3];
log(...values); // 1 2 3