JavaScript로 행·열·초기값을 지정해 2차원 배열 생성하는 방법

JavaScript에서는 입력값에 따라 다차원 배열을 동적으로 생성해야 하는 경우가 자주 있습니다. 이번 글에서는 행(row), 열(column), 초기값(value) 세 가지 정보를 받아 원하는 형태의 2차원 배열을 만드는 함수를 직접 구현해 보겠습니다.

함수가 받아야 할 세 가지 요소

• row – 최상위 배열 안에 포함될 하위 배열(행)의 개수

• col – 각 하위 배열에 들어갈 요소(열)의 개수

• val – 하위 배열 내 모든 요소에 채워 넣을 값

예를 들어 세 가지 입력값이 각각 2, 3, 10이라면, 함수는 다음과 같은 결과를 반환해야 합니다.

const output = [[10, 10, 10], [10, 10, 10]];

즉, 2개의 행과 3개의 열을 가진 배열이 만들어지고, 모든 요소는 10으로 채워집니다.

구현 코드

중첩 반복문을 사용하면 간단하게 구현할 수 있습니다.

const row = 2;
const col = 3;
const val = 10;

const constructArray = (row, col, val) => {
    const res = [];
    for(let i = 0; i < row; i++){
        for(let j = 0; j < col; j++){
            if(!res[i]){
                res[i] = [];
            }
            res[i][j] = val;
        }
    }
    return res;
};

console.log(constructArray(row, col, val));

실행 결과

콘솔에는 아래와 같은 2차원 배열이 출력됩니다.

[ [ 10, 10, 10 ], [ 10, 10, 10 ] ]

코드 동작 원리

바깥쪽 반복문은 행(row)의 개수만큼 순회하고, 안쪽 반복문은 각 행에 열(col)개의 요소를 채웁니다. if(!res[i]) 조건은 해당 인덱스에 하위 배열이 아직 없을 때 새로운 빈 배열을 먼저 생성해 주는 역할을 합니다. 이 덕분에 존재하지 않는 인덱스에 값을 할당하려다 발생할 수 있는 오류를 방지할 수 있습니다.

더 간결한 대안: Array.from 활용

ES6의 Array.from() 메서드를 사용하면 위 로직을 한 줄로 표현할 수도 있습니다.

const constructArray = (row, col, val) =>
    Array.from({ length: row }, () => Array(col).fill(val));

console.log(constructArray(2, 3, 10));
// [ [ 10, 10, 10 ], [ 10, 10, 10 ] ]

Array.from({ length: row })로 행의 개수만큼 배열을 만들고, 각 행마다 Array(col).fill(val)로 초기값이 채워진 하위 배열을 생성하는 방식입니다. 단, 객체나 배열처럼 참조 타입인 값을 채울 때는 fill()이 같은 참조를 공유한다는 점에 유의해야 하며, 그런 경우 두 번째 인자로 콜백 함수를 전달해 매번 새로운 객체를 생성하는 것이 안전합니다.