[Javascript] 2차원 배열 만들기 + 2차원 배열 순회

 

 

1.  2차원 배열을 순회하는 함수

// 반복문 이용
function traverse2dArray(arr, ROW, COLUMN) {
  for (let i = 0; i < ROW; i++) {
    let row = "";

    for (let j = 0; j < COLUMN; j++) {
      row += arr[i][j] + " ";
    }

    console.log(row);
  }
}

// forEach 이용
function traverse2dArray2(arr) {
  arr.forEach((rowArray) => {
    let row = "";

    rowArray.forEach((column) => {
      row += column + " ";
    });

    console.log(row);
  });
}

 

2가지 버전을 구현해봤습니다.

하나는 반복문을 이용해서 2차원 배열을 순회하고,

다른 하나는 forEach를 이용해서 2차원 배열을 순회합니다.

 

 

 

2.  초기값을 이용하기

2-1.  배열에 초기값 전달

이번 포스팅에서는 4X3 2차원 배열을 만들어보도록 하겠습니다.

const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [10, 11, 12],
];

 

 

2-2.  Array 생성자에 초기값 전달

const arr2 = new Array([1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]);

 

 

const params = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [10, 11, 12],
];

const noGoodArr2 = new Array(...params);

사실 위의 코드는 params만으로 2차원 배열을 선언한 건데, 재미로만 봐주세요 ㅎㅎ

 

 

 

2-1,  2-2의 코드를 2차원 배열 순회해보기

const ROW = 4;
const COLUMN = 3;

// 2-1
const arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
  [10, 11, 12],
];

// 두 개의 순회 함수 중 하나를 이용
// traverse2dArray(arr, ROW, COLUMN);
traverse2dArray2(arr);

// 2-2
const arr2 = new Array([1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]);

// traverse2dArray(arr2, ROW, COLUMN);
traverse2dArray2(arr);

 

2차원 배열 출력 결과

2차원 배열 순회함수를 실행한 결과입니다.

 

 

 

 

반응형

 

 

 

 

3.  Array 생성자 + 반복문 사용

초기값을 전달하지 않고, 2차원 배열을 만들어볼 건데요.

4X3 배열에 null 값이 들어가도록 해보겠습니다.

 

const arr3 = new Array(ROW);

for (let i = 0; i < ROW; i++) {
  arr3[i] = new Array(COLUMN).fill(null);
}


// 2차원 배열 순회
// traverse2dArray(arr3, ROW, COLUMN);
traverse2dArray2(arr3);

 

 

 

4.  Array 생성자 + forEach 사용

const arr4 = new Array(ROW).fill(null);

arr4.forEach((_, idx) => {
  arr4[idx] = new Array(COLUMN).fill(null);
});


// 2차원 배열 순회
traverse2dArray(arr4, ROW, COLUMN);
// traverse2dArray2(arr4);

 

 

 

5.  Array.from + Array 생성자 사용

const arr5 = Array.from(new Array(ROW), (_) => new Array(COLUMN).fill(null));


// 2차원 배열 순회
traverse2dArray(arr5, ROW, COLUMN);
// traverse2dArray2(arr5);

 

 

 

 

3 ~ 5번으로 만든 2차원 배열 출력 결과

 

 

 

6.  샘플 코드

https://github.com/CheolWoongChoi/JS_2D_Array_Sample/blob/main/2d_array.ts