스노우보드 참 좋아하는데 맨날 키보드 앞에만 있네

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

개발/Javascript

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

워너-비 2017. 10. 31. 20:30

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




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


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


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

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


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




배열 복제


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


1
2
3
4
5
6
7
8
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] 가 출력된다. 



배열 병합


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


1
2
3
4
5
6
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] 가 출력된다.

Comments