[forEach()] 배열을 반복하면서 작업을 수행하는 방법

728x90

forEach() 

자바스크립트에서 배열의 모든 요소를 반복하면서 어떤 작업(예: 출력, 변경, API 호출 등)을 수행할 때 가장 많이 사용되는 방법 중 하나가 바로 forEach()입니다. forEach()는 for, while 같은 전통적인 반복문보다 더 간결하고 선언적인 방식으로 코드를 작성할 수 있도록 해주며, 부수 효과(side effect)를 만들 때 매우 유용합니다.

이번 글에서는 forEach()의 개념부터 활용 예제, 자주 하는 실수까지 포괄적으로 다뤄보겠습니다.

 

---

1.  forEach()란?

forEach()는 배열의 각 요소에 대해 한 번씩 함수를 실행하는 배열의 내장 메서드입니다. 반환값은 없으며, 주로 출력, DOM 조작, 네트워크 호출 등 부수 효과를 위한 작업에 사용됩니다.

문법

arr.forEach(callback(currentValue[, index[, array]])[, thisArg])

• callback : 배열의 각 요소마다 실행할 함수
  • currentValue : 현재 처리 중인 요소
  • index (선택) : 현재 요소의 인덱스
  • array (선택) : forEach()가 호출된 배열
• thisArg (선택) : 콜백 내부에서 this로 사용할 값

기본 예제

const numbers = [1, 2, 3];

numbers.forEach(num => {
  console.log(num * 2);
});
// 출력: 2, 4, 6

주요 특징

• 모든 요소를 순차적으로 반복합니다.
• 중간에 멈출 수 없습니다. (break 또는 return으로 루프 중단 불가)
• 반환값이 없습니다. (undefined)
• 원본 배열을 변경하지 않지만 내부에서 수동 변경은 가능합니다.

언제 forEach()를 사용하면 좋을까?

• 각 요소마다 어떤 작업을 수행해야 할 때
• 반환값이 필요 없는 작업 (출력, DOM 조작, 통계 수집 등)
• 간단한 반복이 필요한 상황에서 for 루프보다 선언적으로 표현하고 싶을 때

 

---

2.  실전 예제

a.  배열 요소를 콘솔에 출력하기

const colors = ["red", "green", "blue"];

colors.forEach((color, index) => {
  console.log(`${index + 1}: ${color}`);
});

b.  DOM 요소에 클래스 추가

const buttons = document.querySelectorAll("button");

buttons.forEach(button => {
  button.classList.add("active");
});

c.  총합 계산 (비추 예시)

let total = 0;
[1, 2, 3].forEach(num => {
  total += num;
});
console.log(total); // 6

• 하지만 이 경우엔 reduce() 를 사용하는 것이 더 함수형이고 안전합니다.

 

---

3.  forEach() 와 다른 반복 메서드 비교

메서드	반환값	사용 목적	중간 중단 가능?	부수 효과 목적에 적합?
forEach()	없음 (undefined)	모든 요소 순회 (부수 효과)	❌	✅
map()	새로운 배열	데이터 변형	❌	⛔ (목적이 다름)
filter()	조건에 맞는 배열	요소 필터링	❌	⛔
for 루프	없음	유연한 반복	✅	✅

forEach() vs for 루프

항목	forEach()	for 루프
문법	함수형, 간결함	전통적인 절차형 문법
반복 중단	❌ break, continue 사용 불가	✅ 자유롭게 break, continue 사용 가능
비동기/await 지원	❌ await 비동기 흐름 제어 불가	✅ async/await 자연스럽게 사용 가능
반환값	없음 (undefined)	없음, 원한다면 직접 수집 가능
가독성	간단한 반복에 유리	복잡한 조건이나 흐름 제어에 유리
사용 목적	모든 요소에 대해 작업 수행 (side effect)	유연한 반복 제어가 필요한 상황

 

---

4.  자주 하는 실수와 주의할 점

a.  return으로 루프를 멈출 수 없음

[1, 2, 3].forEach(num => {
  if (num === 2) return; // 루프 멈추지 않음
  console.log(num);
});
// 출력: 1, 3 (❌ 예상과 다름 — actually 출력: 1, 3)

• return 은 현재 반복만 건너뛰고 다음 반복을 계속합니다.
• 해결 방법으로는 for 루프 또는 some(), every() 사용합니다.

b.  async/await와 함께 사용할 때의 문제

// ❌ 의도대로 작동하지 않음
const fetchItems = async () => {
  const ids = [1, 2, 3];
  ids.forEach(async id => {
    const data = await fetch(`/api/item/${id}`);
    console.log(await data.json());
  });
};

• forEach()는 await를 기다리지 않습니다.
• 해결 방법으로는 for...of 루프 사용합니다.

해결 방법 :

const fetchItems = async () => {
  const ids = [1, 2, 3];
  for (const id of ids) {
    const res = await fetch(`/api/item/${id}`);
    console.log(await res.json());
  }
};

 

---

5.  마무리

• forEach() 는 배열의 모든 요소를 하나씩 순차적으로 처리하는 메서드입니다.
• 반환값은 없으며, 주로 부수 효과를 위한 작업에 사용됩니다.
• 반복을 중단할 수 없고, await 와 함께 사용할 때 주의가 필요합니다.
• 데이터 변형이나 필터링 작업에는 map() 이나 filter() 가 더 적합합니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Array.prototype.forEach()

 

---

반응형