18 - Adding Up Times with Reduce

개요

 

시간 값들을 추출해서 더해보자. 이 과정에서 reduce() 를 이해하자

 

내용

 

data 속성 이용하기   - 참고링크: https://junhobaik.github.io/html-dataset/ - HTML 의 태그안에 데이터 속성을 넣어둔 다음, - 그 데이터를 JavaScript 또는 CSS 에서 가져다 쓸 수 있다.   1) 태그 안에 data-<속성이름> 으로 적어둔다. - 예) data-time, data-age, data-count 등등 2) 이후에 JavaScript 에서라면 dataset.<속성이름> 으로 불러다 쓸 수 있다. - 예) dataset.time, dataset.age, dataset.count 2-2) CSS 에서라면 [data-time="5:43"] 과 같이 특정 element 들을 선택할 수 있다. - dataset 의 값으로 선택하는 것이다.

1) data-time 을 가지는 element 들을 querySelectorAll() 해주는데 - Array 의 다양한 기능을 쓰기위해 Array.from() 으로 - NodeList 를 Array 로 바꿔준다.   2) 전체 시간을 합산한 초를 계산해본다 - map 으로 시간 정보를 얻어내고 (String 이다) - 이걸 ':' 로 분과 초로 나눈 후 - map(parseFloat) 로 숫자로 바꿔준다. 이건 재미있다. map(item => parseFloat(item)); 을 줄인게 map(parseFloat); 이다. - map(parseFloat) 로 숫자로 바꿔준다. - 그리고, 분과 초를 초로 만들어준다. - 마지막으로 reduce() 를 이용하여 합산을 해준다. - 초기값은 없고 (= 초기값이 첫번째 element), 파라미터는 reducer 함수이다.   3) divide, modulo 연산자를 이용해 시간과 분, 초를 계산해주면 끝

 

참고. reduce()

 

참고링크: https://goo.gl/QW5NSK

- 아래 예제들도 링크에서 가져옴. (약간의 수정

 

	문자열 배열인 votes 를 reduce() 해주는 것   1) reduce() 는 적용하는 함수인 reducer 와 초기값인 initialValue 를 파라미터로 받는다. - initialValue 가 없으면 첫 item 을 쓴다. 2) accumulator 가 map 이 되어, 각각의 문자열을 key 로 받아서, - value 에 count 값을 넣어준다.
	1. reduce vs map   1) reducer 함수는 값을 받아서 두 배로 만들어 새로이 배열을 생성해준다. 2) map 도 똑같은 역할을 한다.   이건 map 이 훨씬 간결하고 좋다
	2. reduce vs. filter   이번에는 2의 배수가 아닌경우에만 새로이 배열을 생성해 넣어준다. 이번에도 filter 가 나은 것 같다.
	3. reduce vs. filter+map   하지만 map 과 filter 를 동시에 해주고 싶다면 어떨까? 언듯 보면 여전히 filter + map 이 더 간결해 보이지만 두 번 루프를 돌아야 한다. reduce 는 한 번만 루프를 돈다. reducer 의 재사용성도 장점이다.
	4. getMean   이번에는 최종 accumulator 에 연산을 한 번 더 해주는 방법이다.   - index 와 array.length 정보를 통해 마지막 단계인지를 확인해준다. - initialValue 는 따로 넣지 않았다.
	5. initial value caution   초기값을 주지 않으면, accumulator 의 초기값은 첫번째 element 인 "vote1" 이 된다. - 링크에서는 getVote2 에 "vote1" 이 나온다고 하였지만 - 현 시점 (2019-03-28)에 온라인에서 테스트 해보니 에러가 난다. * 에러 링크: https://goo.gl/Co67pD
	6. flatten   1) 2차원 배열을 1차원으로 바꿔주었다. 2) 3차원 배열은 만들어놓은 reducer 로 두 번 돌려주면 된다.
	7. flatternMap   이건 조금 어렵다.   1) 'cast' 라는 키값이 있고, 'cast' key 의 value가 Array 임이 확실할때에   2) Array 의 각 element 에 대하여 - accumulator 에 이미 그 값이 없으면 push() 로 집어넣는다. - accumulator.indexof(val) 이 헷갈렸는데 - 해당 val 이 accumulator 에 있으면 그 인덱스 값을, 없으면 -1 을 리턴한다. - 따라서, 이미 포함된 val 이 아니면 추가해주게 된다.
	8. reduceRight   reduce 의 초기값은 0 이다. num + string 은 string 이라 한다.   reduce() 일때는0+1+2+3+4+"5" = 10+"5" = "105" 가 된다.   reduceRight() 은 맨 뒤쪽의 element 부터 루프를 돈다. - 따라서, 0+"5"+4+3+2+1 = "054321" 이 된다.
	9. functional programming with reduce()   1) 일반적으로는 한 단계씩 결과를 내고, 다시 입력값으로 쓴다.   2) reduce 를 사용하면 function 들의 배열을 reduce로 먹여준다. - 매우 재미있다.