[JavaScript] 전개 연산자 (Spread Operator)

전개 연산자?

전개 연산자는 ECMAScript(2015) 에서 새롭게 추가 되었으며, 특정 객체 또는 배열의 값을

다른 객체, 배열로 복제하거나 옮길 때 사용합니다. 연산자의 모양은 ... 이렇게 생겼습니다.

 

쓸일이 많으니 한번 알아봅시다.

 

---

배열 조합 

배열 조합

원래는 concat() 메소드를 이용하여 조합해줘야했지만 ... 연산자를 이용해 간단하게 합쳐주는 모습입니다.

 

 

객체 조합

 

예시)

위 코드를 실행하면 아래와 같은 실행결과가 나옵니다.

객체 자체가 objWrap 변수에 들어간 모습입니다.

---

 

 

이번에는 전개 연산자(Spread Operator)를 사용해보겠습니다.

객체 자체가 아닌 각각의 값이 할당

 

 

전개 연산자를 사용하여 ObjWrap에 저장하였더니 객체의 각각의 값이 할당된 것을 알 수 있습니다.

objWrap 객체는 obj1과 obj2의 값들을 모두 가지게 된것이죠. 

 

 

---

기존 배열을 보존

위 그림을 보면 arr2 는 arr1을 역순으로 정렬하고 있고, 

arr1, arr2를 콘솔로그 찍어본 모습인데요

 

기존의 배열까지 reverse() 해버린 모습입니다.

기존 배열을 보존하지 못하고 있죠.

 

 

이번에는 Spread Operator를 이용해서 arr2에 값을 할당해봅니다.

콘솔 로그를 찍어보니 기존의 배열은 영향이 가지 않고 arr2만 역순 정렬이 잘 되었네요.

 

---

나중에 깊은 복사, 얕은 복사와도 연계될 수 있는 내용이고,

실제로 쓸 일이 많으니 잘 숙지하도록 합시다.