프론트엔드/JavaScript
배열과 반복문
Ryuzy
2025. 4. 10. 17:56
728x90
반응형
1. 배열과 반복문
배열은 값이 여러 개 들어있기 때문에, 각 요소를 하나씩 꺼내서 어떤 작업을 하고 싶을 때 반복문이 필요합니다.
1. for 반복문
let fruits = ["사과", "바나나", "오렌지"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
- 배열 길이만큼 반복 (fruits.length)
- i가 배열의 인덱스 역할
- 배열 요소를 직접 조작하고 싶을 때 유용
2. for...of 반복문
ES6부터 나온 문법으로, 배열 요소 자체에 바로 접근할 수 있어 더 간단하고 직관적입니다.
let fruits = ["사과", "바나나", "오렌지"];
for (let fruit of fruits) {
console.log(fruit);
}
- 인덱스가 필요 없을 때 간단하게 반복 가능
- 배열 요소를 하나씩 꺼내서 바로 사용
3. forEach() 메서드
배열이 가진 내장 메서드 중 하나로, 함수형 스타일로 배열을 반복할 수 있습니다.
let fruits = ["사과", "바나나", "오렌지"];
fruits.forEach(function(fruit, index) {
console.log(`${index}번째 과일: ${fruit}`);
});
- 배열 요소를 하나씩 순서대로 꺼내서 콜백 함수에 전달
- 인덱스도 같이 받을 수 있음
- break, continue 사용은 불가 (중간 탈출은 안 됨)
let names = ["김사과", "반하나", "오렌지"];
// for문
for (let i = 0; i < names.length; i++) {
console.log(names[i]);
}
// for...of
for (let name of names) {
console.log(name);
}
// forEach
names.forEach(function(name) {
console.log(name);
});
2. 이차원 배열
이차원 배열은 배열 안에 또 다른 배열이 들어있는 구조입니다.
쉽게 말하면, 행(row)과 열(column)을 가진 표 형태의 데이터를 표현할 수 있는 배열입니다.
1. 이차원 배열 생성
let matrix = [
[1, 2, 3], // 0번째 행
[4, 5, 6], // 1번째 행
[7, 8, 9] // 2번째 행
];
2. 이차원 배열 접근
이차원 배열은 배열[행 인덱스][열 인덱스]처럼 두 번 인덱싱해서 값을 꺼냅니다.
console.log(matrix[0][0]); // 1
console.log(matrix[1][2]); // 6
console.log(matrix[2][1]); // 8
3. 이차원 배열 반복
중첩된 반복문을 사용해서 행과 열을 하나씩 꺼낼 수 있습니다.
for (let i = 0; i < matrix.length; i++) {
for (let j = 0; j < matrix[i].length; j++) {
console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
}
}
let menuBoard = [
["🍔 불고기버거", "🍟 감자튀김", "🥤 콜라"],
["🍔 치즈버거", "🌭 핫도그", "🍹 사이다"],
["🍔 새우버거", "🍗 치킨너겟", "🍵 녹차"],
];
// 메뉴판 출력
for (let row = 0; row < menuBoard.length; row++) {
let line = "";
for (let col = 0; col < menuBoard[row].length; col++) {
line += menuBoard[row][col] + "\t";
}
console.log(line);
}
3. 다차원 배열이란?
이차원 배열보다 더 깊게 중첩된 배열을 말합니다. 예를 들어 3차원 배열은 배열 안에 배열이 있고, 그 안에 또 배열이 있는 구조입니다.
let cube = [
[ [1, 2], [3, 4] ],
[ [5, 6], [7, 8] ]
];
console.log(cube[1][0][1]); // 6
- 1번째 묶음 → [ [5, 6], [7, 8] ]
- 그 안의 0번째 → [5, 6]
- 그 안의 1번째 → 6
728x90
반응형