[JavaScript] 자바스크립트 forEach문 사용법 & 예제 정리

자바스크립트 for문의 종류

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

 

자바스크립트에서는 forEach, for in, for of와 같은 다양한 종류의 for문이 사용될 수 있습니다. 이번 포스팅에서는 forEach에 대해 알아보도록 하겠습니다. forEach는 배열의 각 요소에 대해 주어진 함수를 실행하는 배열 메서드로 이 메서드를 사용하면 간단하게 배열을 순회하고 각 요소에 대해 지정된 작업을 수행하는 데 사용됩니다. 그냥 for문을 것보다 코드도 더 간결하게 사용할 수 있기 때문에 배열을 순회하는 목적이라면 forEach문의 사용을 추천드립니다.

 

---

 

 자바스크립트 forEach문 사용법 

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

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

 

 for문을 forEach문으로 바꿔보기 - 배열 요소 출력 

for문 사용 시

See the Pen Untitled by wjdxo513 (@wjdxo513) on CodePen.

 

배열 [1, 2, 3, 4, 5]의 각 요소를 출력하는 예제를 for문에서 forEach문으로 어떻게 바꿀 수 있는지 확인해 보겠습니다. for문을 사용하면 인덱스값으로 사용할 i 변수를 만들고 이 인덱스 i 변수를 기반으로 배열의 각 요소에 접근합니다. array[i] 이렇게 말이죠.

 

forEach문 사용 시

See the Pen forEach by wjdxo513 (@wjdxo513) on CodePen.

 

forEach문을 사용하면 이렇게 바꿀 수 있습니다. forEach문은 인덱스 변수를 따로 생성할 필요없이 콜백함수를 인자로 받아 배열의 각 요소에 접근합니다. 위의 예제에서 접근된 배열의 요소는 e로 표현할 수 있습니다. 이렇게 forEach문을 사용하면 반복문을 좀 더 간결하게 만들 수 있습니다.

 

---

 

 forEach문 다양한 예제 

배열 요소 합산 출력

See the Pen forEach1 by wjdxo513 (@wjdxo513) on CodePen.

 

배열의 모든 요소를 합산하여 결과를 출력합니다.

 

배열의 홀수 인덱스 값만 출력

See the Pen forEach2 by wjdxo513 (@wjdxo513) on CodePen.

 

배열의 홀수 인덱스 값만 출력합니다.

 

배열의 각 요소 길이 출력

See the Pen forEach3 by wjdxo513 (@wjdxo513) on CodePen.

 

배열의 각 요소들의 길이를 출력합니다.

 

배열의 요소를 2배로 곱해서 새로운 배열 만들기

See the Pen forEach4 by wjdxo513 (@wjdxo513) on CodePen.

 

배열의 각 요소에 2를 곱한 뒤 새로운 배열을 만듭니다.

 

---

 

 forEach문 사용 시 주의사항 

break와 continue 사용 불가

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

 

비동기 처리 어려움

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

 

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

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