JavaScript forEach() 정리

JavaScript forEach() 완벽 정리

forEach()는 JavaScript에서 배열을 순회하며 각 요소에 대해 특정 작업을 수행할 때 사용하는 메서드입니다.
for 문보다 간결하고 가독성이 좋아서 많이 사용됩니다.

기본 문법

array.forEach(function(요소, 인덱스, 배열) {
  // 실행할 코드
});

매개변수 설명

• 요소(element): 현재 처리 중인 배열의 값
• 인덱스(index): 현재 요소의 인덱스(위치)
• 배열(array): forEach가 호출된 원본 배열

간단한 예제

const fruits = ['사과', '바나나', '포도'];

fruits.forEach(function(item) {
  console.log(item);
});

출력 결과

사과
바나나
포도

화살표 함수로 간단하게

const fruits = ['사과', '바나나', '포도'];

fruits.forEach(item => console.log(item));

function 키워드를 생략하고 간단하게 표현할 수 있습니다.

인덱스와 함께 사용하기

const fruits = ['사과', '바나나', '포도'];

fruits.forEach((item, index) => {
  console.log(`${index + 1}번째 과일: ${item}`);
});

출력 결과

1번째 과일: 사과
2번째 과일: 바나나
3번째 과일: 포도

주의할 점

1. break나 return으로 중단할 수 없습니다.
   forEach()는 모든 요소를 끝까지 실행합니다.
   중간에 멈추고 싶다면 for, for...of, some(), every()를 사용하세요.
2. 비동기 함수와 함께 쓸 때 주의해야 합니다.
   forEach() 내부의 await는 예상대로 작동하지 않습니다.
   비동기 처리가 필요할 때는 for...of 문을 사용하는 것이 좋습니다.

응용 예시

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

numbers.forEach(num => {
  sum += num;
});

console.log('총합:', sum);

출력 결과

총합: 15

요약

구분                                                내용

메서드	array.forEach(callback)
주요 매개변수	요소, 인덱스, 배열
중단 가능 여부	❌ 불가능
반환값	없음 (undefined)
사용 목적	배열의 각 요소를 순회하며 특정 작업 수행

결론

forEach()는 간단한 반복 작업에 적합한 메서드로, 코드 가독성을 높이고 에러를 줄일 수 있습니다.
단, 반복 중 중단이 필요하거나 비동기 작업을 해야 할 경우에는 다른 반복문을 사용하는 것이 좋습니다.