비실이의 개발 성장기

javascript reduce() 함수 파헤치기 본문

프론트엔드/javascript

javascript reduce() 함수 파헤치기

DubbingLee 2018. 5. 15. 10:53

javascript에는 유용한 함수들이 정말 많은 것 같다.




그 중에 보통 함수와는 달리 아무리 예제를 봐도 이해가 잘 가지 않던 함수가 있었다.




그 함수는 바로 reduce()  




reduce 는`줄이다` 라는 의미를 가지고 있다.




javascript 에서도 reduce() 는 배열을 순회하며 인덱스 데이터를 줄여가며 어떠한 기능을 수행 할 수 있다.




reduce() 함수 설명 시 가장 많이 사용하는 예제를 가져왔다.



1
2
3
4
5
6
7
const numberList = [12345678910];
 
const initValue = 0;
 
const totalResult = numberList.reduce((initialValue, currentValue, currentIndex, array) => {
    return initialValue + currentValue;
}, initValue);
cs




위 코드는 reduce() 함수를 사용하여 1 부터 10 까지 더하는 예제다.




5번 라인의 reduce() 함수에 사용 된 인자(argument) 를 보면 callback 함수와 initValue  두 개를 전달하고 있다.



여기서 두번째 인자(argument) 인 initValue 는 사용을 해도되고 안해도 되는 선택사항




callback 함수에는 총 4개의 인자(argument) 를 지정 할 수 있는데



initialValue 는  reduce() 함수의 두번째 인자 initValue 값이 넘어온다. 


currentValue 는 numberList 의 첫번째 데이터  1 이 넘어온다.

 

currentIndex 는 reduce() 함수의 두번째 인자 인 initValue 를 사용했는지 안했는지에 따라 값이 달라진다.


initValue 를 사용했다면 0 부터, 사용하지 않았다면 1 부터 시작된다.


array 는 reduce() 함수가 호출 된 배열, 이 예제에서는 numberList가 된다.




크롬 개발자 콘솔을 통해 예제를 실행 해봤다.





결과 값은 55 가 나왔다.




만약 initValue의 값을 0이 아닌 100으로 초기화 한다면.. ?







첫번째 initialValue 가 100으로 넘어오기 때문에   100 + 1 + 2 + 3 + 4 + 5 + 6 + 7+ 8 + 9 가 수행된다.








reduce() 함수를 아래와 같이도 활용할 수 있다.




1
2
3
4
5
6
7
8
9
10
11
12
const fruit = ['apple''grape''banana''apple''orange''grape''apple''orange'];
 
const result = fruit.reduce((object, currentValue) => {
    if (!object[currentValue]) {
        object[currentValue] = 0;
    }
    object[currentValue]++;
 
    return object;
}, {});
 
console.debug(result);
cs





위 코드는 reduce() 함수를 사용하여 fruit 리스트에 있는 과일 별 수량을 계산하여 object로 반환하는 예제다.










#잘못된 내용은 댓글 달아주세요



0 Comments
댓글쓰기 폼