[Javascript] reduce 의 간단한 예시

자바스크립트에서 배열에 관련된 함수들이 많이 있습니다.

그 중에서도 배열의 요소를 순환하며 특정 로직을 수행하려면 엄청 자주 쓰이는 map, forEach 가 있죠.

그렇다면 reduce는 무엇일까요 ? 

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

이렇게만 보면 이해가 좀 어렵긴 합니다.

 

reduce의 간단한 예시를 통해 알아가보도록 하겠습니다.

---

① 배열의 요소를 모두 더한 값을 얻기

let Arr = [1,2,3,4,5,6,7,8,9,10];

// forEach를 통한 덧셈구현
let result = 0;
Arr.forEach(data=> result += data);
console.log(result); // output : 55

// reduce를 통한 덧셈구현
let result2 = Arr.reduce((acc,cur)=>{
	return acc+cur;
}, 0);
console.log(result2); // output : 55

이런 단순한 연산에는 forEach가 더욱 직관적으로 보입니다.

또한 똑같이 배열을 한번 씩 순환하는 것이기 때문에 비슷한 속도일것입니다.

 

② 배열의 요소 들의 중복 갯수 확인하기

let Arr = ['a','b','a','c','a','a','b','a','b','c'];
// a의 개수, b의 개수, c의 개수를 알고 싶음

// 이럴경우 forEach나 map을 사용한다면 순환을 2번해야하는 상황이 됩니다.
// 코드 구상은 자유롭게 해보시길 바랍니다.

// reuce 사용하기
let result = Arr.reduce((object, cur)=>{
	if(!object[cur]){ //object에 cur key를 가진 값이 존재하지 않는다면
    	object[cur] = 0;
	}
	object[cur]++;
    return object;
}, {}); // {}=>object의 초깃값으로 사용

console.log(result); // output : { a:5, b:3, c:2 }

reduce를 사용하면 빛을 바라는 효과가 여기서부터 보이기 시작하는 것 같네요.

 

위의 코드에서 공통으로 보이는 것처럼 reduce의 두번째 매개변수 인자에는 초깃값으로 쓰일 값이 들어갑니다.

초깃값을 지정해주지않으면 TypeError가 발생할 확률이 크니 넣어주시는게 안전하다고 합니다.