프론트엔드/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
반응형