reduce 함수에 대해서 알아보자

reduce는 for문과 비슷한 함수다.

 

대신 for문보다 좋은게 더 가독성이 좋고 어쩌면 더 최적화된 함수라는 것이다.

 

배열에 있는 모든 값에 대한 연산을 할 때 reduce만한게 없는 것 같다.

 

예시로 살펴보자.

 

totalTables() {
  return this.tables.reduce((sum, table) => sum + (table.count || 0), 0);
}

 

위 함수는 전체 테이블의 수를 계산하는 함수이다.

다음과 같은 함수를 computed에 넣었다고 해보자

여기서 this.tables는 배열이다.

그리고 table은 그 배열 안의 요소이다.

(sum, table)이 부분은 인자다.

=> 이것은 한줄 로직이라는 것을 나타내는 기호이다. 만약에 여러줄 로직이면 { ~~~~ } 이렇게 쓸 것이다..

 

table.count || 0 이 부분은 count 값이 존재하면 그 count 값을 더하고, 아니면 0을 더하는거다.

맨 끝 부분의 , 0); 이 부분은 초기값을 설정해주는 것이다.

만약 1이라고 하면 sum을 계산할 때 1부터 더해준다.

 

만약 위의 코드를 for문을 사용하면 다음과 같다.

 

totalTables() {
  let sum = 0;
  for (let table of this.tables) {
    sum += table.count || 0;
  }
  return sum;
}

 

보다시피 코드가 겁나 길다.. 몇 줄이나 길어진거냐..

이렇게 코드 안짜려고 reduce를 사용하는 것 같다.

 

그러면 sum을 계산하는게 아닌 모든 요소의 값을 곱해주고 싶으면 어떻게 해야할까?

 

totalTables() {
  return this.tables.reduce((mul, table) => mul * (table.count || 1), 1);
}

 

다음과 같이 작성해주면 된다.

여기서 mul은 그냥 임의로 지어준 이름이다. 아무렇게나 지어도 된다. 정 원한다면 sum이라고 지어도 상관없다.

여기서 중요한 포인트는 +가 *로 바뀌고, 초기값을 1로 설정했다는 것이다.

왜 초기값이 1인지는 산수를 잘하면 알 수 있다.. 만약 0으로 설정한다면 곱하는 것마다 0이 되기 때문이다. ㅋㅋ