JavaScript Array forEach()

forEach(콜백함수)

forEach()는 JavaScript의 배열 메서드 중 하나로, 인자로 받은 함수를 배열의 모든 요소를 대상으로 실행한다. 각 요소에 대해 순차적으로 함수를 호출하여 원하는 작업을 수행할 수 있다.

예시 코드

array.forEach(요소명=> {
	실행문(요소명)
})

[1,2,3,4,5].forEach(v=>{
    console.log(v)
})

for문 처럼 반복적인 기능을 수행할 때 쓰지만, for문과 다른 방식으로 함수를 사용한다. 다음 매개변수(parameter)와 함께 배열의 각 요소에 적용하게 될 콜백 함수(callback function)를 전달한다.

• Current Value (명명된 매개변수) - 처리할 현재 요소
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
• Array (선택적 매개변수) - forEach() 를 호출한 배열

map()과 reduce()와는 달리 undefined를 반환하기 때문에 메서드 체이닝 중간에 사용할 수 없다. 또한 함수기 때문에 break문을 사용할 수 없어 중간에 멈출 수 없다. 그리고, 원본배열을 변경하지 않는다.

아래 코드처럼 forEach()는 결과값을 return 하지 않는다.

[1, 2, 3].forEach(v => {
    console.log(v)
    return // 리턴했는데 멈추지 않는다!
})

return뒤에 코드를 무시하는 용도로 사용할 수는 있다.

[1, 2, 3].forEach(v => {
    return // 
    console.log(v)
})
//값이 출력안되고, undefined

forEach() 1~100까지 더하는 코드

let sum = 0
Array(100).fill(0).forEach((v,i)=>{
    sum+= i+1
})
console.log(sum)

콜백 함수는 현재 요소의 값을 v로 받고, 인덱스를 i로 받는다.

forEach() 장점, 사용하는 이유?

• forEach는 for보다 간결해지고, 직관적이다.
• 인자로 콜백함수를 전달할 수 있어 재사용 가능한 함수를 만들 수 있다.
• 배열의 각 요소를 순차처리하여 비동기작업 수행할 때 쓴다.
• 위 코드처럼 함수내에서 다른 변수 만들고, 상태 변경할 수 있어 유연하게 추가 작업이 가능하다.

마무리

return, break를 써야할 때는 for문,map(),filter() 등 다른 배열 메서드를 쓰고,
배열의 각 요소를 단순히 순회할 때 forEach()를 사용하면 좋을 듯 하다.