스프레드 문법

<aside> ❓

스프레드 문법 …

하나로 뭉쳐있는 여러 값들을 펼쳐서 개별적인 값들 목록으로 만든다.

</aside>

const arr = [1, 2, 3]
console.log(...arr) // 1 2 3

스프레드 문법은 배열, 문자열, 객체 등 순회할 수 있는 요소에 한정해서 적용할 수 있다.

스프레드 문법 어디에 쓸까?

1. 인수 목록

   const max = Math.max([1, 2, 3]); // -> NaN
   const max = Math.max(...[1, 2, 3]); // 3
   

   const arr = [1, 2, 3, 4, 5];
   
   function sum(a, b) {
     return a + b
   };
   
   console.log(sum(...arr)); // 3
   

2. 배열 병합

   // ES5
   const arr = [1, 2].concat([3, 4]);
   // ES6
   const arr = [...[1, 2], ...[3, 4]]; // [ 1, 2, 3, 4 ]
   

3. 요소 제거

   const arr = [1, 2, 3, 4] 
   const newArr = [...arr.slice(2)]; // 3 4
   

4. 배열 복사

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

⚠ 얕은 복사에 주의하자!

const items = [[1], [2]];
const clone = [...items];
consol.log(clone);

clone[0][0] = 'Hello';

console.log(clone);
console.log(items);

전개 구문 - JavaScript | MDN

객체에도 사용 가능

일반 객체도 스프레드 문법을 사용할 수 있다.

1. 객체 병합

   const obj = { x: 1, y: 2 };
   const obj2 = { z: 3 };
   const newobj = { ...obj, ...obj2 }