[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 연산자를 사용한쪽이 더 깔끔해 보이는 건 잘 모르겠다.

이렇게 배열을 전개하는 것이 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객체는 유사 배열이라고 한다. 즉 배열 관련된 메서드를 사용하지 못한다고 한다.

log.red(`메세지.\n${err}`);

log.red('메세지.',err);

위의 log.red 함수를 위에서 아래의 방식으로 바꿔서 사용하고 싶어서 공부를 하게 되었다.