Array.fill()에서 인자를 객체로 준 경우

토이24번 문제를 풀다가 마주한 에러였다.
기수 정렬을 위해 이차원 배열을 다음과 같이 만들었다.

const myarr = new Array(10).fill([]);

그러고 나서 다음과 같은 방식으로 특정 인덱스에 있는 배열에만 숫자를 채우려고 했지만, 모든 배열에 똑같은 숫자가 입력이 되었다.

myarr[0].push(2);

//실제 결과
[
  [ 2 ], [ 2 ], [ 2 ],
  [ 2 ], [ 2 ], [ 2 ],
  [ 2 ], [ 2 ], [ 2 ],
  [ 2 ]
]

구글에도 어떻게 검색을 해야 하는지 몰라서 한참을 헤메다가 혹시나 싶어 mdn에 관련 내용이 있는지 찾아보았다.

value에 객체를 받을 경우 그 참조만 복사해서 배열을 채웁니다.

// Objects by reference.
var arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

array.fill의 경우 인자로 객체를 주게 되면, 객체의 실제 값이 아닌 주소값을 동일하게 하여 채우게 된다고 한다. 그러니, 모두 똑같은 값으로 업데이트되는 것이었다. 위의 예시에서는 객체를 썼지만 객체로 취급되는 배열도 마찬가지 현상이 나타난다.