-
[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 문 등을 적용할 수 있을 것 같다.
반응형'Front-End(Web) > Javascript' 카테고리의 다른 글
[Javascript] 비동기 - #2. Promise (0) 2021.02.01 [Javascript] 비동기 - #1. 비동기 개념과 Callback Function (1) 2021.01.30 [Javascript] Iteration Protocol (0) 2020.12.17 [Javascript] Class(클래스) 기본 (0) 2020.12.16 [Javascript] 제어문 - 반복문 (0) 2020.11.29