2차원배열 Array.from()사용하여 복사하기

 

기본형 데이터와 참조형 데이터가 있다

기본형 데이터 : string, number, boolean, null, undefined 등

참조형 데이터 : array, function, object 등

 

복사를 할때

기본형데이터는 원본이 변형되지않고 값만 복사되고 

참조형데이터는 얕은복사로 데이터를 가르키는 주소값만 복사되는줄은 알고있었는데

 

array복사를 하다가 몰랐던 부분이 있어서 기록해놓으려한다.

보통 array복사를 할때,

다음과같이 스프레드문법 또는 slice로 복사를 해서 사용했다

 

let a = [1,2,3] // [1,2,3]
let b = [...b]  // [1,2,3]
let c = a.slice();  // [1,2,3]

c[0] = 5;

console.log(a);  // [1,2,3]
console.log(c);  // [5,2,3]

 

 

 

 

하지만 a배열안에 기본형데이터가 아닌, 참조형 데이터가 요소로 있을 경우 즉 2차원배열일 경우

복사본의 배열요소안에 있는 데이터를 변경했을때

원본 a배열의 데이터로 변경되는것으로 확인되었다.

 

let a = [[1,2],[3,4]] // [[1,2],[3,4]] 
let b = [...b]  // [[1,2],[3,4]] 
let c = a.slice();  // [[1,2],[3,4]] 

c[0][0] = 5;

console.log(a);  // [[5,2],[3,4]]
console.log(c);  // [[5,2],[3,4]]

 

 

복사하고자하는 배열의 요소가 참조형일 경우 

원본을 변경시키지않는 깊은 복사가 아닌

얕은 복사가 되는 것이었다. 

 

그렇다면, 2차원배열일 경우

원본은 건드리지않고 값만 복사해올수 있는 방법은 뭘까

바로 Array.from()를 사용해서 해결할수 있었다

 

let a = [[1,2],[3,4]]  // [[1,2],[3,4]]
let b = a.map((v) => Array.from(v))  // [[1,2],[3,4]]

b[0][0] = 5;
console.log(a);  // [[1,2],[3,4]]
console.log(b);  // [[5,2],[3,4]]

 

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해

새로운Array 객체를 만들어주는 메서드로, 

a 배열안의 요소들을 복사해와서 새로운 b 배열로 만들어주는 것이다.