[JS] Spread 연산자와 Rest 매개변수 정리

자바스크립트에서 개발을 하다 보면 자주 사용하는 편리한 문법들이 있습니다. 특히 ES6에서 도입된 Spread 연산자와 Rest 매개변수는 현대 웹 개발에서 필수적인 기능 중 하나입니다. 이 둘의 개념과 사용법을 명확히 이해해보겠습니다.

---

1. Spread 연산자(...)

Spread는 말 그대로 '흩뿌리다', '펼치다'라는 뜻입니다. Spread 연산자는 배열이나 객체에 저장된 값들을 개별적인 요소로 펼쳐주는 역할을 합니다.

1-1) 배열에서의 Spread 사용 예시

배열을 결합하거나 특정 요소를 중간에 삽입할 때 매우 유용합니다.

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// arr2 안에 arr1의 요소들을 삽입하고 싶다면?
arr2 = [4, ...arr1, 5, 6];

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

기존 방식과의 비교

// 기존 방식은 번거롭고 유지보수가 어렵습니다.
arr2 = [4, arr1[0], arr1[1], arr1[2], 5, 6];

1-2) 객체에서의 Spread 사용 예시

객체에서도 Spread를 사용하여 프로퍼티를 쉽게 복사하거나 합칠 수 있습니다.

let obj1 = {
    a: 1,
    b: 2,
};

let obj2 = {
    c: 3,
    d: 4,
    ...obj1,
};

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

중복 프로퍼티 주의사항:

let obj3 = { a: 10, ...obj1 }; // obj1의 프로퍼티로 덮어쓰기 됨
console.log(obj3); // { a: 1, b: 2 }

1-3) 함수 호출 시 Spread 사용

함수의 인수를 배열 형태로 넘겨줄 때 Spread 연산자가 매우 유용합니다.

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

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

---

2. Rest 매개변수 (...rest)

Rest 매개변수는 함수가 받을 수 있는 인수의 수가 명확하지 않을 때 사용됩니다. 함수 호출 시 전달된 모든 인수를 하나의 배열로 모아줍니다.

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

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

2-1) Rest 매개변수의 특징

• Rest 매개변수는 항상 매개변수 목록의 마지막에 위치해야 합니다.
• 한 함수당 Rest 매개변수는 하나만 존재할 수 있습니다.
• 변수명은 자유롭게 지정 가능합니다(...args, ...params, 등).

2-2) 앞에 고정된 매개변수와 함께 사용하기

function funcC(first, ...others){
    console.log("첫 번째 요소:", first);
    console.log("나머지 요소:", others);
}

funcC(1, 2, 3, 4, 5);
// 첫 번째 요소: 1
// 나머지 요소: [2, 3, 4, 5]

2-3) 실제 프로젝트 예시

Rest 매개변수는 실제 프로젝트에서 로그를 남길 때 유용하게 사용할 수 있습니다.

function logAll(level, ...messages){
    console.log(`[${level}]`, messages.join(' '));
}

logAll('INFO', '서버가', '정상적으로', '구동되었습니다.');
// [INFO] 서버가 정상적으로 구동되었습니다.

---

3. Spread 연산자 vs Rest 매개변수 정리

• Spread 연산자: 배열이나 객체를 개별 요소로 흩뿌릴 때 사용
• Rest 매개변수: 여러 인수를 하나의 배열로 모을 때 사용

둘 모두 점 세 개(...)를 사용하지만, 사용되는 위치와 용도가 다르다는 점을 꼭 기억해야 합니다.