Array Fill 함수 이상하다?

April 10, 2022

글을 작성하게 된 이유

fill 함수가 이상하게 동작해서..

2차원 배열(5 * 5)을 만들자

const matrix = Array(5).fill(new Array())[
    // output
    ([], [], [], [], [])
]

0번재 배열 요소에 1을 할당해보자

나는... 0번째 배열에만 1을 할당했는데... 모든 배열에 1일 할당 됬다.

matrix[0][0] = 1

// output
// [ [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ] ]

문제의 원인

Array.prototype.fill Polyfill을 찾아보면 원인을 쉽게 찾을 수 있었다.
같은 배열(즉, 같은 referece 참조)이기 때문에 문제가 발생하였다.

if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, 'fill', {
    value: function(value) {
      ...
      // Step 12.
      while (k < finalValue) {
        O[k] = value;
        k++;
      }

      // Step 13.
      return O;
    }
  });
}

해결방법

Array.from 를 활용하여 매번 새롭게 배열을 생성

const matrix = Array.from({ length: 5 }, (_) => [])
matrix[0][0] = 1

// output
// [ [ 1 ], [], [], [], [] ]