[Javascript] 18. Adding Up Times with Reduce

Experience/[Javascript] JS 30

by winCow 2021. 5. 1. 23:49

1. 배경

동영상으로 이루어진 리스트에서 총 재생 시간을 구하려고 한다.

2. HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Videos</title>
</head>
<body>
  <ul class="videos">
    <li data-time="5:43">
      Video 1
    </li>
    <li data-time="2:33">
      Video 2
    </li>
    <li data-time="3:45">
      Video 3
    </li>
    <li data-time="0:47">
      Video 4
    </li>
    <li data-time="5:21">
      Video 5
    </li>
    <li data-time="6:56">
      Video 6
    </li>
    <li data-time="3:46">
      Video 7
    </li>
    <li data-time="5:25">
      Video 8
    </li>
    <li data-time="3:14">
      Video 9
    </li>
    <li data-time="3:31">
      Video 10
    </li>
    <li data-time="5:59">
      Video 11
    </li>
    <li data-time="3:07">
      Video 12
    </li>
    <li data-time="11:29">
      Video 13
    </li>
    <li data-time="8:57">
      Video 14
    </li>
    <li data-time="5:49">
      Video 15
    </li>
    <li data-time="5:52">
      Video 16
    </li>
    <li data-time="5:50">
      Video 17
    </li>
    <li data-time="9:13">
      Video 18
    </li>
    <li data-time="11:51">
      Video 19
    </li>
    <li data-time="7:58">
      Video 20
    </li>
    <li data-time="4:40">
      Video 21
    </li>
    <li data-time="4:45">
      Video 22
    </li>
    <li data-time="6:46">
      Video 23
    </li>
    <li data-time="7:24">
      Video 24
    </li>
    <li data-time="7:12">
      Video 25
    </li>
    <li data-time="5:23">
      Video 26
    </li>
    <li data-time="3:34">
      Video 27
    </li>
    <li data-time="8:22">
      Video 28
    </li>
    <li data-time="5:17">
      Video 29
    </li>
    <li data-time="3:10">
      Video 30
    </li>
    <li data-time="4:43">
      Video 31
    </li>
    <li data-time="19:43">
      Video 32
    </li>
    <li data-time="0:47">
      Video 33
    </li>
    <li data-time="0:47">
      Video 34
    </li>
    <li data-time="3:14">
      Video 35
    </li>
    <li data-time="3:59">
      Video 36
    </li>
    <li data-time="2:43">
      Video 37
    </li>
    <li data-time="4:17">
      Video 38
    </li>
    <li data-time="6:56">
      Video 39
    </li>
    <li data-time="3:05">
      Video 40
    </li>
    <li data-time="2:06">
      Video 41
    </li>
    <li data-time="1:59">
      Video 42
    </li>
    <li data-time="1:49">
      Video 43
    </li>
    <li data-time="3:36">
      Video 44
    </li>
    <li data-time="7:10">
      Video 45
    </li>
    <li data-time="3:44">
      Video 46
    </li>
    <li data-time="3:44">
      Video 47
    </li>
    <li data-time="4:36">
      Video 48
    </li>
    <li data-time="3:16">
      Video 49
    </li>
    <li data-time="1:10">
      Video 50
    </li>
    <li data-time="6:10">
      Video 51
    </li>
    <li data-time="2:14">
      Video 52
    </li>
    <li data-time="3:44">
      Video 53
    </li>
    <li data-time="5:05">
      Video 54
    </li>
    <li data-time="6:03">
      Video 55
    </li>
    <li data-time="12:39">
      Video 56
    </li>
    <li data-time="1:56">
      Video 57
    </li>
    <li data-time="4:04">
      Video 58
    </li>
  </ul>
</body>
</html>

3. Javascript

  const timeNodes = Array.from(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, vidSeconds) => total + vidSeconds);

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

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

    console.log(hours, mins, secondsLeft);

먼저 data-time 데이터셋 속성을 가진 쿼리들을 모두 선택하는데, 이는 Nodelist를 반환하므로 배열로 변환시킨 후 timeNodes 변수에 저장한다. seconds 변수에는 이렇게 만들어진 배열에서 map API를 통해 "분:초" 형태로 이루어진 데이터셋 속성을 추출하고, 여기에 다시 map을 이용해 가공한다. "분:초" 형태로 가공된 배열의 요소들을 split을 통해 "분"과 "초"로 나누고, 이를 숫자로 만들어 mins와 secs에 할당한다. 이후, 단위를 통일하기 위해 mins에 60을 곱한 뒤 secs를 더하여 반환하고, 여기에 다시 reduce를 걸어 모든 값을 더한다. reduce(accumulator, currentValue) API는 배열의 모든 값을 누산한다. accumulator는 콜백함수의 첫 번째 호출이자 누산된 반환값이다. 위 코드에서는 total이 첫 번째 값이자 반환값으로, 두 번째 요소부터 vidSeconds에서 호출되어 total에 더해진다. 즉, 동영상 재생 길이의 총 시간을 초 단위로 반환한 값이 seconds가 된다.

이를 사용해 hours와 mins를 반환하기 위해, seconds를 secondsLeft로 할당하고, 각각 Math.floor 매소드를 이용해 전체 시간(초)을 3600, 60으로 나눠 준다. 먼저 hours에는 3600으로 나눠진 값이 할당되고, 나머지는 secondsLeft에 할당된다. 이 secondsLeft를 가지고 mins에서도 60으로 나누기를 반복하면, 총 시간(초)을 시간, 분, 초 형태로 나누어 hours, mins, secondsLeft로 할당한 셈이 된다.

'Experience > [Javascript] JS 30' 카테고리의 다른 글

[Javascript] 20. Speech Detection (0)	2021.05.04
[Javascript] 19. Webcam Fun (0)	2021.05.03
[Javascript] 17. Sort Without Articles (0)	2021.04.30
[Javascript] 16. Mouse Move Shadow (0)	2021.04.28
[Javascript] 01~05 Review (0)	2021.04.27