자바스크립트 배열 메서드 1: forEach

forEach는 for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다.

 

하지만 for문처럼 index와 조건식, 증감을 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다.

 

1. forEach(callback) 

기본적인 사용법은 아래와 같습니다. 

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));

arr 객체의 요소들이 callback 함수를 통해 순서대로 호출되는 모습입니다.

 

2. callback 함수 인자

forEach의 callback 함수에는 배열의 요소 뿐만 아니라 index, 전체 배열을 인자로 사용할 수 있습니다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element, index, array){
    console.log(`${array}의 ${index}번째 요소 : ${element}`);
});
/*
0,1,2,3,4,5,6,7,8,9,10의 0번째 요소 : 0
0,1,2,3,4,5,6,7,8,9,10의 1번째 요소 : 1
0,1,2,3,4,5,6,7,8,9,10의 2번째 요소 : 2
0,1,2,3,4,5,6,7,8,9,10의 3번째 요소 : 3
0,1,2,3,4,5,6,7,8,9,10의 4번째 요소 : 4
0,1,2,3,4,5,6,7,8,9,10의 5번째 요소 : 5
0,1,2,3,4,5,6,7,8,9,10의 6번째 요소 : 6
0,1,2,3,4,5,6,7,8,9,10의 7번째 요소 : 7
0,1,2,3,4,5,6,7,8,9,10의 8번째 요소 : 8
0,1,2,3,4,5,6,7,8,9,10의 9번째 요소 : 9
0,1,2,3,4,5,6,7,8,9,10의 10번째 요소 : 10
*/

 

3. 유의할 점

for문은 continue나 break로 반복을 제어할 수 있지만 forEach는 throw를 발생시키지 않으면 중간에 종료할 수 없습니다.

만약 조건을 만족할때까지만 반복시켜야 한다면 for문 함수를 사용하는 게 좋습니다.