[JavaScript] Spread 연산자(문법)와 Rest 파라미터(매개변수) 정리와 차이점

안녕하세요. 성조입니다.

 

자바스크립트를 사용하면 '...'라는 것을 생각보다 많이 사용하게 됩니다. 다양한 곳에서 사용되는 '...'를 이번 포스팅을 통해 조금 더 정리하고 흡수된 지식으로 만들고자 합니다.

 

혹여나 올바르지 못한 지식을 전달하고 있다면 언제든지 댓글로 피드백 주시면 감사드리겠습니다.

---

Spread 연산자(문법)란?

Spread 연산자로 사용되는 '...'는 배열이나 객체, 문자열과 같은 이터러블한 값을 개별 요소나 속성으로 분해하는 데 사용된다. 이것은 함수 호출 시 인자를 전달하거나 배열, 객체를 합체 또는 복제하는 용도로 사용하기 좋다.

 

[배열 예시]

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

 

[객체 예시]

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

 

[함수 인자 전달 예시]

let arr = [1, 2, 3, 4, 5];

function testNum(a, b, c, d, e) {
  console.log(a, b, c, d, e);
}

foo(...arr); // 출력: 1 2 3 4 5

 

 

Rest 파라미터(매개변수)란?

Rest 파라미터에서 사용되는 '...'는 함수의 매개변수를 처리할 때 사용되며, 함수에 전달된 인자들을 배열로 모아낼 때 Rest를 활용한다.

 

[1번 함수 예시]

function testNum(...args) {
  console.log(args);
}

testNum(1, 2, 3, 4); // 출력: [1, 2, 3, 4]

여러 개의 값을 파라미터(매개변수)로 입력받은 다음 콘솔을 통해 모은 값을 출력하는 방법이다.

 

[2번 함수 예시]

function sum(...args) {
  return args.reduce((previous, current) => {
    return previous + current;
  });
}

console.log(sum(1, 2, 3, 4));  // 출력: 10

이 함수는 여러 숫자를 받아 그 합을 계산하며, 입력받는 숫자의 수를 제한하지 않는다.

위와 같이 Rest 파라미터는 여러 개의 독립적인 인자를 하나의 배열로 결합하는데 활용된다.

 

Spread와 Rest의 차이점.

둘 다 '...' 기호를 사용하지만 용도와 동작 방식에서 차이점이 존재한다.

Spread 연산자는 여러 개를 하나로 분해하는 것이다. [다중 →1,2,3...]

Rest 파라미터는 하나를 여러 개로 묶어내는 것이다. [1,2,3... →다중]

 

- Spread 연산자

배열, 객체, 이터러블 값을 개별 요소로 분해한다.

분해된 요소는 새 배열이나 객체를 생성하거나 함수의 인자로 전달될 수 있다.

 

- Rest 파라미터

 

함수의 매개변수로 사용되며, 전달된 인자들을 하나의 배열로 모아낸다.

 

 

---

오타나 궁금한 부분이 있다면 언제든지 댓글 달아주시면 답변 도와드리겠습니다.

다음 포스팅 때 뵙겠습니다. 감사합니다.