[Javascript] 2차원 배열 만들기(Array.from())

미니 프로젝트를 진행하며, 100개의 정보를 10개씩 2차원 배열의 형태로 가공해야하는 문제가 있었다.

물론 이중 for문을 돌리면 심플하게 구현할 순 있지만, state로 활용했을 때 [] => 2차원 배열 업로드 전 초기화에서 문제가 있었다.

(0번째 인덱스 배열을 초기값으로 쓰려고 했으나, default는 [] 1차원 배열이기에 에러 처리가 되었다.)

 

정답과 비교해보니, Array.from() 이라는 메서드를 활용하기도 해서 2차원 배열에 대한 고찰을 적어내려 가보고자 한다.

---

🧑‍💻 2차원 배열 만들기

1. 2중 for문 : 가장 직시적인 형태, row 및 columns 길이만큼 각각 반복하며 요소들을 push 한다.

function get2DArray(r, c) {
  const result = [];
  for (let i = 0 ; i < r ; i++) {
    const temp = [];
    for (let j = 0 ; j < c ; j++) {
      temp.push(0);
    }
    result.push(temp);
  }
  return result;
}

행(r), 열(c) 값을 받아 모든 요소가 0으로 채워진 2차원 배열을 반환하는 함수이다.

코드의 길이도 길 뿐더러, 프로젝트처럼 100개의 데이터를 저장하려면 push(data[10*i + j]) 구현하듯 다소 난해한 로직임을 볼 수 있다.

 

2. new Array : for문과 큰 차이는 없다. 요소가 없는 빈 배열을 만들기에 적합하다고 생각

const result = new Array(10);	// [ , , , , , , , , , , ]
for (let val of result) {
  val = new Array(10);
}

 

- fill() 메서드

이는, fill() 메서드를 활용해 좀 더 쉽게 작성될 수 있다. 문법은 최하단처럼, 채워넣을 값과 더불어 Optional 하게 인덱스도 지정가능

const result = new Array(10).fill(new Array(10));

Array.fill(value, [str_index], [end_index]);

 

3. Array.from() : 배열의 각 요소를 순회하며 값을 할당한다. 콜백함수를 통해 값의 세부적인 설정이 가능하다는 장점

const paginate = (followers) => {
  const itemsPerPage = 10
  const numberOfPages = Math.ceil(followers.length / itemsPerPage)

  const newFollowers = Array.from({ length: numberOfPages }, (_, index) => {
    const start = index * itemsPerPage
    return followers.slice(start, start + itemsPerPage)
  })

  return newFollowers
}

 

- from() 메서드

Array.prototype.from(arr, [callback function]);

해당 예제를 탐구하면서, from() 메소드에 대한 문법을 확인할 수 있었다.

• 첫 번째 인자는 빈 배열의 길이를 설정했다. new Array(itemsPerPage) 와 같은 의미라고 볼 수 있겠다.
• 두 번째 인자는 콜백함수를 받는다. '_' 는 element 이나, 현재는 인자배열이 없기에 필요성이 없으므로 위같이 표기한 것 같다.

const arr = Array.from(Array(10), () => new Array(10))

 

다른 예제를 참고하면, from() 은 값이 있는 배열도 받을 수 있다. 콜백함수를 적용하는게 map() 메서드와 유사하게 설계가 가능하다.

const arr = [1, 2, 3];

arr.map(ele => ele * 2)				// [2, 4, 6]
Array.from(arr, (ele) => {ele * 2})		// [2, 4, 6]

---

🧑‍💻 2차원 배열 접근

기본적으로는, rows / columns 좌표값으로 접근하는 방법을 차용한다. 혹은, 반복문을 사용해 모든 요소를 순회할 수 있겠다.

let arr2D = new Array(3).fill(new Array(3).fill(0));

arr2D[1][2] = 1;
arr2D[2][0] = 2;

//
[0, 0, 0]
[0, 0, 1]
[2, 0, 0]

이처럼, 좌표값은 array[row_index][col_index] 를 사용하며, 좌표(셀)의 x값, y값에 빗대어 이해하면 쉽겠다.

순회를 할 때는, 마찬가지로 length 값을 이용한 for문, 나아가서는 for -  in 문 등을 적용할 수 있을 것 같다.