[JavaScript] 자바스크립트에서 2차원 배열을 선언하는 방법

서론

대상독자

자바스크립트로 이차원 배열을 선언하고자 하는 개발자

오늘의 학습목표

자바스크립트에서 2차원 배열을 선언하는 방법을 알고, 이를 활용할 줄 안다.

본론

자바스크립트에서는 다른 언어와는 다르게, 이차원 배열이란 개념이 없습니다. 그러나 이차원 배열 자체를 활용할 수 없는 것은 아닙니다. 오늘은 자바스크립트에서 중첩 배열을 통해, 2차원 배열과 같은 형태를 선언하는 방법에 대해서 알아보도록 하겠습니다.

이차원 배열을 생성하는 방법

자바스크립트에서는 const arr = [][] 혹은 const arr[3][3]와 같은 방법으로 선언해서 사용할 수 없습니다. 따라서 아래와 같은 방법을 따라야 하는데요.

배열에 초깃값을 할당하는 방법

가장 첫번째 방법은 아래와 같이 배열 안에 배열을 넣어 초기화해주는 방법입니다.

const arr = [[1,2], [2,3]]; // [[1,2], [2,3]] 

배열을 인자로 전달하는 방법

제가 가장 자주 쓰는 방법인데요, array.push 메서드의 인자로 배열을 전달해줌으로써 이차원 배열을 만들 수 있습니다.

const arr = [];
arr.push([1,2]); // [[1,2]]
arr.push([2,3,4]); // [[1,2], [2,3]] 
arr.push([3,4,5,6]); // [[1,2], [2,3,4], [3, 4, 5, 6]] 

반복문으로 배열 안에 배열을 생성하는 방법

이 방법은 자바스크립트 완벽가이드에도 소개된 방법입니다. index 값을 지정해줌으로써 간단하게 2x2 행렬을 만들어보도록 하겠습니다.

// 이차원 배열의 행을 2로 지정
const ROW = 2;
const COLUMN = 2;

const arr = new Array(ROW);  // [empty x 2]

// 이차원 배열의 열을 2로 지정 
for (var i = 0; i < COLUMN; i++) {
    arr[i] = new Array(2);
}

console.log(arr); // [[empty x 2], [empty x 2]]

처음 할당하는 Array에 length에는 행 값을, 반복문에서 할당하는 Array에는 열 값을 입력해주면 원하는 행과 열 크기 만큼의 이차원 배열을 생성할 수 있습니다.

ES6 문법으로 생성하는 방법

const arr = new Array(5).fill(0).map(() => new Array(4));

이 방법은 저도 처음 알게 된 방법인데요, 배열을 만들어주고 만든 배열의 원소에 fill 메소드를 통해 값을 채워 넣습니다. 간단하죠? 그런 뒤, map 함수를 실행해 각 원소의 자리에 길이가 4인 배열로 바꿔줍니다. fill 메소드를 쓰는 이유는 빈 배열의 경우 map 함수가 제대로 실행되지 않기 때문입니다.

이차원 배열에 접근하는 방법

arr[3][1] 

접근은 위와 같은 방법으로 쉽게 할 수 있습니다.

마무리

이것으로 간단하게 2차원 배열을 선언하는 방법에 관해 알아보았습니다. 내용에 관해 궁금한 점이 있으면 답글 남겨주시면 감사하겠습니다. 부족한 글, 읽어주셔서 감사합니다!