2차원 배열에서 값 단 하나만 바꾸고 싶은데 모든 줄이 다 바뀌는 경우

뜨악

const arr = new Array(5).fill(new Array(3).fill(0));

arr[1][1] = 1;
console.log(arr.join("\n"));

위와 같은 코드를 이용하여 2차원 배열을 만들고 한 칸의 값을 변경해 보았다

 

모든 줄의 값이 다 변경되는 것을 볼 수 있다

이 이유는 fill() 메서드가 참조만 복사해서 배열을 채우므로, 깊은 복사가 되지 않는 탓이다

new Array() 가 fill 에서 단 한 번만 호출되고, 그 참조로 5개 원소가 채워지는 것이다

C언어로 치자면, 2차원 배열의 각 행이 같은 주소값을 가리킨다고 이해하면 된다

fill 메서드는 원시값으로 배열을 채울 때만 이용하도록 하자

해결법

const arr = Array.from({length: 5}, _ => new Array(3).fill(0));

arr[1][1] = 1;
console.log(arr.join("\n"));

이제 원하는 대로 하나의 원소만 값이 변경된다

Array.from() 은 맵핑 함수 (내부의 콜백 함수) 가 매번 새로운 배열을 생성하기 때문에 참조가 다른 배열들로 구성이 되기 때문

---

참고 자료

https://stackoverflow.com/questions/68966366/changing-one-value-in-2d-array-changes-whole-line

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill