프로그래밍/자바스크립트

[JavaScript] 자바스크립트 2차원 배열 선언 및 사용법

젠트 2020. 6. 11. 21:29

자바스크립트의 2차원 배열이란?

  • 자바스크립트는 진정한 2차원 배열은 없다
  • var arr = [][]; 이와 같은 한 번에 2차원 배열 선언이 불가능하다
  • 약간의 트릭을 통하여 2차원 배열과 비슷한 배열을 만들 수 있다

아래의 예제 중 상황에 맞는 방법을 사용하면 된다

 

초기값을 할당하여 배열 생성

// arr[5][2]
var arr = [['a','b'], ['c', 'd'], ['e', 'f'], ['g', 'h'], ['i', 'j']]; 

 

반복문을 사용하여 빈 배열 생성

// arr[5][2]
var arr = new Array(5);

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

 

2차원 배열 생성 함수를 만들어서 사용

function create2DArray(rows, columns) {
    var arr = new Array(rows);
    for (var i = 0; i < rows; i++) {
        arr[i] = new Array(columns);
    }
    return arr;
}

// arr[5][2]
var arr = create2DArray(5, 2);

 

Array 객체에 배열 생성 함수를 추가하여 사용

Array.matrix = function (m, n, initial) {
    var a, i, j, mat = [];
    for (i = 0; i < m; i += 1) {
        a = [];
        for (j = 0; j < n; j += 1) {
            a[j] = initial;
        }
        mat[i] = a;
    }
    return mat;
};

// matrix('행', '열', '기본값')
var arr = Array.matrix(5, 2, 0);

- 자바스크립트 핵심 가이드 (더글라스 크락포드) p109

 

ES6를 지원하는 최신 브라우저라면 사용 가능한 방법

// arr[5][2] (빈 배열 생성)
const arr1 = Array.from(Array(5), () => new Array(2)

// arr[5][2] (null로 초기화하여 생성)
const arr2 = Array.from(Array(5), () => Array(2).fill(null))

 

자바스크립트의 2차원 배열은 1차원 배열에 또 다른 배열 객체를 추가하여 2차원 배열 만드는 방법을 사용한다. 자바스크립트 배열의 특성을 잘 모른다면 조금 이상한 방법으로 보일 수도 있다.

자바스크립트의 배열은 동적으로 배열의 크기를 조절할 수 있으며, 배열에는 모든 유형의 변수 그리고 함수, 객체도 담을 수 있어서 유연하게 사용할 수 있지만 그만큼 충분히 이해를 하고 사용해야 한다.