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 파라미터 구문은 정해지지 않은 수(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 함수를 위에서 아래의 방식으로 바꿔서 사용하고 싶어서 공부를 하게 되었다.
감사합니다~!