[JavaScript] JS에서 2차원 배열 선언

🟢 서론

모든 코딩 테스트를 C++로만 해왔지만, 프론트엔드 코딩 테스트를 JavaScript로 보는 회사가 많다는 것을 알게 되었고, 그렇지 않더라도 프론트엔드 팀에 지원하는데 JS로 코딩 문제를 해결하지 못하는 실력이라면 합격하더라도 팀에 도움을 주지 못할 것 같아 JS 코딩 테스트를 준비하고 있었습니다.

오히려 JS는 C++보다 배열을 쉽게 조작할 수 있었지만, 그 중 가장 어이없었던(?) 2차원 배열 선언 방법을 포스팅해보겠습니다.

🟢 2차원 배열 생성 방법

1️⃣ 초기값 할당 [예시 크기: 3x2]

let arr = [['a', 'b'], ['c', 'd'], ['e', 'f']];

너무 뻔한 방법이지만, 2차원 배열 생성하는 것은 맞기 때문에..

2️⃣ 반복문 사용 [예시 크기: 3x2]

let arr = new Array(3);

for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(2);
}

이 방법은 먼저 3개의 빈 배열을 만들어두고, 만들어둔 빈 배열 3개 안에 각각 2개의 빈 배열을 넣는 방법입니다.

3️⃣ from 메소드 사용 [예시 크기: 3x2]

let arr = Array.from(Array(3), () => new Array(2));

저는 이 방법을 제일 선호합니다.
한 줄로 가장 간단하고, 필요한만큼 배열을 생성할 수 있습니다.

let arr = Array.from(Array(3), () => new Array(2).fill(0));

또한 위와 같이 .fill 메소드를 사용하여 초기값 설정도 쉽습니다.
다만, 이 .from 메소드는 ES6를 지원하는 브라우저에서만 사용 가능합니다.
(2025년 기준, 모든 주요 브라우저와 Node.js가 ES6를 지원합니다.)

❌ 주의할 점은 아래와 같이 사용하면 안됩니다. ❌

let wrongArr = new Array(3).fill(new Array(2).fill(0));
wrongArr[0][0] = 1;
console.log(wrongArr); // [[1, 0], [1, 0], [1, 0]]

이런 식으로 선언할 경우, 내부 배열이 전부 같은 객체를 참조하게 됩니다.
그래서 Array.from + 콜백(() => new Array(...)) 방식이 안전합니다.

🟢 동적 할당?

JavaScript는 C++처럼 굳이 vector와 같은 문법을 사용하지 않아도 배열 크기 증가/감소가 가능합니다.

배열에 값을 넣는 방법을 설명한
[JavaScript] JS로 Stack, Queue, Deque 구현하기를 참고해주세요.