이차원 배열
✨다차원 배열?
다차원 배열이란 2차원 이상의 배열을 의미하며, 배열 요소로 또 다른 배열을 가지는 배열을 의미합니다.출처
자바스크립트에는 다차원 배열을 정의하는 문법이 존재하지 않는다. 그래서 배열에 배열을 중첩하여 다차원 배열과 유사한 기능을 구현할 수 있다.
형태
배열 안에 배열이 있는 형태
1
2
// 이차원 배열
[[a], [b], [c], [d]];
✅ 자바스크립트에서 이차원 배열 만드는 방법
Array.from() 또는 new Array()를 사용하면 간단히 만들 수 있다.
1. Array.from()
Array.from() mdn 문서
Array.from의 첫번째 인자로 세로(행)의 값, 두번째 인자로 콜백 함수를 사용하여 가로(열)의 값을 넣으면 된다.
1
Array.from("세로(행)의 값", () => "가로(열)의 값");
Eg. 가로가 10, 세로가 10인 이차원 배열을 만든다면,
1
const array = Array.from(Array(10), () => Array(10).fill(0));
1
2
3
4
5
6
7
8
9
10
11
12
13
// 결과
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
Eg. 가로가 3, 세로가 5인 이차원 배열을 만든다면,
1
const array = Array.from(Array(5), () => Array(3).fill(1));
1
2
3
4
5
6
7
8
// 결과
[
[1, 1, 1],
[1, 1, 1],
[1, 1, 1],
[1, 1, 1],
[1, 1, 1]
];
2. new Array()
new Array() mdn 문서
new Array는 새로운 배열을 만들 때 사용하는 메소드이다. Array의 인자로 length 값을 작성해야한다.
1
new Array("length 값");
💡이중 배열을 만들기 - for문
1
2
3
4
5
6
7
8
const rows = 5;
const cols = 3;
const array = new Array(rows); // 세로(행)에 대한 배열 생성
for (let i = 0; i < rows; i++) {
array[i] = new Array(cols); // 가로(열)에 대한 배열 생성
}
1
2
3
4
5
6
7
8
// 결과
[
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0],
[0, 0, 0]
];
💡이중 배열을 만들기 - map 사용
1
2
3
4
5
6
const rows = 3;
const cols = 4;
const array = new Array(rows).fill().map(() => new Array(cols).fill(0));
console.log(array);
1
2
3
4
5
6
// 결과
[
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
];
✅ 자바스크립트에서 이차원 배열 순회하는 방법
일반 배열처럼 행렬 또는 2차원 배열에서는 array[행][열]의 순서로 접근해야 한다.
1. 이중 for문 사용
1
2
3
4
5
6
7
8
9
10
11
const array = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (let i = 0; i < array.length; i++) {
for (let j = 0; j < array[i].length; j++) {
console.log(array[i][j]);
}
}
위의 코드에서 i는 세로(행)에 대한 반복이고, j는 가로(열)에 대한 반복이다.
2. forEach 사용
1
2
3
4
5
6
7
8
9
10
11
const array = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
array.forEach((row) => {
row.forEach((col) => {
console.log(col);
});
});
위의 코드에서 row는 세로(행)에 대한 반복이고, col는 가로(열)에 대한 반복이다.
3. map 사용
단순히 순회할 때에도 사용하지만, 이차원 배열 각 요소를 연산해야할 때 사용한다.
1
2
3
4
5
6
7
8
9
10
11
const array = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
array.map((row) => {
return row.map((col) => {
return col * 2; // 연산
});
});
위의 코드에서 row는 세로(행)에 대한 반복이고, col는 가로(열)에 대한 반복이다.
✅이차원 배열 사용할 때 주의사항
이차원 배열을 복사해서 사용할 때는 깊은 복사를 사용해야 한다. 단순히 참조를 복사하는(얕은 복사)를 한다면, 원본 배열과 복사된 배열이 같은 요소를 참조하여 한쪽에서 변경하면 다른 쪽도 영향을 받는다.
💡얕은 복사
1
2
3
4
5
6
7
8
9
10
11
12
13
let original = [
[1, 2, 3],
[4, 5, 6]
];
// 얕은 복사
let shallowCopy = original.slice();
// 얕은 복사한 배열 변경
shallowCopy[0][0] = 9;
// 원본 배열 확인
console.log(original); // 출력: [[9, 2, 3], [4, 5, 6]]
콘솔 창에 출력된 값을 보면, 원본 배열도 변경된 것을 확인할 수 있다.
💡깊은 복사
깊은 복사를 할 때는 map과 스프레드 연산자(...)를 사용한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let original = [
[1, 2, 3],
[4, 5, 6]
];
// 깊은 복사
let deepCopy = original.map((innerArray) => [...innerArray]);
// 깊은 복사한 배열 변경
deepCopy[0][0] = 9;
// 배열 확인
console.log(original); // 출력: [[1, 2, 3], [4, 5, 6]]
console.log(deepCopy); // 출력: [[9, 2, 3], [4, 5, 6]]
콘솔창에 출력된 값을 보면 원본 배열은 변경되지 않고, 깊은 복사한 배열(값을 변경한 배열)만 변경된 것을 확인할 수 있다.
깊은 복사는 내부 배열까지 새로운 복사본을 만들어 원본 배열과 완전히 독립적인 새로운 배열을 생성하기 때문이다.