[ Javascript ] 전개 연산자를 사용한 배열 테크닉, 배열 복제

전개 연산자를 사용한 배열 테크닉

전개 연산자를 사용하면 배열을 복제하거나 병합할 수 있습니다.

 

배열 복제

ECMAScript5까지의 자바스크립트는 배열을 복제할 때 아래 코드처럼 사용해야 했습니다.

:: 코드가 복잡하기 때문에, 함수로 만들어 사용하는 것이 일반적입니다.

 

배열 복제 예

var array = [1, 2, 3, 4, 5];

var newArray = [];
for(var i = 0; i < array.length; i++) {
    newArray[i] = array[i];
}
console.log(array); // 1, 2, 3, 4, 5
console.log(newArray); // 1, 2, 3, 4, 5

그런데 ECMAScript6에서 추가된 전개 연산자를 사용하면 아래 코드처럼 깔끔하게 배열의 내용을 복제할 수 있습니다.

 

전개 연산자를 사용한 배열 복제

var array = [1, 2, 3, 4, 5];

const newArray = [...array];

console.log(newArray); // 1, 2, 3, 4, 5

 

배열 복제 확인 [ 배열 복제가 제대로 됐는지 확인하기 위한 코드 ]

var array = [1, 2, 3, 4, 5];

const newArray = [...array];

array[0] = 52;
array[1] = 222;

console.log(array); // 52, 222, 3, 4, 5
console.log(newArray); // 1, 2, 3, 4, 5

두 배열이 서로 다른 결과를 출력하므로 복제가 제대로 이루어진 것을 확인할 수 있습니다.

 

배열 병합

전개 연산자를 사용하면 배열을 병합할 수 있습니다.

 

전개 연산자를 사용한 배열 병합 예

const arrayA = [1, 2, 3, 4, 5];
const arrayB = [52, 555, 23, 44, 12];

const newArray = [...arrayA, ...arrayB];

console.log(newArray); // 1, 2, 3, 4, 5, 52, 555, 23, 44, 12

 

 

전개 연산자를 사용한 배열 병합2 예

const array = [522, 33, 77, 123, 11];

const arrayA = [1, 2, 3, 4, 5, ...array];
const arrayB = [...array, 1, 2, 3, 4, 5];

console.log(arrayA); // 1, 2, 3, 4, 5, 522, 33, 77, 123, 11
console.log(arrayB); // 522, 33, 77, 123, 11, 1, 2, 3, 4, 5

배열을 선언하면서 곧바로 기존 배열의 요소를 앞 또는 뒤쪽에 추가할 수 있습니다.