Day 18 - Adding Up Times with Reduce

이번 과제는 map, reduce에 대한 방법만 알고 있다면 간단하게 해결할 수 있다.

Full Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const timeNodes = [...document.querySelectorAll("[data-time]")];

const seconds = timeNodes
  .map((node) => node.dataset.time)
  .map((timeCode) => {
    const [mins, secs] = timeCode.split(":").map(parseFloat);
    return mins * 60 + secs;
  })
  .reduce((total, eachSeconds) => total + eachSeconds);

let secondsLeft = seconds;
const hours = Math.floor(secondsLeft / 3600);
secondsLeft %= 3600;

const mins = Math.floor(secondsLeft / 60);
secondsLeft %= 60;

console.log(hours, mins, secondsLeft);

querySelectorAll로 가져온 데이터는 Node List의 형태이므로 spread 문법을 이용하여 풀어서 배열화시켜 저장한다. Array.from()을 사용해도 상관없다.

우선 시간에 대한 데이터는 각각 <li data-time="4:04">Video 58</li> 형식의 태그 안에 dataset으로 들어있는데, 이를 map으로 시간을 추출하기 위해 먼저 매핑한다.

그 후 시간의 형식이 mm:ss 형식이므로 :를 기준으로 split()을 사용하여 나눈 후 parseFloat을 이용하여 실수형 형변환을 시킨다.

그 값을 reduce를 사용하여 더해주면 되는데, 첫번째 인자인 total은 총 누적 값이고, 두번째 인자인 eachSeconds는 누적 값이다.

두번의 매핑 후 한번의 리듀스를 거치면 결국 초 단위로 바꾼 총 누적 값이 되고, 이 값을 시간, 분, 초로 잘라서 콘솔에 출력하면 된다.