Javascript 2차원 배열 선언, 초기화 하기

javascript로 알고리즘 문제를 풀다 보면 2차원 배열을 사용해야 하는경우가 종종 있는데

javascript로 2차원 배열을 선언하고 초기화 하는 3가지 방법을 알아보겠습니다.

 

1. for문 사용

가장 쉽게 생각나는 for문을 이용하는 방법입니다.

function getArray1(r, c, value) {
  const result = new Array(r);
  for (let i = 0; i < r; i++) {
    result[i] = new Array(c).fill(value);
  }
  return result;
}

 

2. new Array, fill, map 사용

array의 생성자, array 메서드 fill과 map을 이용하는 방법입니다.

function getArray2(r, c, value) {
  return new Array(r).fill(0).map(() => new Array(c).fill(value));
}

이때 중요한 것은 첫번째 fill 메서드를 사용하는 부분입니다. new Array(10)은 10만큼의 빈 슬롯을 가진 배열을 반환하는데 배열의 각 원소는 undefined가 아닌 빈 슬롯입니다. 그래서 map의 콜백함수를 타지 않는것 같습니다. 아래 코드를 실행시켜 보시면 이해가 되실것 같습니다.

const arr = new Array(10);
arr[5] = 0;
console.log(arr);
// [empty × 5, 0, empty × 4]

const newArr = arr.map(() => 10);
console.log(newArr);
// [empty × 5, 10, empty × 4]

 

3. Array.from 사용

유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만드는 Array.from을 이용하는 방법입니다.

function getArray3(r, c, value) {
  return Array.from(new Array(r), () => Array.from(new Array(c), () => value));
}

 

속도 비교

위에서 본 3가지 방법의 속도를 비교해 보겠습니다.

const R = 10000;
const C = 10000;
let start, end;

start = new Date();
const arr1 = getArray1(R, C, 0);
end = new Date();
console.log(`getArray1 : ${end - start}ms`);

start = new Date();
const arr2 = getArray2(R, C, 0);
end = new Date();
console.log(`getArray2 : ${end - start}ms`);

start = new Date();
const arr3 = getArray3(R, C, 0);
end = new Date();
console.log(`getArray3 : ${end - start}ms`);

// 실행 결과
// getArray1 : 416ms
// getArray2 : 756ms
// getArray3 : 4106ms

1번 방법과 2번 방법이 3번 방법에 비해 조금 의미있게 빠른것을 볼 수 있었습니다.