[ES6] ... 연산자 (Spread Operator)

기본 사용법

var a = [1, 2, 3];
var b = [4, 5];

...a
>>> 1, 2, 3
...b
>>> 4, 5

대괄호를 벗겨준다고 생각하면 쉽다.

 

Deep Copy (깊은 복사)

var a = [1, 2, 3];
var b = a; // b에다 a랑 똑같은 값 넣고 싶음

a
>>> 1, 2, 3
b
>>> 1, 2, 3

그런데 여기서 a[3] = 4를 하면 b에는 무슨 일이 벌어질까?

a
>>> 1, 2, 3, 4
b
>>> 1, 2, 3, 4 (b에는 왜 추가됨 ???)

이러한 동작이 일어나는 이유는 Array, Object와 같은 reference data type 에서는 등호(=)로 복사 시, 서로가 값을 공유하게 되어있기 때문이다.

따라서 각각 완전히 독립적인 값을 가지도록 Array, Object를 복사하려는 경우(Deep copy)에는 Spread Operator를 사용한다.

var a = [1, 2, 3];
var b = [...a];

a[3] = 4;

a
>>> 1, 2, 3, 4
b
>>> 1, 2, 3

 

Object에서의 활용

var o1 = { a: 1, b: 2 };
var o2 = { ...o1, c: 3 };

o2
>>> { a: 1, b: 2, c: 3 }

중괄호도 벗겨준다.

그리고 마찬가지로 Object 또한 위에서 설명했듯 reference data type이기 때문에, o2 = o1 이렇게 복사해가면 o1과 o2 각각에 데이터 변화가 생길 때마다 독립 개체로 변화하지 않고 서로 동일하게 영향을 미친다.

 

Object 복사 과정에서 발생할 수 있는 Key의 중복

var o1 = { a: 1, b: 2 };
var o2 = { a: 3, ...o1, };

o2
>>> { a: 1, b: 2 }

마지막으로 온 key값의 value로 덮어씌워진다.