[JavaScript / ECMAScript6] 전개 연산자(바벨)를 사용한 배열 복사와 병합

전개 연산자(바벨)를 사용한 배열 복사

---

자바스크립트의 객체 복사에 대해서 잘 모르시는 분은 아래 링크를 통해 이전 게시글을 참고하도록 하자

2017/10/31 - [Programming Note/Javascript] - [JavaScript] 참조 복사와 값 복사 (얕은 복사와 깊은 복사)

ECMAScript 6 에서 추가된 전개 연산자(spread operator)를 사용하면 배열의 내용을 복제하거나 병합할 수 있다.

전개 연산자를 사용할 수 있는 구문은 다음과 같이 세 가지가 있다.

// 함수 호출용
myFunction(...iterableObj);
 
// 배열 리터럴 용
[...iterableObj, 4, 5, 6]
 
// 비구조화 용
[a, b, ...iterableObj] = [1, 2, 3, 4, 5];

배열 복제

---

전개 연산자를 사용하여 배열을 복제해보자

const originalArray = [1,2,3,4,5];
const newArray = [...originalArray];
 
originalArray[0] = 100;
originalArray[1] = 200;
 
console.log(originalArray);
console.log(newArray);

원래대로라면 for문을 사용하여 배열의 값을 하나씩 복사해줘야 하지만, 2열에서 전개연산자를 통해 쉽게 복사했다.

값복사가 제대로 이루어 졌으므로 4,5열에서 값을 변경한 후 출력하면 순서대로 [100,200,3,4,5] [1,2,3,4,5] 가 출력된다. 

배열 병합

---

전개 연산자를 사용하여 배열을 복제해보자

const arrayA = [1,2,3,4,5];
const arrayB = [10,20,30,40,50];
 
const newArray = [...arrayA, ...arrayB];
 
console.log(newArray);

콘솔창에 [1, 2, 3, 4, 5, 10, 20, 30, 40, 50] 가 출력된다.