2025 / 01 / 17
오늘은 수업 시간에 2차원 배열을 배웠습니다. 평소에 배열도 어려워하는데 2차원 배열까지 들어가서 조금 어렵긴 했지만 그래도 괜찮은 것 같습니다!
배열을 배운 뒤에는 간단한 응용 문제와 함께 퀴즈 게임을 만들어보았습니다.
💌 2차원 배열
자바스크립트에서 2차원 배열은 배열의 배열로 생각할 수 있습니다.
1차원 배열 - 데이터를 일렬로 나열한 것
2차원 배열 - 데이터를 표처럼 행과 열로 구성된 형태로 저장할 수 있는 배열
1. 기본 구조
- 2차원 배열을 만들 때는 배열 안에 또 다른 배열을 넣습니다.
// 3개의 행과 2개의 열을 가진 배열 생성하기 let array = [ [1, 2] // 첫 번째 행 [3, 4] // 두 번째 행 [5, 6] // 세 번째 행 ];
- array는 3개의 배열을 포함하고 있고, 각 배열은 2개의 숫자를 가지고 있습니다.
2. 접근하기
- 배열의 인덱스를 두 번 사용합니다.
- 첫 번째 인덱스는 행을 두 번째 인덱스는 열을 의미합니다.
// 위 배열에서 숫자 3에 접근할 때 console.log(array[1][0]); // 출력 : 3
3. 값 추가
- 값을 추가할 때도 인덱스를 이용해서 값을 넣습니다.
array[0][2] = 7; // 첫 번째 행의 세 번째 열에 7을 넣음 console.log(array); // 출력: [ [ 1, 2, 7 ], [ 3, 4 ], [ 5, 6 ] ]
4. 배열 순회
- 2차원 배열의 값을 하나씩 확인하려면 for문을 사용합니다.
- 외부 for문은 행을 반복하고, 내부 for문은 각 행에 있는 열을 반복합니다.
for (let i = 0; i < arr.length; i++) { // 행 반복 for (let j = 0; j < arr[i].length; j++) { // 열 반복 console.log(arr[i][j]); // 각 값 출력 } }
5. 배열 만들기
- 배열을 동적으로 만들 때는 for문을 사용해 각 행을 만들어 넣을 수 있습니다.
let row = 3; let cols = 3; let array = []; for(let i = 0; i < row; i++){ array[i] = []; // 새로운 행을 추가 for(let j = 0; j < cols; j++){ array[i][j] = 0; // 각 열에 0을 넣음 } } console.log(array); // 출력: [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]
6. 구구단 만들기
- 2차원 배열을 이용해 구구단을 저장하고 출력하는 예제를 풀어보았습니다.
let gugu = []; for(let i = 2; i < 10; i ++){ gugu[i-2] = []; for(let j = 1; j < 10; j++){ gugu[i-2][j-1] = i + " * " + j + " = " + i * j; } } console.log(gugu);
💌 자주 하는 실수
- 2차원 배열을 생성할 때 배열 안에 배열을 넣지 않고, 다른 데이터 타입을 넣는 것
- 배열의 인덱스를 잘못 사용하면 undefined 값이 나올 수 있음.
- 배열의 길이를 동적으로 변경하면서 잘못된 인덱스를 참조할 가능성이 있음.
- 인덱스 번호는 0부터 시작!!
💌 실습 예제(1)
- 1, 2, 3, 4, 5, 6, 7, 8, 9를 3개씩 2차원 배열을 만든다.
- 1 ~ 9 까지의 숫자를 입력 받는다.
- 입력 받은 숫자의 위치(인덱스)를 나타낸다.
- 출력 값 : 1의 위치는 [0,0]입니다.
- 저는 2가지 방법으로 풀었습니다.
1. 2차원 배열 생성
- 1, 2, 3, 4, 5, 6, 7, 8, 9를 3개씩 2차원 배열을 만든다.
const Num1 = [1, 2, 3]; const Num2 = [4, 5, 6]; const Num3 = [7, 8, 9]; const number = [Num1, Num2, Num3];
2. 입력 받기
- 1 ~ 9 까지의 숫자를 입력 받는다.
let A = Number(prompt("숫자를 입력해주세요! [1 ~ 9]"));
3. 인덱스 위치 받기
- 입력 받은 숫자의 위치(인덱스)를 나타낸다.
- 출력 값 - 1의 위치는 [0,0]입니다.
3-1. switch문 사용
- 입력 받는 값마다 case를 작성해서 해당 위치를 받아오는 방법입니다.
switch(A){
case 1:
document.write(`${A}의 위치는 [0][0]`);
break;
case 2 :
document.write(`${A}의 위치는 [0][1]`);
break;
case 3 :
document.write(`${A}의 위치는 [0][2]`);
break;
case 4:
document.write(`${A}의 위치는 [1][0]`);
break;
case 5:
document.write(`${A}의 위치는 [1][1]`);
break;
case 6:
document.write(`${A}의 위치는 [1][2]`);
break;
case 7:
document.write(`${A}의 위치는 [2][0]`);
break;
case 8:
document.write(`${A}의 위치는 [2][1]`);
break;
case 9:
document.write(`${A}의 위치는 [2][2]`);
break;
default:
document.write(`다시입력해주세요!`);
}3-2. indexOf( ) 사용
- for문으로 배열 number의 길이만큼 반복을 해줍니다.
- indexOf( )로 해당 배열에 값이 있는지 확인하고 인덱스를 반환하는 방법입니다.
- indexOf( )는 값이 없을 경우 -1을 반환하기 때문에 예외 처리를 해줍니다.
for (let i = 0; i < number.length; i++) {
let index = number[i].indexOf(A);
if (index !== -1) {
document.write(`${A}의 위치는 [${i}][${index}]`);
break;
}
}3-3. for문 사용
- 친구가 작성한 코드인데 좋은 것 같아서 가져왔습니다!
- for문으로 배열 number의 길이만큼 반복을 해줍니다.
- 중첩 for문으로 배열 안에 있는 배열도 길이만큼 반복합니다.
- i와 j를 인덱스 값 형태로 그 자리에 있는 값을 찾아옵니다.
- 찾아온 값이 입력 받은 값과 일치하는지 확인 후 출력합니다.
for (let i = 0; i < number.length; i++) {
for (let j = 0; j < number[i].length; j++) {
if (number[i][j] === A) {
document.write(`<br> ${A}의 위치는 -> [${i}][${j}]`);
}
}
}by. 여니의 일기장
💌 실습 예제(2)
지도 x 마크 찍기
- 지도에 위치 좌표를 받아 X마크를 찍는 프로그램을 만드려고 합니다.
- map이라는 2차원 배열이 있습니다.(3x3 배열)
- 지도는 숫자와 글자로 좌표를 확인할 수 있습니다.
- 힌트 - 글자와 숫자 각각의 index를 구해야 합니다.
- 예상 입력과 출력
1. 위치 입력 받기
- 사용자에게 탐험할 위치를 입력 받습니다.
- 첫 번째로 받는 값은 A / B / C , 두 번째로 받는 값은 1 / 2 / 3 입니다.
- 편의성을 위해 toLowerCase()를 사용해서 입력 받은 값은 소문자화 해줍니다.
let position1 = prompt("탐험할 위치를 골라주세요.").toLowerCase(); let position2 = prompt("탐험할 위치를 골라주세요.");
2. map 배열 생성
- 각 라인을 담은 map이라는 2차원 배열을 생성합니다.
- map은 3x3 배열입니다.
const line1 = ["o", "o", "o"]; const line2 = ["o", "o", "o"]; const line3 = ["o", "o", "o"]; const map = [line1, line2, line3];
3. 위치 표시
- 사용자에게 입력 받은 값에 따라 X를 표시할 조건을 작성합니다.
- 저는 else if를 사용하였습니다.
- 해당 문제의 규칙을 보면 A구역은 뒷자리 인덱스가 0, B구역은 1, C구역은 2로 반복되는 것을 보실 수 있습니다.
처음 작성한 코드
if(position1 === "a" && position2 === "1"){
map[0][0] = "x";
}else if(position1 === "a" && position2 === "2"){
map[1][0] = "x";
}else if(position1 === "a" && position2 === "3"){
map[2][0] = "x";}else if(position1 === "b" && position2 === "1"){
map[0][1] = "x";
}else if(position1 === "b" && position2 === "2"){
map[1][1] = "x";
}else if(position1 === "b" && position2 === "3"){
map[2][1] = "x";}else if(position1 === "c" && position2 === "1"){
map[0][2] = "x";
}else if(position1 === "c" && position2 === "2"){
map[1][2] = "x";
}else if(position1 === "c" && position2 === "3"){
map[2][2] = "x"; }else{
document.write("틀렸어요.");
}규칙을 찾고 리펙토링을 진행한 코드
if(position1 == "a"){
map[position2 - 1][0] = "x"
}else if(position1 == "b"){
map[position2 - 1][1] = "x"
}else if(position1 == "c"){
map[position2 - 1][2] = "x"
}else{
document.write("틀렸어요.");
}4. 출력하기
- 값을 출력해줍니다.
document.write(`${line1}<br>${line2}<br>${line3}`);
12일차 후기
- 2차원 배열을 이렇게 직접적으로 다뤄본적이 별로 없어서 그런지 좀 헷갈렸다.
- 여전히 인덱스 번호가 0부터 시작하는 것을 까먹고 1부터 작성했다가 에러를 띄웠다.
- 사람은 같은 실수를 반복한다고는 하지만.. 나는 바보인가..?? 이게 맞나..??
- 그래도 스스로 문제점을 찾고 해결해서 원하는 결과를 얻었다!!
- 배열은 익숙하지 않지만.. 곧 익숙해질 수 있겠지? 화이팅~ (｡˃ ᵕ ˂ )b
૮꒰ ྀི〃´꒳`〃꒱ა