[JS] Spread 연산자, Rest 파라미터

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, 부정수) 인수를 배열로 나타낼 수 있게 합니다.

마찬가지로 MDN에서 정의한 내용입니다. Spread 연산자보다 더 이해하기 어려웠습니다. 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 관련 메서드를 사용하였습니다.

 

많은 문서를 보면 arguments와 비교 합니다. 저는 써본적이 없어 몰랐지만 arguments객체는 유사배열이라고 합니다. 즉 배열 관련된 메서드를 사용하지 못합니다.