자바스크립트(Javascript) 배열 복사 하는법

자바스크립트(Javascript) 배열 복사하는 법 

 

자바스크립트로 그림같이 배열을 복사하려하면 

array = [1,2,3,4,5];
array_copy = array;
 
array.splice(0,1);
console.log(array,array_copy);
// [2,3,4,5] and [2,3,4,5]

동일한 객체를 가르키기 때문에 값이 같이 바뀝니다.

 

위를 해결하는 방법을 찾다가 정리해서 공유합니다.

 

 

먼저 shallow copy 와 deep copy로 구분합니다.

 

# shallow copy(얕은복사)

array = [1,[2,3]];
array_copy = [...array];
 
array.push(4); //array = [1,[2,3],4]
console.log(array,array_copy);
// [1,[2,3],4] and [1,[2,3]]
 
array[1].push(5); 
console.log(array,array_copy);
// [1,[2,3,5],4] and [1,[2,3,5]]

리스트 내에 리스트가 있는 경우에 변경이 이뤄지면 

shallow copy 같은 경우는 같이 값이 변합니다.

 

 

# deep copy(깊은 복사)

array = [1,[2,3]];
array_copy = [...array];
 
array.push(4); //array = [1,[2,3],4]
console.log(array,array_copy);
// [1,[2,3],4] and [1,[2,3]]
 
array[1].push(5); 
console.log(array,array_copy);
// [1,[2,3,5],4] and [1,[2,3]]

깊은 복사 같은 경우는 어느 한쪽의 수정으로 다른 쪽에 영향이 없습니다.

리스트 내 리스트 같은 경우까지요.

 

 

본격적인 배열 복사하는 법

 

1. Spread Operator 

 

ES6에서 소개된 개념. 

#shallow copy

 

array = [1,2,3];
array_copy = [...array];
 
array.splice(0,1);
console.log(array,array_copy);
// [2,3] and [1,2,3]

2. for 문

#shallow copy

array = [1,2,3];
array_copy = [];
 
for(i<0; i<array.length; i++){
    array_copy[i] = array[i];
}
 

3. Array.filter() 메서드

#shallow copy

array = [1,2,3];
 
array_copy = array.filter(() => true);
 

4. JSON.parse and JSON stringify

#deep copy

array = [1,2,[3]];
 
array_copy = JSON.parse(JSON.stringify(array));
 
array[2].push(4);
 
console.log(array,array_copy)
// [1,2,[3,4]] and [1,2,[3]]

 

JS 메서드를 이용한 간단한 복사였습니다.