자바스크립트에서 배열 순회(Array Iteration)란 함수의 목적에 맞게 배열 안의 모든 요소를 하나씩 차례대로 확인하고 처리하는 작업을 말합니다. 이러한 반복 작업을 간결하게 수행할 수 있도록 도와주는 대표적인 메서드가 바로 forEach()입니다.
forEach() 메서드란?
forEach() 메서드는 배열에 포함된 각 요소마다 지정된 콜백 함수를 한 번씩 호출합니다. 별도의 반복문(for 문 등)을 작성하지 않아도 되기 때문에 코드가 더 짧고 가독성이 높아지는 장점이 있습니다.
콜백 함수에는 세 가지 인수가 전달됩니다.
- value: 현재 처리 중인 배열 요소의 값
- index: 현재 요소의 인덱스(선택 사항)
- array: 현재 순회 중인 배열 객체 자체(선택 사항)
예제 1 – 인덱스와 배열 정보 활용하기
<html>
<body>
<p id="each"></p>
<script>
var num = "";
var values = [1, 2, 3, 4, 5];
values.forEach(myArray);
document.getElementById("each").innerHTML = num;
function myArray(value, index, array) {
num = num + value + "<br>";
}
</script>
</body>
</html>실행 결과
1 2 3 4 5
위 예제에서는 배열 [1, 2, 3, 4, 5]의 각 요소가 콜백 함수 myArray로 전달되고, 전달된 값들이 문자열에 누적되어 화면에 출력됩니다.
예제 2 – 익명 함수로 간단하게 처리하기
<html>
<body>
<script>
var array = ['Ram', 'Rahim', 'Remo'];
array.forEach(function(e) {
document.write(e);
document.write("</br>");
});
</script>
</body>
</html>실행 결과
Ram Rahim Remo
두 번째 예제처럼 콜백 함수를 별도로 선언하지 않고 익명 함수로 직접 작성하면 더욱 간결하게 표현할 수 있습니다.
정리
forEach()는 배열의 모든 요소를 순서대로 처리해야 할 때 유용한 메서드입니다. 다만 다음과 같은 특징을 함께 기억하면 좋습니다.
- 배열의 각 요소에 대해 콜백 함수를 자동으로 실행합니다.
- 반환값(return)이 없으므로 새로운 배열이 필요하다면
map()을 사용하는 것이 적합합니다. - 순회 도중 조건에 따라 반복을 중단해야 한다면
for...of문이나some(),every()같은 대안을 고려해야 합니다.