[JavaScript]rest와 spread 차이

rest 매개변수

rest 매개변수는 모든 요소를 배열로 모은 것이며, 여러 개의 함수 인수를 전달하는 경우 사용됩니다.

function printNumber(one, two, ...rest) {
  console.log(one);
  console.log(two);
  console.log(rest);
}

printNumber(1, 2, 3, 4, 5, 6, 7);

실행 결과

위 예제에서 인수 one은 1을 참조하며 two는 2를 참조하며, 나머지 매개변수인 ...rest는 1과 2 이후에 전달된 모든 인수(3, 4, 5, 6, 7)를 참조합니다.

 

다음은 rest 매개변수를 구조 분해(destructuring)에 사용하는 예제입니다.

let arrNumber = [1, 2, 3, 4, 5];
let [firstNumber, ...restNumber] = arrNumber;

console.log(firstNumber);
console.log(restNumber);

실행 결과

JavaScript의 구조 분해 기능을 사용하여 배열 arrNumber의 첫 번째 요소인 1은 변수 firstNumber에 할당되었으며, 나머지 요소들은 restNumber에 할당되었습니다.

---

Spread 연산자

rest 매개변수는 여러 개의 값을 하나로 압축합니다. Spread 연산자는 rest 매개변수와는 반대로 압축되어 있는 값을 단일 요소로 압축을 푸는 기능을 수행합니다.

function sumFunc(firstParam, secondParam) {
  return firstParam + secondParam;
}

let arrNumber = [10, 20];
let sumValue = sumFunc(...arrNumber);

console.log(sumValue); // 30

위 예제에서 sumFunc() 함수를 호출할 때, Spread 연산자를 사용합니다. 배열 arrNumber는 10과 20 두 개의 요소를 가지고 있으며, Spread 연산자로 배열로 단일 요소로 압축을 해제합니다.

 

코드 let sumVale = sumFunc(...arrNumber);은 다음과 같이 동작됩니다.

let sumValue = sumFunc(10, 20);

 

Spread 연산자는 다음 예제처럼 배열을 다른 배열로 복사하거나 배열에 값을 추가하는 용도로 사용할 수 있습니다.

let arrNumber = [1, 2, 3];

// 배열 복사
let copyArrNumber = [...arrNumber];

// 배열에 값 추가
let addArrNumber = [...arrNumber, 4, 5, 6];

console.log(copyArrNumber);
console.log(addArrNumber);

실행 결과

---

정리

• 함수 매개변수에 점(...)을 사용하는 경우 rest 매개변수입니다.
• rest 매개변수는 나머지 모든 요소들을 배열로 수집합니다.
• 함수 호출에 점(...)을 사용하는 경우 Spread 연산자입니다.
• Spread 연산자는 배열과 같이 반복 가능한 객체를 단일 요소로 압축 해제합니다.