[javascript] 다차원 배열 만드는 3가지 방법

자바스크립트를 사용한다면 배열을 많이 사용한다. 

하지만, 다차원 배열을 생성하려면 잠깐 머뭇거리기 마련이다.

그 머뭇거림을 해결해보고자 이 포스팅을 작성한다.  

우선,

2차원 배열은 배열로 이루어진 배열이다. 

3차원은 배열로 이루어진 배열의 배열이다. 

4차원은 배열로 이루어진 배열의......

다차원 배열의 의미는 다들 알고 있을테니,

말장난은 그만하고 대표적으로 2차원 배열을 만들어보자

(다차원 배열의 의미를 모른다면 다른 글을 참고하자. 이 글에서는 설명해주지 않는다.)

1. 배열 직접 선언

배열 기호나 Array를 이용해서 미리 선언하여 사용하는 방법이다.

다음 코드를 보자

const array = [[], []];
array[0][0] = 1;
array[0][1] = 2;
array[1][0] = 3;
array[1][1] = 4;
console.log(array);   //[[1,2],[3,4]]

배열 기호를 통해 다차원 배열을 선언한다. Array를 이용한 선언도 마찬가지다.

const array = Array(Array(), Array());
array[0][0] = 1;
array[0][1] = 2;
array[1][0] = 3;
array[1][1] = 4;
console.log(array);   //[[1,2],[3,4]]

사실, 첫번째와 같은 것이다. 배열 메소드 push로도 값을 추가해줘도 된다.

const array = Array(Array(), Array());
array[0].push(1);
array[0].push(2);
array[1].push(3);
array[1].push(4);
console.log(array);   //[[1,2],[3,4]]

물론 값을 나중에 할당하지 않고 배열을 선언할 때 값을 할당해도 된다.

const array = Array(Array(1,2), Array(3,4));
console.log(array);   //[[1,2],[3,4]]

2. Array.map 활용 

만약, 배열안에 100개의 배열을 1번과 같이 선언하려면 언제 100개를 선언하고 있을 것인가.

map 메소드를 이용해서 간단하게 다차원 배열을 선언하자.

const array = Array(4).fill(null).map(() => Array());
console.log(array);    //[[],[],[],[]]

원하는 크기의 배열을 생성하고 fill 함수를 이용해서 null로 초기 값을 할당해준다.

null로 할당하지 않는다면 map 함수가 실행되지 않을 것이다.

그리고 map 함수를 이용해서 각 배열 요소를 빈 배열로 재선언 해주면 원하는 크기의 다차원 배열로 사용할 수 있다.

물론, map 함수를 통해 원하는 값으로 return 하여 배열을 선언 할 수도 있다. (위 코드에서는 arrow function 사용했다.)

위의 코드에서는 4개 크기의 배열을 선언하였으니 4개의 배열을 가진 다차원 배열이 생성됐다.

사용법은 1번을 참고하자.

3. Array.from 활용

2번에서 map을 통해 다차원 배열을 만들었다면 2번을 응용해서 Array.from 함수를 통해 다차원 배열을 만들어 보자.

Array.from은 ES6에서 정의한 문법이다.

const array = Array.from(Array(4), () => Array());
console.log(array);    //[[],[],[],[]]

Array.from은 배열 혹은 유사한 배열을 배열로 변환해주는 역할을 한다.

첫번째 요소로는 유사한 배열을 받고, 두번째 요소로는 map함수와 동일하게 배열 각 요소에 적용할 함수를 받는다.

위 코드를 실행하면 2번과 동일한 결과를 받을 수 있다.

이 외에도 for, forEach 등 을 사용해서 다차원 배열을 선언할 수 있다. 개발자 취향대로 사용하면 되겠다.