[Javascript] 얕은 복사와 깊은 복사

Array.fill()로 2차원 배열을 만들었는데 특정 인덱스의 원소 값을 변경하니까 전체 원소가 변경됐어요.

프로그래머스 알고리즘 문제를 풀면서 질문하기 페이지를 보다가 흥미로운 내용을 발견했다. 새로 안 사실이라 기억차 기록을 남겨둔다.

얕은 복사 vs 깊은 복사

얕은 복사 > https://developer.mozilla.org/ko/docs/Glossary/Shallow_copy

요약하자면 변수를 선언 후 해당 객체를 복사한다고 해서 둘이 독립 값이 되는 것이 아니라 같은 주소를 참조하고 있기 때문에
원본, 복사본 둘중 중 어느 것을 수정해도 둘 다 변경이 된다는 뜻이다.

깊은 복사 > https://developer.mozilla.org/ko/docs/Glossary/Deep_copy

얕은 복사의 상반되는(?) 개념이다.
원본 또는 복사본 둘 중 어느 것을 수정해도 다른 객체가 수정되지 않는다.

보통 배열을 복사하거나 생성할 때 slice(), from(), fill() 등을 사용하는데, 이러한 메서드는 깊은 복사가 아니라 얕은 복사다.

그러면 다시 질문으로 돌아와서 아래 코드를 통해 설명을 하자면

let array = Array(3).fill(Array(3).fill(0));// 3 * 3
// [[0, 0, 0], [0, 0, 0], [0, 0, 0]]의 배열이 생성
array[1][1] = 1; // 2차원 배열의 특정 원소 수정
// 결과 : [[0, 1, 0], [0, 1, 0], [0, 1, 0]]
// Array(3).fill(0)을 통해 생성된 객체 하나만을 참조하기 때문에(얕은 복사)
// 특정 인덱스의 원소를 수정한다면 원본 및 복사본 전체가 수정된다.

얕은 복사와 깊은 복사의 특징을 이해하고, 필요에 따라서 적절하게 활용하면 될 듯 싶다.
원본을 반드시 보존해야 하는 경우는 깊은 복사를 활용하자!