Array Iteration (배열 반복)

 

🟨 Array Iteration

배열(Array)의 모든 요소를 하나씩 꺼내어 순서대로 처리할 때 사용하는 반복 방식이다.

 

🟣 for 문 (전통 방식)

인덱스를 직접 사용해서 배열을 순회하는 가장 기본적인 방법.

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

• 특징: 인덱스(i)를 직접 관리하며, 가장 기본적이고 모든 상황에서 사용 가능하다.
• 장점: break, continue 모두 가능하다.
• 구조:
  • arr.length: 배열의 전체 길이(요소 개수)를 반환한다.
  • arr[i]: 현재 인덱스에 해당하는 요소를 가져온다.
  • i++: 다음 요소로 이동한다.

👉 배열의 길이를 직접 숫자로 작성하지 않고 length를 사용하면 요소가 추가되거나 삭제되어도 코드를 수정할 필요가 없다.

 

🟣 for...of 문 (가장 깔끔한 반복문)

배열의 값을 직접 꺼내서 반복하는 방식.

for (const item of arr) {
  console.log(item);
}

• 특징: 인덱스(i)를 직접 다루지 않고 값 자체를 가져오기 때문에 코드가 더 간결하다.
• 장점: break, continue, return 등을 사용하여 반복을 제어할 수 있다.

 

🟣 forEach()

배열의 각 요소에 대해 지정한 콜백 함수를 실행하는, 배열 전용 반복 메서드.

arr.forEach((item, index) => {
  console.log(item, index);
});

• 특징: 배열의 각 요소를 처음부터 끝까지 순서대로 순회한다.
• 구성: 콜백 함수의 매개변수로 첫 번째는 값(item), 두 번째는 인덱스(i)를 받을 수 있다.
• 주의: break, continue를 사용할 수 없으며, 항상 끝까지 모든 요소를 순회하므로 중간에 멈출 수 없다.

 

 

📍 POINT 📍

✔️ 단순히 배열 값을 읽을 때는 for...of가 가장 깔끔하다. ✔️

✔️ 값 + 인덱스가 필요하면 forEach가 유용하다. ✔️

✔️ 현대 JS에서는 for...of, forEach를 많이 사용한다. ✔️

 

 

📋 전통적 for vs for...of vs forEach 📋

구분	일반 for	for...of	forEach
가독성	낮음	높음	높음
인덱스 접근	직접 관리	어려움	쉬움
중단 가능성	가능	가능	불가능
사용 대상	모든 반복	반복 가능한 객체	배열

 

---

 

⚙️ 실전 예제 코드 ⚙️

const scores = [85, 42, 98, 60, 77];
const passingScores = [];

// 점수 목록에서 하나씩 꺼내어 검사합니다.
for (const score of scores) {
    if (score >= 70) {
        passingScores.push(score);
    }
}

console.log("합격자 점수 목록:", passingScores); // [85, 98, 77]

// forEach를 사용한 합계 계산
let total = 0;
scores.forEach(s => total += s);
console.log("평균 점수:", total / scores.length);