[javascript]자바스크립트 reduce 활용

*광고 클릭은 제게 큰 힘이됩니다!

 

 

var a = [1,2,3,4,5,6,7,8]

a.forEach(data =>{
	console.log(data);

})

 

대부분 배열에 있는 인자들을 꺼내어 사용할때 forEach문을 사용한다 ! 하지만 javascript 전문적인 개발자들은 내장 매서드중에 가장 강력한 reduce를 알아두면 다양한 곳에서 한층더 발전된 개발을 할수있을것이다!

 

 

reduce,reduceRight

---

reduce를 덧셈 함수로 알고있는 사람들이 많다. 왜냐면 대부분 사이트에서 reduce 예제를 덧셈으로 두기때문이다.

 

reduce메서드는 배열.reduce((누적값,현재값,인덱스,요소)=>{return 결과},초깃값); 형태로 사용한다.

 

아래는 흔한 덧셈 예시이다

 

var a = [1,2,3,4,5,6,7,8]

result = a.reduce((acc,cur,i)=>{
	console.log(acc,cur,i);
    return acc+cur;
},0);

 

acc(누적값)이 초깃값 0부터 시작하여 return하는대로 누적되는것을 볼수있다. 초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이된다 예를들어 초깃값을 3으로 줘보자

 

var a = [1,2,3,4,5,6,7,8]

result = a.reduce((acc,cur,i)=>{
	console.log(acc,cur,i);
    return acc+cur;
},3);

 

위 예시를 보는것과 같이 초기값을 3을 주니 0부터 시작하던 초깃값이 3부터 시작하여 플러스해 나가고 있는것을 볼수있다.

 

reduceRight

var a = [1,2,3,4,5,6,7,8]

result = a.reduceRight((acc,cur,i)=>{
	console.log(acc,cur,i);
    return acc+cur;
},0);

reduceright는 reduce와 같은 동작이며 요소 순회를 맨마지막 배열부터 왼쪽으로 한다는 차이이다.

위까지는 흔한 예제이며 이러한 reduce를 활용하여 map과 filter와 같은 함수형 메서드를 구현해보겠다 .

 

 

var a = [1,2,3,4,5,6,7]

result = a.reduce((acc,cur,i)=>{
	acc.push(cur %2 ? '홀수':'짝수');
    return acc;
},[]);
result

엄청 재미있는 일이 생겼다 초기값을 0이 아닌 배열을 주면 acc값은 배열값이 되며 이 배열에 push를 이용하여 cur(현재값)이 홀수이면 홀수를 배열에 넣고 짝수이면 짝수를 배열에 넣는 map을 만들었다. 또한 이를 응용하여 조건을 넣어주면 filter역할을 해주는 함수가된다.

 

var a = [1,2,3,4,5,6,7]

result = a.reduce((acc,cur,i)=>{
	if(cur%2) acc.push('홀수');
    return acc;
},[]);
result

이와 같이 sort, every, some, find, findIndex, includes도 다 reduce로 구현 가능하다

이 기술을 통해 한층더 발전한 개발이 되길바란다!