JS에서 2차원 배열 동적으로 만들 때 주의할 점

보통 초기화된 배열이 필요할 때 배열을 만들기도하고, 동적으로 배열을 만들어야 할 상황이 올때, 배열의 크기를 미리 지정해둔다.

const arr = new Array(5)

 

new Array(n)

이렇게하면 length 프로퍼티만 채워진 채 5개의 요소가 들어있지 않은 상태가 된다.

그래서 5개짜리 배열을 만들고싶다면 그내용을 채워주도록 해야하는데 그 방법에는 두가지가있다.

const arr = new Array(5).fill(undefined);
const arr = Array.from({length:5},()=> undefined);

두가지의 차이점이 있다는 것을 알고리즘 문제를 풀면서 알게됬다.

Array.from()

An iterable or array-like object to convert to an array.

Array.from(arrayLike, mapFn, thisArg)

첫번째 인자로 유사 배열 혹은 이터레이블한 객체를 받아서 배열로 전환한다.

두번째 인자는 mapFn 이라는 콜백함수를 받아서 각 요소들을 초기화한다.

 

Array.prototype.fill()

fill(value, start, end)

3가지의 인자로, 첫뻔째 인자는 값을, 두번째, 세번째 인자는 옵셔널로 지정해줄 수 있다.

 

차이점

차이점은 초기화를 "값" 으로하느냐 혹은 callback함수로 실행하여 하느냐이다.

그냥 원시값으로 초기화하는것이라면 상관없겠지만, 객체를 할당하게된다면 fill은 하나의 객체를 동일하게 할당하고,

from()은 매번 함수가 실행하는 return 값을 할당하기 때문에 매번 새로운 객체를 만들게된다. (새로운 객체를 생성하면서 초기화 할 경우)

const arr = Array.from({length:5},()=> new Array(5).fill(0));
const arr2 = new Array(5).fill(new Array(5).fill(0));

만약 이중배열을 선언하고자, 단순히 두번째 방식으로한다면 모두 같은 값을 참조하고 있는 것을 볼 수 있다.

 

그러므로 이중배열 혹은 객체를 초기화하고자 할때는 Array.from()을 사용하는 것이 적절하다.