[JavaScript] Array.fill() 사용 시 주의할 점

[
 [0,0,0,0],
 [0,0,0,0],
 [0,0,0,0],
 [0,0,0,0]
]

위와 같은 다차원 배열을 만들어야 할 때가 있었다.

const board = Array.from({length: 4}).fill(Array.from({length: 4}).fill(0))

배열을 만드는 방법은 여러가지가 있었지만 나는 위와 같이 작성했었다.

원래 Array.from()의 두번째 인자에 매핑함수를 작성했어야 했는데

작성 시에 실수로 뒤에 fill() 메서드를 붙여 작성했던 것 같다 

 

아무튼 배열 board는 위와 같은 배열과 똑같이 만들어졌다.

이때 어느 한 요소를 변경하고 싶었다.

board[0][0] = 1

// 예상 결과
[
 [1,0,0,0],
 [0,0,0,0],
 [0,0,0,0],
 [0,0,0,0]
]

// 실제 결과
[
 [1,0,0,0],
 [1,0,0,0],
 [1,0,0,0],
 [1,0,0,0]
]

board[0][0]의 요소를 1로 변경하였다.

하지만 내가 예상했던 결과와 달리 각 배열의 0 인덱스가 모두 1로 바뀌어 버렸다(!)

 

이러한 결과가 나온 이유는

fill() 메서드에 채울 값으로 객체를 받을 경우 그 참조만 복사해서 배열을 채우기 때문이었다.

const board = [0,0,0,0].fill([1])

// board
[[1],[1],[1],[1]]

board[0][0] = 2

// board
[[2],[2],[2],[2]]

더 쉬운 예제로 설명을 하면 배열을 객체 타입인 배열인 [1]로 채우게 하였다.

그럼 [1]의 처음 생성된 그 값의 참조값만을 복사해서 나머지를 채우게 된다.

그럼 한 요소만 변경하게 되어도 그 참조한 모두 값이 변경되게 된다.

 

Array.from({ length: 4 }, () => new Array(4).fill(0))

다시 돌아와서 Array.from 메서드의 두 번째 인자에 각 요소를 매핑할 함수를 작성하여 문제를 해결하였다.