이번 튜토리얼에서는 세 개의 인수를 받아 조건에 맞는 새로운 2차원 배열을 반환하는 JavaScript 함수를 작성해 보겠습니다.
- height → 배열의 행(row) 개수
- width → 배열의 열(column) 개수
- val → 배열의 각 요소에 채워질 초기값
함수는 이 세 가지 기준에 따라 구성된 새로운 배열을 반환해야 합니다.
예제 코드
const rows = 4, cols = 5, val = 'Example';
const fillArray = (width, height, value) => {
const arr = Array.apply(null, { length: height }).map(el => {
return Array.apply(null, { length: width }).map(element => {
return value;
});
});
return arr;
};
console.log(fillArray(cols, rows, val));
실행 결과
콘솔에 출력되는 결과는 다음과 같습니다.
[
[ 'Example', 'Example', 'Example', 'Example', 'Example' ],
[ 'Example', 'Example', 'Example', 'Example', 'Example' ],
[ 'Example', 'Example', 'Example', 'Example', 'Example' ],
[ 'Example', 'Example', 'Example', 'Example', 'Example' ]
]
코드 동작 원리
Array.apply(null, { length: n })은 길이가 n인 배열을 생성하면서 실제로 순회 가능한 요소 슬롯을 만들어 줍니다. 단순히 new Array(n)으로 배열을 만들면 내부가 비어 있는 희소 배열(sparse array)이 되어 map() 메서드가 실행되지 않으므로 주의해야 합니다.
즉, 바깥쪽 map()이 행(row)을 생성하고, 안쪽 map()이 각 행마다 width개의 열(column)을 지정한 초기값으로 채우는 구조입니다.
더 간결한 대안: Array.from()
ES6 이상 환경에서는 Array.from()을 사용하면 동일한 결과를 훨씬 직관적인 코드로 얻을 수 있습니다.
const fillArray = (width, height, value) =>
Array.from({ length: height }, () =>
Array.from({ length: width }, () => value)
);
두 방법 모두 같은 2차원 배열을 생성하지만, Array.from() 방식이 가독성과 유지보수 측면에서 더 권장됩니다.