프로그래머스 - 2차원으로 만들기 문제를 풀면서 2차원 배열을 만들기 위해 Array 객체의 fill() 메서드를 이용하였다. Array() 생성자를 이용해 배열을 만들고 fill([])을 이용해 빈 배열을 추가했다.
그리고 각 배열에 push()메서드를 사용해 숫자들을 채우려는데 이상하게도 모든 이차 배열에 같은 숫자들이 들어가는 문제가 있었다.
간단하게 2 x 3 배열이 있다고 할때 arr[0]에만 1을 추가한다고 해보자.
const arr = new Array(3).fill([]);
arr[0].push(1);
console.log(arr); // [[1], [1], [1]]하지만 모든 배열에 1이 추가된 것을 볼 수 있다. 왜 이럴까 곰곰히 생각하다 배열들이 모두 같은 걸 바라보고 있는 건가 했는데 아니다 다를까 MDN - Array.prototype.fill()에 매개변수 value에 대한 설명이 다음과 같이 적혀있었다.
배열을 채울 값입니다. 배열의 모든 요소는 정확히 이 값이 될 것입니다.
value가 객체인 경우, 배열의 각 슬롯은 해당 객체를 참조합니다.
즉, value로 주어진 값이 객체라면 원시 타입과 다르게 해당 값을 저장하는 게 아니라 값의 주소값을 저장한다는 것이다.
그렇기 때문에 같은 주소값을 가지고 있는 배열들에 요소를 넣으면 모두 다 넣어지게 된 것이다. arr[0]에 추가를 해도 arr[1], arr[2]에도 값에 추가된다. fill()메서드를 이용해 객체를 채울때에는 주의가 필요할 것 같다.
frontend