[JavaScript] Array.from()을 사용하여 2차원 배열 만들기

자바스크립트에는 딱 2차원 배열이라는 개념이 없다. 즉,  let arr = [][]; 와 같은 선언이 불가능하다. 그래서 배열 안에 배열을 중첩하는 식으로 2차원 배열을 비슷하게 만들어줘야 한다. 이때 Array.from() 이라는 메서드를 사용한다. 이 메서드는 문자열, set, map, 배열 등의 각 요소를 얕게 복사하여 새로운 배열을 만들어주는 역할을 한다. 예를 들면 아래와 같이 동작한다.

console.log(Array.from('apple'));
// [ 'a', 'p', 'p', 'l', 'e' ]

console.log(Array.from(new Set(['foo', 2])));
// [ 'foo', 2 ]

 

from의 두 번째 인자에는 콜백 함수를 옵션으로 넣을 수 있다. 이 콜백 함수는 각 요소에 대하여 동작한다.

console.log(Array.from([1, 2, 3], x => x + x));
// [ 2, 4, 6 ]

 

이러한 점을 활용하여 배열의 각 요소에 대해 배열을 추가해주면 2차원 배열을 만들 수 있다.

// 3 x 4 배열 만들기
let arr = Array.from(Array(3),()=>Array(4).fill(2)); // 길이가 3인 배열의 각 요소에 대해 길이가 4인 배열로 설정함
console.log(arr);
// [ [ 2, 2, 2, 2 ], 
//   [ 2, 2, 2, 2 ], 
//   [ 2, 2, 2, 2 ] ]