Spread Syntax (...)

ES
비고
배열과 오브젝트의 내부 요소들을 전부 나열함. (1 depth copy)
Tags
spread
shallow copy

spread operator (펼치기 연산자, 전개 연산자)

말 그대로 배열과 오브젝트의 모든 요소들을 쭉 펼쳐서 나열한다고 생각하면 쉽다.
예시를 보면 바로 이해됨.

배열 예시

const oneTwo = [1, 2];
const threeFour = [3, 4];
const fiveSix = [5,6];

// 기존 방식
const oneToSix = oneTwo.concat(threeFour).concat(fiveSix); // [1,2,3,4,5,6]

// 전개 연산자 활용 시
const usingSpread = [...oneTwo, ...threeFour, ...fiveSix]; // [1,2,3,4,5,6]

오브젝트 예시

얕은복사 또는 객체의 병합 시에는 Object.assign() 보다 간단하게 가능.
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }
 

주의

1) 얕은복사를 하므로 참조형 데이터가 있을 경우 주의.
var a = [[1], [2], [3]];
var b = [...a];
b.shift().shift(); // 1
// 이제 배열 a 도 영향을 받음: [[], [2], [3]]
2) 오브젝트의 키가 동일할 경우 마지막 요소로 덮어쓰임
const obj1 = { test: 1 };
const obj2 = { test: 2 };

const obj3 = { ...obj1, ...obj2 };
// obj3 = { test: 2 }
💡
의도적으로 유용하게 잘 사용할 수 있다. ex) 기본값 스타일링이 있고, 파라미터로 받는 스타일링이 있는 경우