javascript 2차원 빈 배열 생성 후 사용하기 (에러 기록)

이 글을 작성하게 된 이유

 

알고리즘 문제를 풀 때 배열 안의 배열의 형태로 문제를 풀려고 Array(N+1). fill([])을 했었습니다

 

이때 배열에 하나의 값만 추가하여도 모든 배열에 값이 들어갔는데요

 

처음엔 이해가 되지 않았지만 GPT에게 물어보고 답을 알았습니다. fill 배열을 할 때 한 가지 배열의 메모리값만 참조하여 모든 배열이 이루어진 것이었습니다

 

const arr = Array(N + 1).fill([]);
const visited = Array(N + 1).fill(false);

console.log(arr);
arr[0].push(1);

console.log
[ [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ], [ 1 ] ]

GPT 답변

이러한 결과가 나오는 이유는 `Array(N + 1). fill([])`을 사용하여 배열 `arr`를 생성한 후, 각 요소를 빈 배열(`[]`)로 채웠기 때문입니다. `Array(N + 1)`은 길이가 `N + 1`인 새로운 배열을 생성합니다. 그런 다음 `fill([])` 메서드를 사용하여 배열의 모든 요소를 빈 배열(`[]`)로 채웁니다. 이때, 동일한 빈 배열(`[]`)을 채우므로 배열 `arr`의 모든 요소는 동일한 빈 배열을 참조하게 됩니다. 따라서, `arr [0]`을 수정하거나 변경할 때 모든 요소에 해당 변경이 반영되며, 배열 `arr`의 모든 요소가 동일한 빈 배열을 참조하므로 출력 결과에서 모든 요소가 동일한 값을 가지게 됩니다.

 

MDN Array.fill 에제에도 나오는 내용이네요

 

console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]

// 배열의 각 슬롯이 참조하는 단일 객체
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

 

 

2차원 배열 생성하는 방법

 

  const arr = Array.from({ length: N + 1 }, () => []);

 

 

가로 X 세로 배열 만들기 (예시)

 

  const arr = Array.from({ length: N + 1 }, () =>
    Array.from({ length: M + 1 }, () => false)
  );

 

참고자료

 

Array.from() - JavaScript | MDN

 

Array.prototype.fill() - JavaScript | MDN