[JavaScript 심화] Spread & Rest

두 문법은 생김새가 같지만 `...`의 역할이 완전히 다름
`Spread` 연산자 : 값을 '펼치는'역할
`Rest` 매개변수 : 남은 값을 '모아주는' 역할

---

1. `Spread` 연산자 (전개 연산자)

배열이나 객체의 요소를 하나씩 흩뿌려서 복사하거나 합칠 때 사용함

let arr1 = [1, 2, 3];
let arr2 = [4, ...arr1, 5, 6]; // ...arr1이 Spread 연산자

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

• 배열 합치기 / 복사할 때 유용함

let arr3 = [...arr1]; // 얕은 복사 (shallow copy)
console.log(arr3); // [1, 2, 3]

• 객체에서도 사용 가능

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3, d: 4 };

console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

특징

• 기존 객체를 변경하지 않고 새 객체를 생성함
• 기존 속성과 같은 키를 다시 쓰면 덮어쓰기 됨

let obj3 = { a: 1, b: 2 };
let obj4 = { ...obj3, b: 99 };
console.log(obj4); // { a: 1, b: 99 }

---

함수 호출 시 인자 펼치기

function funcA(p1, p2, p3) {
  console.log(p1, p2, p3);
}

funcA(...arr1); // 1 2 3

배열을 인자로 전달할 때 일일이 나열할 필요 없음
-> `funcA(arr1[0], arr1[1], arr1[2])`와 같은 효과

---

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

함수의 매개변수 중 나머지 값들을 하나의 배열로 묶는 문법

function funcB(...rest) {
  console.log(rest);
}

funcB(...arr1); // [1, 2, 3]

설명

• 전달된 인자들을 배열 형태로 모두 받아옴
• `...rest`는 항상 마지막 매개변수에만 올 수 있음

function example(one, ...rest) {
  console.log(one);  // 첫 번째 인자
  console.log(rest); // 나머지 인자들 배열로
}

example(1, 2, 3, 4);
// 1
// [2, 3, 4]