[JS] 배열 메서드들의 올바른 역할

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

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

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

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

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

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

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

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

 

 

각각 배열 메서드마다 역할이 다르다는 것을 알았다.

 

예시로 자바스크립트 과제 중 기존 코드와 이번에 코드리뷰 받은 부분을 비교해서 살펴보자.

 

아래는 장바구니에 담은 상품들의 가격을 전부 더하는 함수이다.

 totalAmount() {
   let sum = 0;
    this.selectedProductsList.forEach((item) => {
      sum += item.price;
    });
    return sum.toLocaleString();
 }

 

 

기존에는 특별히 신경쓰지 않고 반복을 돌면서 더해주면 되겠다고 생각하여 forEach를 사용했다.

 

그러나

 

 

 

reduce를 사용해보는 것은 어떤지 리뷰를 달아주셨다.

 

한 번 사용해보자

 

totalAmount() {
 return this.selectedProductsList.reduce((acc, cur) => acc + cur.price, 0);
}

 

오? 4줄짜리 코드가 1줄로 줄어들었다.

 

그러나 단순히 코드의 길이만 줄이는 것이 reduce의 주된 역할은 아닐 것이라고 생각하여 찾아봤다.

 

reduce는

 

첫 번째 인자인 accumulator는 return 값을 누적하고,

다음 루프에서 계속 accumulator를 전달받아 사용할 수 있다.

 

결국 차이는,

forEach는 return을 받을 수 없고, reduce는 단일값에 대해 return을 받을 수 있다.

 

**만약 반복 중간에 break를 걸어야한다면 forEach는 좋은 선택이 아니다!!

 

앞으로 적재적소에 알맞은 배열 메서드를 활용해야겠다는 생각과 함께,

'반복문 쓸까? -> forEach쓰지 뭐' 와 같은 단순한 생각은 지양할 필요가 있다고 느꼈다.

 

참고 레퍼런스

https://growy.tistory.com/29