[자바스크립트] 배열과 객체의 값을 복사하는 방법 / spread operator

. 점 세개를 사용하면 이게 spread operator이다. 

무언가를 펼쳐놓고 싶을 때 사용한다. 

 

예를 들어보자. 

var 어레이 = ['hello', 'world'];

console.log(...어레이) // hello world

어레이에 spread operator를 붙이면, 대괄호를 제거해준다.  

위에 적힌 코드대로 console.log(...어레이)를 출력하면, 

대괄호가 제거되고, hello world가 출력된다. 

 

 

그렇다면 문자열을 spread하면 어떻게 될까?

var 문자 = 'hello'

console.log(...문자); // h e l l o

 

 

각각의 문자들은 배열내 하나의 값으로 인식되고 있기 때문에, 각각의 값에 해당되던 대괄호가 지워진다. 

그래서 'h', 'e', 'l', 'l', 'o'와 같이 된다. 

 

 

이 spread operator를 활용해서, 다른 배열의 값을 합치고 옮겨보자. 

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


var c = [...a]; 
console.log(c) // [1,2,3]

var c = [...a, ...b]; 
console.log(c) // [1,2,3,4,5]

spread operator를 활용하면 손쉽게 다른 배열을 옮겨올 수 있다. 

 

 

Deep copy : 

spread operator는 배열을 deep copy할 때, 굉장히 유용하다. 

 

일반적인 방법으로 복사를 하려고 할 때, 문제가 되는 부분이 있다. 

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

이렇게 값을 선언했다. 그런데 만약에 a[3] = 4 이렇게 값을 추가하면 어떤 일이 생길까? 

이렇게 새로운 값을 추가하면, b에도 동일하게 값이 추가된다. 

왜냐하면 b는 a와 동일한 메모리상의 주소를 가리키고 있기 때문이다. (배열은 레퍼런스 타입이다)

 

그렇지만, spread를 사용하게 되면, deep한 복사를 할 수 있다. 

var b = [...a]

이런 방식으로 복사를 하면, 독립적인 주소를 가진 상태에서 값을 복사해올 수 있다. 

 

 

객체를 만들때도 동일하다. 

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

var o2를 만들 때 o1에 있던걸 그대로 넣고 싶다면, 

var o2 = {...o1, c : 3}

이런식으로 넣으면 된다. o1에 있던 값이 그대로 o2에 들어간다. 

 

 

한 가지 주의해야 할 사항이 있다. 

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

현재 a라는 key값에 대하여 값이 중복되고 있다. 이렇게 값 중복이 일어나게 되면 무슨 일이 일어날까? 

가장 뒤에 있는 값이 적용된다. 그래서 위와 같은 코드의 경우 o2를 출력하면 

{ a : 1, b : 2 } 

라는 값이 출력될 것이다. 

 

 

spread operator에 대해서 알아봤다. es6의 신문법으로 배열과 객체등의 값을 복사하거나 옮기려고 할 때, 유용하게 사용될 수 있다.