ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [Javascript] 2차원 배열 만들기(Array.from())
    Front-End(Web)/Javascript 2021. 1. 3. 16:56
    반응형

    미니 프로젝트를 진행하며, 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 문 등을 적용할 수 있을 것 같다.

    반응형
Designed by Tistory.