Spread 연산자

Spread 연산자는 ... 을 통해 사용할 수 있다. MDN에서는 아래와 같이 Spread 연산자를 설명한다.

전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시킬 수 있습니다.

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

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

위와 같이 arr을 spread 연산자를 통해서 찍어보면 배열이 아닌 개별적인 요소가 나오는 것을 알 수 있다. 간단히 생각하면 배열이 각각으로 나뉜다고 생각하면 될 것 같다.

const arr = [1, 2, 3, 4, 5];
const a = [...arr];

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

이 코드는 arr을 spread 연산자로 전개한 것을 다시 a의 배열로 넣는 것이다.
즉 const a = [1, 2, 3, 4, 5]와 같이 된다.

이것을 이용하여 array.concat()을 대체 할 수 있다.

const aArr = [1, 2, 3];
const bArr = [4, 5, 6];

// array.concat
console.log(aArr.concat(bArr)); // [ 1, 2, 3, 4, 5, 6 ]

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

이렇게 배열을 전개하는 것이 spread 연산자이다.

Rest 파라미터

Rest 파리미터도 마찬가지로 ...를 통해 사용할 수 있다.

Rest 파라미터 구문은 정해지지 않은 수(an indefinite number, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

Rest 파라미터는 쉽게말해 spread 연산의 반대라고 생각하면 편하다. spread 연산은 배열을 개별적으로 전개하지만 Rest 파라미터는 개별을 배열로 묶어준다.

function func(...param) {
  console.log(param);
}

func(1, 2, 3); // [ 1, 2, 3 ]

Rest 파라미터를 통해 받은 내용을 찍어보면 1,2,3 이라는 개별 요소가 배열로 묶이는 것을 볼 수 있다.

param은 배열이기 때문에 관련 메서드를 사용할 수 있다.

function func(...param) {
  param.forEach((e) => {
    console.log(e);
  });
}

func(1, 2, 3);
/*
1
2
3
*/

위와 같이 Array 관련 메서드를 사용한다.