Spread & Rest 연산자 (...)
점 세 개(...)로 이루어진 이 연산자는 사용되는 위치에 따라 "포장지를 뜯어버리거나(Spread)", "남은 것들을 하나의 봉투에 쓸어 담는(Rest)" 상반된 두 가지 역할을 수행합니다.
마법의 점 세 개 (...)
포장지 뜯기
Spread (퍼뜨리기)
[...배열]
배열의 껍질을 부수고 알맹이들만 흩뿌려 새로운 배열을 만듭니다.
하나로 쓸어담기
Rest (나머지 묶기)
function(...나머지)
함수에 남은 파라미터들을 자석처럼 하나의 배열로 싹 쓸어 담습니다.
// 1. Spread 연산자 (배열이나 객체의 포장을 뜯어버림)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
// 과거엔 concat을 썼지만, 이제는 ... 으로 포장을 뜯고 새 배열에 담습니다.
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
// 객체 복사 및 덮어쓰기에도 유용합니다. (불변성 유지)
const baseUser = { name: "민수", age: 28 };
const updatedUser = { ...baseUser, age: 29, city: "서울" };
// { name: "민수", age: 29, city: "서울" }
// 2. Rest 파라미터 (나머지 인자들을 배열로 싹 쓸어담음)
function sum(first, ...rest) {
console.log("첫번째 값:", first); // 10
console.log("나머지 값들:", rest); // [20, 30, 40]
}
sum(10, 20, 30, 40);