JavaScript 순회하자 forEach()로

forEach()

순회 메서드

→ 배열의 각 요소에 대해 callbackFn 함수를 오름차순 인덱스 순서로 한 번씩 호출

→ map()과 달리 forEach()는 항상 undefined를 반환하므로 체이닝 불가

→ 값이 할당된 배열 인덱스에 대해서만 호출

 const array1 = ['a', 'b', 'c'];
 
 array1.forEach((element) => console.log(element));
 
 // Expected output: "a"
 // Expected output: "b"
 // Expected output: "c"

구조

  forEach(callbackFn)
  forEach(callbackFn, thisArg)

• 매개변수

  • callbackFn
    → 배열의 각 요소에 대해 실행할 함수입니다. 반환값은 사용되지 않습니다.
    → 함수는 다음 인수를 사용하여 호출됩니다.

    1. element : 배열에서 처리 중인 현재 요소
     2. index : 배열에서 처리 중인 현재 요소의 인덱스
     3. array : forEach()를 호출한 배열

  • thisArg (optional)
    - callbackFn을 실행할 때 this 값으로 사용할 값
    
    

• 반환 값 : undefined (없음)
  
  

특징

• 호출되는 배열을 변경하지 않지만, callbackFn으로 제공되는 함수는 배열 변경 가능
  
  
• 배열의 length는 callbackFn을 처음 호출하기 전에 저장
  - callbackFn은 forEach() 호출이 시작되었을 때 배열의 초기 length 값을 초과하여 추가된 요소는 방문 X
  • 이미 방문한 인덱스를 변경해도 callbackFn이 해당 인덱스에 대해 다시 호출 X
  • 배열의 아직 방문하지 않은 기존 요소가 callbackFn에 의해 변경되는 경우,  callbackFn에 전달된 값은 해당 요소가 방문될 당시의 값이 됩니다.
  • 삭제된 요소는 방문되지 않습니다.
    
    
• 예외를 발생시키는 것 외에는 forEach() 루프를 중지/중단 불가
  • 루프 중지가 필요하다면, forEach() 메서드는 적절한 도구가 아님
    
    
• forEach()는 동기 함수를 기대하며 프로미스를 기다리지 않으므로 프로미스(또는 비동기 함수)를 forEach 콜백으로 사용할 때는 그 의미를 알고 있어야 함

     const ratings = [5, 4, 5];
      let sum = 0;
      
      const sumFunction = async (a, b) => a + b;
      
      ratings.forEach(async (rating) => {
        sum = await sumFunction(sum, rating);
      });
      
      console.log(sum);
      // 순진하게 예상한 출력: 14
      // 실제 출력: 0