-
[JavaScript] Array.fill() 사용 시 주의할 점JavaScript 2023. 8. 13. 00:44
[ [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 메서드의 두 번째 인자에 각 요소를 매핑할 함수를 작성하여 문제를 해결하였다.
반응형'JavaScript' 카테고리의 다른 글
[JavaScript] 다중 조건 정렬 (0) 2023.10.12 [JavaScript] 커링이란? (0) 2023.09.20 [JavaScript] 숫자로 된 문자열 정렬 (0) 2023.07.27 [TypeScript] reduce 사용하기 (array to object) (0) 2023.07.06 [JavaScript] Web Audio API 이해하기 위해 쓰는 글 (0) 2023.06.27