[JavaScript - 심화] Spread 연산자와 Rest 매개변수

Spread 연산자란?

Spread라는 단어의 뜻을 살펴보면 '흩뿌리다', '펼치다' 라는 뜻을 갖는다.

Spread 연산자는 객체나 배열에 저장된 여러 개의 값을 개별로 흩뿌려주는 역할을 하는 연산자로 ...의 형태이다.

배열에 사용하는 방법

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

두 개의 배열이 있다고 하자. arr2 배열 사이에 arr1을 넣어 [4, 1, 2, 3, 5, 6]으로 만들고 싶을 때,
아래처럼 만들면 어떤 불편함이 있을까?

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

일단 귀찮기도 하고, arr1 배열에 원소가 추가되거나 삭제되어 배열이 변경되는 경우 arr2도 그에 맞춰 수정해줘야 한다. 즉 인덱스로 배열을 펼치는 방법은 좀 위험한 방법이다. 이럴 때 스프레드 연산자를 이용하면 안전하며 편리하게 배열의 값들을 펼칠 수 있다.

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

즉, 배열의 앞에 ...을 붙여주면 배열의 모든 요소들을 개별로 풀어 헤칠 수 있다.

객체에 사용하는 방법

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

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

마찬가지로 obj1객체의 속성들을 obj2 객체에 풀어 헤쳐놓고 싶다면, Spread 연산자를 모를 때는 아래처럼 했어야 했다.

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

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

이제 Spread 연산자를 아니까 아래처럼 코드를 더 간결하게 수정할 수 있다.

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

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

함수를 호출할 때 Spread 연산자 이용하기

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

funcA(...arr1);

Rest 매개 변수란?

Rest는 나머지라는 뜻을 갖는다. 따라서 Rest 매개변수 는 나머지 매개변수라고 생각하면 된다.
Rest 파라미터(Rest Parameter, 나머지 매개변수)는 매개변수 이름 앞에 세개의 점 ...을 붙여서 정의한 매개변수를 의미한다. Rest 파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받는다.

Spread 연산자처럼 ...을 사용하지만, 매개변수를 정의하는 공간인 소괄호 안에서 사용되면 rest 매개변수로 인식한다. 둘은 엄연히 다르다!!

function foo(...rest) {
  console.log(Array.isArray(rest)); // true
  console.log(rest); // [ 1, 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

함수에 전달된 인수들은 순차적으로 파라미터와 Rest 파라미터에 할당된다.

function foo(param, ...rest) {
  console.log(param); // 1
  console.log(rest);  // [ 2, 3, 4, 5 ]
}

foo(1, 2, 3, 4, 5);

function bar(param1, param2, ...rest) {
  console.log(param1); // 1
  console.log(param2); // 2
  console.log(rest);   // [ 3, 4, 5 ]
}

bar(1, 2, 3, 4, 5);

Rest 파라미터는 이름 그대로 먼저 선언된 파라미터에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담겨 할당된다. 따라서 Rest 파라미터는 반드시 마지막 파라미터여야 한다!! ...rest를 마지막에 두지 않는 경우 SyntaxError가 발생한다.

참고

poiemaweb