일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 |
- js promise
- javascript eventloop
- 순차리스트
- javascript destructuring
- es6 destructuring
- react class method bind
- react event bind
- 크롬 익스텐션 개발
- DOM API
- parcel
- react
- task queue
- javascript class method bind
- client side rendering
- JavaScript
- es6 promise
- Browser API
- javascript spread
- react lifecycle
- javascript arrow function
- 선형리스트
- es6 symbol
- es6 module
- #javascript #자바스크립트 완벽가이드 #자바스크립트 코뿔소
- server side rendering
- es7 async await
- web server vs was
- chrome extension development
- 자료구조
- js arrow function
- Today
- 49
- Total
- 400,421
비실이의 개발 성장기
javascript reduce() 함수 파헤치기 본문
javascript에는 유용한 함수들이 정말 많은 것 같다.
그 중에 보통 함수와는 달리 아무리 예제를 봐도 이해가 잘 가지 않던 함수가 있었다.
그 함수는 바로 reduce()
reduce 는`줄이다` 라는 의미를 가지고 있다.
javascript 에서도 reduce() 는 배열을 순회하며 인덱스 데이터를 줄여가며 어떠한 기능을 수행 할 수 있다.
reduce() 함수 설명 시 가장 많이 사용하는 예제를 가져왔다.
1 2 3 4 5 6 7 | const numberList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 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로 반환하는 예제다.
#잘못된 내용은 댓글 달아주세요
'프론트엔드 > javascript' 카테고리의 다른 글
일급 객체 (First-class citizen) (0) | 2018.11.06 |
---|---|
[javascript] 모듈 사용방식과 번들러 사용 이유 (0) | 2018.05.26 |
javascript reduce() 함수 파헤치기 (0) | 2018.05.15 |
javascript 클로저 코드를 통해 알아보기 (0) | 2017.04.17 |
javascript 프로토타입(prototype) 이란? (1) | 2017.04.02 |
javascript 복합문과 빈문장 (0) | 2017.03.14 |
- Tag
- JavaScript, reduce