forEach문 사용법 & 예제 정리

자바스크립트 for문의 종류

• for문 : 일반적인 for문으로 블록 안의 코드를 조건에 따라 반복합니다.
• forEach문 : 배열에 대해 사용되는 for문으로, 각 배열 요소에 대해 주어진 함수를 실행합니다.
• for...in문 : 객체에 대해 사용되는 for문으로, 객체의 열거 가능한 속성을 반복할 때 사용됩니다. 
• for...of문 : 배열, 문자열, 맵(Map), 셋(Set) 등의 iterable 객체를 순회할 때 사용되는 for문입니다.

foreach문 사용법

배열.forEach(function(요소, 인덱스, 배열) {
    // 각 요소에 대한 코드
});

• 요소: 배열의 각 요소에 대한 참조.
• 인덱스: 현재 요소의 인덱스.
• 배열: forEach를 호출한 배열 자체

for문과 forEach문 비교

 

for 문

const array = [1, 2, 3, 4, 5];

for(let i=0; i<array.length; i++){
   document.write(array[i] + "<br>");
};

 

forEach문

const array = [1, 2, 3, 4, 5];

array.forEach(function(e) {
   document.write(e + "<br>");
});

 

forEach문 사용 시 주의사항

 

break와 continue 사용 불가

 

forEach 메서드는 중간에 루프를 중단하거나 다음 반복으로 건너뛸 수 있는 break나 continue와 같은 기능을 지원하지 않습니다. 이러한 로직이 필요하다면 forEach가 아닌 그냥 for문을 사용하는것이 적절합니다.

 

비동기 처리 어려움

 

forEach는 동기적으로 동작하기 때문에 비동기 작업을 처리하는데는 적절하지 않습니다. 비동기 처리가 필요한 경우에는 for 루프나 for...of 루프 등을 사용하는 것이 더 적절합니다.

 

더 효율적인 방안 - map 메서드 활용

 

반복문 동작중에 각 요소의 값을 변경하려고 한다면 map 메서드 사용을 고려해볼 수 있습니다. map은 각 배열 요소에 대해 특정 함수를 적용하고 그 결과로 새로운 배열을 생성해줍니다.