-
자바스크립트 고차함수 - reduce()프론트엔드/JavaScript 2020. 10. 3. 09:38
reduce함수란?
지금까지 배열을 다루는 메서드들의 대부분은 콜백함수를 인자로 가졌다.
그리고 콜백함수는 인자로 메서드를 호출한 배열의 요소, 인덱스, 배열을 제공받았다.
그런데 reduce 메서드는 조금 다르다.
우선 reduce의 간단한 사용법을 보자.
reduce의 간단 사용법
<body> <script> let num = [1,2,3,4,5]; let sum = num.reduce(function(a,b){ console.log("합계는 "+a+" 요소는 "+b); return a+b; }) // 합계는 1 요소는 2 // 합계는 3 요소는 3 // 합계는 6 요소는 4 // 합계는 10 요소는 5 console.log(sum) // 15 출력 </script> </body>위 코드는 reduce 함수를 통해 num 배열의 모든 요소를 더해서 반환하는 코드다.
reduce 메서드는 다른 배열 메서드와 달리 배열의 각 요소들에 대해 reduce 함수를 실행한다.
그리고 이 요소들을 합쳐서 하나의 결과값을 반환한다.
다른 메서드들이 새로운 배열을 만들어 반환한 것과 다른 모습이다.
<body> <script> let num = [1,2,3,4,5]; let sum = num.reduce(function(accumulator,item,index,array){ console.log("합계는 "+accumulator+" 요소는 "+item+" 인덱스는 "+index+" 배열은 "+array); return accumulator+item; }) // 합계는 1 요소는 2 인덱스는 1 배열은 1,2,3,4,5 // 합계는 3 요소는 3 인덱스는 2 배열은 1,2,3,4,5 // 합계는 6 요소는 4 인덱스는 3 배열은 1,2,3,4,5 // 합계는 10 요소는 5 인덱스는 4 배열은 1,2,3,4,5 console.log(sum) // 15 출력 </script> </body>reduce 메서드의 인자로 주어진 콜백함수는 인자로 총 4가지 요소를 갖는다.
● 누적 계산 요소
● 배열 요소
● 배열 인덱스
● 배열
기존 배열 메서드에 비해 누적 계산 요소를 하나 더 가진 것이다.
reduce메서드는 배열요소에 reduce 메서드를 적용하고
해당 요소들을 합쳐서 누적 계산 요소 하나로 반환한다.
reduce 메서드의 초기값 설정
<body> <script> let num = [1,2,3,4,5]; let sum = num.reduce(function(accumulator,item,index,array){ console.log("합계는 "+accumulator+" 요소는 "+item+" 인덱스는 "+index+" 배열은 "+array); return accumulator+item; }, 10) // 합계는 10 요소는 1 인덱스는 0 배열은 1,2,3,4,5 // 합계는 11 요소는 2 인덱스는 1 배열은 1,2,3,4,5 // 합계는 13 요소는 3 인덱스는 2 배열은 1,2,3,4,5 // 합계는 16 요소는 4 인덱스는 3 배열은 1,2,3,4,5 // 합계는 20 요소는 5 인덱스는 4 배열은 1,2,3,4,5 console.log(sum) // 25 출력 </script> </body>reduce 메서드를 실행할 때 초기값을 부여하고 초기값부터 reduce의 결과값이 더해지도록 할 수 있다.
위 코드와 같이 reduce 메서드의 콜백함수 다음 쉼표 ( , ) 이후에 숫자를 입력하면 해당 숫자가 초기값이다.
그리고 코드 결과에서 보다시피 초기값부터 결과값이 더해지기 시작한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 고차함수 - find(), findindex() (0) 2020.10.06 자바스크립트 고차함수 - every(), some() (0) 2020.10.06 자바스크립트 고차함수 - filter() (0) 2020.10.03 자바스크립트 고차함수 - Map() (0) 2020.10.03 자바스크립트 고차함수 - forEach() (0) 2020.10.03