들어가며
이 구문을 사용할 때 보면 막상 손에 익지 않는 느낌이라 포스팅에 주제로 삼게 되었습니다. ES6에 새로 추가된 구문이며 객체나 배열 앞에 …를 붙여 사용합니다. 객체와 배열을 펼쳐(spread) 객체 혹은 배열, (함수일 때는) 인수로 활용합니다. 간단한 예로 펼치다(spread) 의미를 확인할 수 있습니다.
const array1 = [1, 3, 5];
const array2 = [2, ...array1, 6];
console.log(array2);
// 1번 [2, [1, 3, 5], 6] ?
// 2번 [2, 1, 3, 5, 6] ?1번과 2번 중 어떤 것이 맞을까요? 이 문법을 알지 못하였다면 1번과 같이 이중 배열을 충분히 예상할 수 있습니다. (다들 아시겠지만) 정답은 2번입니다. 따라서 펼치다(spread)는 것은 객체 혹은 배열의 속성을 가져올 수 있다는 것을 의미합니다.
배열의 Spread
배열의 복사(myArray.splice()), 추가(myArray.push()), 연결(myArray.concat())에 대해 메소드를 대신하여 사용할 수 있습니다.
복사
const colors1 = ['red', 'blue', 'black', 'yellow'];
const colors2 = [...colors1];
console.log(colors1);
// ['red', 'blue', 'black', 'yellow']
console.log(colors2);
// ['red', 'blue', 'black', 'yellow']
console.log(colors1 === colors2);
// false, colors1와 colors2은 서로 다른 배열추가
let number1 = [1, 2, 3];
let number2 = [4, 5, 6];
number1 = [...number1, ...number2, 7, 8];
// [1, 2, 3, 4, 5, 6, 7, 8]
number2 = [...number2, ...number1];
// [4, 5, 6, 1, 2, 3, 4, 5, 6, 7, 8]객체의 Spread
객체가 소유한 속성에 새로운 속성을 추가합니다.
const zoo1 = {
tiger: '6마리',
giraffe: '2마리',
rabbit: '5마리',
};
const zoo2 = { ...zoo1 };
console.log(zoo1);
// {tiger: '6마리', giraffe: '2마리', rabbit: '5마리'}
console.log(zoo2);
// {tiger: '6마리', giraffe: '2마리', rabbit: '5마리'}
console.log(zoo1 === zoo2);
// false, zoo1와 zoo2는 서로 다른 객체객체의 병합
const zoo1 = {
lion: '3마리',
monkey: '6마리',
};
const zoo2 = {
lion: '2마리',
elephant: '4마리',
};
const zoo3 = { ...zoo1, ...zoo2 };
console.log(zoo3);
// {lion: '2마리', monkey: '6마리', elephant: '4마리'}함수의 Spread
함수의 인자로 배열을 활용할 때 쓰는 Funtion.apply() 보다 간편하게 사용할 수 있습니다.
function FunctionDivision(x, y) {
return x / y;
}
const arrayNumber = [10, 2];
// apply()
console.log(FunctionDivision.apply(null, arrayNumber));
// 5
// spread syntax
console.log(FunctionDivision(...arrayNumber));
// 5마치며
자주 사용하기 위해 개념을 익히는 과정에서 기본적인 내용을 정리해보았습니다. 좀 더 확장성 있게 사용할 수 있도록 다양하게 활용해 보셨으면 합니다:D
고맙습니다. - 끄읕 -