📚 2차원 배열 초기화

---

📕 배열 초기화 메서드

Array.fill()

주로 같은 수로 배열을 초기화 할 때 사용하는 메서드이다.

const zeroArr = Array(4).fill(0);
console.log(zeroArr);
// [0,0,0,0]

Array.from()

순회 가능, 유사 배열 객체에서 얕게 복사된 새로운 배열을 생성하는 메서드이다.

const helloArr = Array.from("hello");
console.log(helloArr);
// ["h","e","l","l","o"]

const plusArr = Array.from([1,2,3],(x)=>x+x);
console.log(plusArr);
// [2,4,6]

const numArr = Array.from({length:5},(v,i)=>i+1);
console.log(numArr);
// [1,2,3,4,5]

---

📗 문제 상황 확인

기존 코드

const arr = Array(4).fill(Array(4).fill(0));
console.log(arr);
// [
		[0,0,0,0],
		[0,0,0,0],
		[0,0,0,0],
		[0,0,0,0]
	]

0으로 채워진 4x4 배열을 만들고자 Array.fill()을 중첩 사용하였다.
배열은 정상적으로 잘 만들어진 상태였다.

문제 상황

const arr = Array(4).fill(Array(4).fill(0));
arr[0][1]++; 
arr[2][1]++; 
console.log(arr);

// 예상 출력
[
  [0, 1, 0, 0],
  [0, 0, 0, 0],
  [0, 1, 0, 0], 
  [0, 0, 0, 0]
]
// 실제 출력
[
  [0, 2, 0, 0],
  [0, 2, 0, 0],
  [0, 2, 0, 0], 
  [0, 2, 0, 0]
]

arr[0][1]과 arr[2][1]이 각각 1이 되길 기대하였다.
그러나 arr[0][1], arr[1][1], arr[2][1], arr[3][1]이 모두 2가 되었다.

---

📘 문제 원인 파악

참조형 데이터의 복사

const arr = Array(4).fill(Array(4).fill(0));

위의 코드는 4개의 배열을 생성하는 것 처럼 보이지만 같은 배열 (참조형 데이터)를 4번 복사한다.
즉, fill()을 사용하여 arr[0] 부터 arr[3]은 같은 배열의 주소를 가리키게 된 것이다.

---

📙 문제 해결 방법

Array.from() 사용

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

Array.from()을 사용해 독립적인 배열을 생성한다.
길이가 4인 배열 내부에 원시 값인 0을 채워준다. 원시 값은 복사 될 때 새로운 값으로 저장되므로 문제가 없는 것 처럼 보인다.

그러나, 이 방법 역시 0이 아니라 []와 같이 참조형 데이터(객체,배열 등)을 사용할 경우 동일 문제가 발생한다.

map() 사용

const arr = Array.from({ length: 4 }, () => [...Array(4)].map(() => 0));

Array.from()을 사용해 독립적인 배열을 생성한다.
map()을 사용하여 각 원소를 독립적인 값으로 생성하면, 참조형 데이터를 사용하여도 문제가 발생하지 않는다.

---

📓 참고

mdn - Array.prototype.fill()

mdn - Array.from()