TIL-23.04.13

 

 

문제점

배열에서의 얕은복사

배열을 복사하는 방법으로는 slice(), concat(), spread연산자, Array.from() 등의 메소드들이 존재한다

이 메소드들을 아무렇지않게 사용하던 중 갑자기 문득 생각든것이, 이 메소드들 얕은 복사하지 않나??

그러면 메소리주소값을 복사하는걸테고, 복사한 배열의 요소를 변경하면 원본배열도 변해야하지않아? 라는 생각이들어 확인해보기로했다

 

 

 

 

시도한점

let arrA = ['a', 'b', 'c', 'd'];

let arrB = arrA.slice();
console.log('arrA : ', arrA);
console.log('arrB : ', arrB);

console.log('값 변경 후');

arrA[3] = 'e';
arrB[4] = 'f';
console.log('arrA : ', arrA); // [a,b,c,e]
console.log('arrB : ', arrB); // [a,b,c,d,f]

1차원배열을 slice()메소드를 사용해 복사한후 , 원본배열 / 복사한배열의 요소값 각각 변경 후 콘솔에 찍어봤다

결과값은 깊은복사한 결과값!?

 

 

let arrA = ['a', 'b', ['c', 'd']];
let arrB = arrA.slice();
console.log('arrA : ', arrA);
console.log('arrB : ', arrB);

console.log('값 변경 후');

arrA[0] = 'z';
arrB[0] = 'x';

arrA[2][0] = 'e';
arrB[2][1] = 'f';
console.log('arrA : ', arrA); //[z,b,[e,f]]
console.log('arrB : ', arrB); //[x,b,[e,f]]

이번엔 2차원배열까지 넣어서 다시 리트라이

1차원배열은 깊은복사의 결과값이 나오고, 2차원배열은 얕은복사의 결과값이 나왔다

이게 무슨일인가 확인차 구글링 진행! 

 --> 배열을 복사하는 slice(), Array.from(), spread연산자 등의 메소드들은 1차원배열에 대해서는 깊은 복사가 진행되고, 2차원 이상의 배열부터는 얕은 복사가 진행된다!

라는 사실을 알게되었다...그동안 수많이 배열 메소드들을 사용했는데 이런 사실을 지금에서야 알다니...

 

 

 

굉장히 자주 사용하는 Array.from()메소드로 다시 체크

let arr = [1, 2, 3, 4, 5];
let arr2 = Array.from(arr);
arr2[0] = 10;
console.log('arr:', arr);  // [1,2,3,4,5]
console.log('arr2:', arr2); // [10,2,3,4,5]

1차원배열 복사 후 값 변경 --> 깊은복사 결과값

 

 

let arr = [[1, 2, 3, 4, 5]];
let arr2 = Array.from(arr);
arr2[0][0] = 10;
console.log('arr:', arr); //[[10,2,3,4,5]]
console.log('arr2:', arr2); //[[10,2,3,4,5]]

2차원배열 복사 후 값 변경 --> 얕은복사 결과값...

 

 

 

 

알게된점

배열을 복사하는 메소드는 1차원 배열에서는 깊은 복사가 일어나고, 2차원 이상의 배열에서는 얕은 복사가 일어난다!!!