[ES6] Spread 문법: ... 으로 반복 가능한 요소 전개

[devSoyoung]

Spread

반복 가능한 문자를 0개 이상의 인수 또는 요소로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장

배열에 Spread 적용했을 경우

const arr = [1, 2, 3, 4, 5];
const newArr = [ ...arr ];          // [1, 2, 3, 4, 5]
const newObj = { ...arr };          // { 1: 1, 2: 2, 3: 3, 4: 4, 5: 5 }

JSON에 Spread 적용했을 경우

const obj = { 1: 0, 2: 1, 3: 2, 4: 3, 5: 4 };
const newObj = { ...obj };         // { 1: 0, 2: 1, 3: 2, 4: 3, 5: 4 }
const newArr = [ ...obj ];         // Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

Spread 활용하기

객체의 기존 내용을 건드리지 않고 다른 요소가 추가된 새 객체를 얻고 싶을 때

const prevObj = { 1: 'apple', 2: 'banana' };
const newObj = { ...prevObj, 3: 'berry' };
// { 1: 'apple', 2: 'banana', 3: 'berry' }

두 객체가 합쳐진 새로운 객체 만들기

const obj1 = { 1: 'apple', 2: 'banana' };
const obj2 = { 3: 'berry', 4: 'orange' };
console.log({ ...obj1, ...obj2 });
// { 1: 'apple', 2: 'banana', 3: 'berry', 4: 'orange' }