자바스크립트 다차원 배열 완벽 이해하기: 개념과 활용 예제

자바스크립트에서 다차원 배열(multidimensional array)은 배열 안에 또 다른 배열을 넣고 싶을 때 사용하는 자료 구조입니다. 복잡한 데이터를 체계적으로 관리할 수 있어 실무에서 매우 유용하게 활용됩니다.

다차원 배열이 필요한 이유

간단한 예시를 들어보겠습니다. 평일(월요일~금요일) 동안 하루에 네 번, 즉 6시간 간격으로 측정된 온도 데이터를 저장하고 싶다고 가정해 봅시다. 다차원 배열 없이 코드를 작성하면 다음과 같이 요일마다 별도의 변수를 만들어야 합니다.

let monday = [35, 28, 29, 31];
let tuesday = [33, 24, 25, 29];
// ...

요일이 많아질수록 변수가 계속 늘어나 관리하기 번거로워집니다. 이럴 때 배열의 배열(array of arrays) 형태인 다차원 배열을 사용하면 훨씬 깔끔하게 해결할 수 있습니다.

다차원 배열 선언하기

다차원 배열에서는 각 행(row)이 하나의 날짜를 나타내고, 행 안의 각 요소는 해당 시점의 온도 값을 나타냅니다.

let temps = [
    [35, 28, 29, 31],
    [33, 24, 25, 29]
];

다차원 배열 요소에 접근하기

다차원 배열의 요소에는 대괄호를 연달아 사용하여 접근할 수 있습니다. 예를 들어 두 번째 행의 세 번째 요소가 필요하다면 temps[1][2]처럼 조회하면 됩니다.

주의할 점은 인덱스 순서가 행(row) → 열(column) 순이라는 것입니다. 즉, 첫 번째 대괄호가 행 인덱스, 두 번째 대괄호가 열 인덱스를 의미합니다.

반복문으로 다차원 배열 순회하기

다차원 배열의 모든 요소를 처리하려면 중첩 for문을 사용하면 됩니다. 바깥쪽 반복문이 행을, 안쪽 반복문이 열을 순회합니다.

예제

let temps = [
    [35, 28, 29, 31],
    [33, 24, 25, 29]
];

for (let i = 0; i < 2; i++) {
    console.log("Row #" + i);
    for (let j = 0; j < 4; j++) {
        console.log(i, j, temps[i][j]);
    }
}

실행 결과

위 코드를 실행하면 아래와 같은 출력 결과를 얻을 수 있습니다.

Row #0
0 0 35
0 1 28
0 2 29
0 3 31
Row #1
1 0 33
1 1 24
1 2 25
1 3 29

3차원 이상의 배열

다차원 배열은 꼭 2차원에 한정되지 않습니다. 3차원, 그 이상의 차원으로도 확장할 수 있습니다. 대부분의 경우 2차원 배열만으로 충분하지만, 3D 그래픽 연산, 물리 시뮬레이션 계산 등에서는 3차원 배열이 유용하게 쓰입니다.

다만 차원이 깊어질수록 코드의 복잡도와 가독성 문제가 커지므로, 실제 프로젝트에서는 필요한 만큼만 차원을 사용하는 것이 좋습니다.