forEach 메서드는 JavaScript 배열(Array)에서 각 요소에 대해 한 번씩 제공된 함수를 호출하는 메서드입니다. 이 메서드는 주어진 함수를 배열 요소 각각에 대해 실행하며, 배열의 각 요소를 순회할 때 유용합니다. forEach는 배열을 변경하지 않으며, 콜백 함수의 반환값을 모으지도 않습니다.

문법

array.forEach(function(currentValue, index, array) {
  // 실행할 코드
}, thisArg);

• currentValue: 처리할 현재 요소.
• index (선택 사항): 처리할 현재 요소의 인덱스.
• array (선택 사항): forEach를 호출한 배열.
• thisArg (선택 사항): 콜백을 실행할 때 this로 사용할 값.

예제

기본 사용 예

let fruits = ['Apple', 'Banana', 'Orange'];

fruits.forEach(function(fruit, index) {
  console.log(`${index + 1}. ${fruit}`);
});

출력:

1. Apple
2. Banana
3. Orange

화살표 함수 사용

let fruits = ['Apple', 'Banana', 'Orange'];

fruits.forEach((fruit, index) => {
  console.log(`${index + 1}. ${fruit}`);
});

출력은 동일합니다.

thisArg 사용 예

function Counter() {
  this.count = 0;
  let self = this;
  this.add = function(arr) {
    arr.forEach(function() {
      self.count++;
    });
  };
}

let counter = new Counter();
counter.add([1, 2, 3, 4]);
console.log(counter.count); // 4

thisArg를 사용하여 this의 값을 변경할 수 있습니다.

function Counter() {
  this.count = 0;
  this.add = function(arr) {
    arr.forEach(function() {
      this.count++;
    }, this); // thisArg를 전달
  };
}

let counter = new Counter();
counter.add([1, 2, 3, 4]);
console.log(counter.count); // 4

주의사항

1. 반환 값 없음: forEach는 항상 undefined를 반환합니다. 따라서 메서드 체이닝이 불가능합니다.
2. 중단 불가능: forEach는 루프를 중단할 수 없습니다. break나 continue문을 사용할 수 없으며, 루프를 중단하려면 for 루프나 every, some 메서드를 사용해야 합니다.
3. 비동기 처리: forEach 내에서 비동기 코드를 사용하더라도 forEach는 비동기 처리를 기다리지 않습니다.

예제: 비동기 처리

let fruits = ['Apple', 'Banana', 'Orange'];

fruits.forEach(async (fruit) => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log(fruit);
});

console.log('Done!');

위 예제는 각 과일을 1초마다 출력하는 것을 의도했지만, 실제로는 forEach가 비동기 처리를 기다리지 않으므로 Done!이 먼저 출력됩니다.

요약

• forEach는 배열의 각 요소에 대해 한 번씩 제공된 함수를 호출합니다.
• 콜백 함수는 currentValue, index, array의 세 가지 인수를 받을 수 있습니다.
• forEach는 배열을 변경하지 않으며, 루프를 중단할 수 없습니다.
• 비동기 코드를 처리할 때 주의가 필요합니다.