2차원 배열 생성과 Array.prototype.fill( )

몇 개월 전 리팩토링 중 했던 삽질 기록하기🙈..

배열의 길이를 변수로 지정한 후, 배열을 생성해서 가독성과 수정 시의 편리함을 가져가고 싶었다. 아래는 작성했던 코드랑 비슷한 예시이다.

const WORKSPACE_LENGTH = 5;
const workspace = new Array(WORKSPACE_LENGTH).fill([]);

const widget = "widget";
const addWidget = (index, widget) => {
  workspace[index].push(widget);
};

console.log(workspace);
// [["widget"], ["widget"], ["widget"]]

처음에는 new Array(변수)가 잘못된 방식인 줄 알고 헤맸다.
그러던 중 한 블로그를 보고 fill() 메서드는 얕은 복사로 값을 채운다는 것을 알게 되었다.

MDN에서도 fill() 메서드 페이지에서 아래와 같은 문구를 발견할 수 있다.

Value to fill the array with. Note all elements in the array will be this exact value: if value is an object, each slot in the array will reference that object.

'value가 객체일 경우, 배열의 각 슬롯이 해당 객체를 '참조'한다'고 나와있다.
관련 예시도 존재한다.

const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi"}, { hi: "hi" }, { hi: "hi" }]

---

2차원 배열 생성 대체 방법

1. Array.from() 메서드 활용

• Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체를 만든다.

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

Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

2. Array.prototype.map() 메서드 활용

const arr = Array(3).fill().map(() => []);

부끄러운 삽질 기록 끝..🥺

MDN - Array.prototype.fill( )
참조 블로그