forEach를 사용하면 안되는 경우

forEach를 다른 함수로 바꾸기 Level 1

Bad Case

위 와 같은 코드에서는 아래와 같이 forEach 대신 filter를 사용하는 것이 더 좋다.

코드 도 더 깔끔해 졌고, 의미도 부여됐다.

이외에도 생각보다 forEach 대신 다른 함수를 써야하는 경우가 더 많다.

각 경우는 MDN에서 소개하는 각 함수의 정의를 생각하면 결정하기 편리하다.

forEach 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

forEach는 "실행" 하는 의미를 갖고 있기 때문에, 실행하는 경우(로그, API 호출 등)에 적합하다.

 

filter 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

filter는 "테스트" 하는 의미를 갖고 있기 때문에, 특정 조건에 해당하는 요소를 뽑아내는 경우(a>N 등 if문)에 적합하다.

 

map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다

map은 "변환" 하는 의미를 갖고 있기 때문에, 각 요소를 변환하는 경우(a * N 등)에 적합하다.

 

reduce 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

다른 함수들이 배열로 반환하는 것에 비해, reduce는 단일 값을 반환해야하는 경우(SUM 등)에 적합하다.

 

이 처럼 forEach대신 filter 및 map, reduce로 대체할 수 있는 경우가 많다.

forEach를 다른 함수로 바꾸기 Level 2

위와 같은 경우는, 그대로 변환하는 것도 아니고, 필터링만 진행하지 않는 코드다.

이제 의미를 파악하기 쉬워졌다.

단, 같은 배열을 2번 순회하기 때문에, 성능이 중요한 경우(filter 후 map이 for문 보다 20%이상 느리다.)에는 for문을 사용해서 배열을 1번만 순회하도록 변경할 필요가 있다.

하지만 대부분의 경우에는 가독성을 향상시키는 것이 더 좋기 때문에, 성능을 이유로, 다른 코드를 사용하는 것은 추천하지 않는다.

이처럼 로직이 복잡해서 forEach를 사용하지 않고는 해결이 어려워 보일 수 있다. 하지만, 좀 더 생각해서, 다른 함수를 활용해 해결할 수 있는지 여부를 확인하는 것이 좋다.

 

시맨틱 태그처럼 의미있는 자바스크립트를 코드를 짜는 것이, 코드 읽기가 쉬워진다는 것을 염두할 필요가 있다.

 

3줄 요약

1. 실행의 의미를 담고 있는 forEach를 남용하면, 코드에 의미를 담기 어렵다.

2. filter / map / reduce의 조합으로 forEach 내부의 코드를 대체할 수 있다.

3. 성능이 중요한 경우에는, forEach / filter / map / reduce 대신 for문을 사용하는 것도 좋은 방법이다.