18. Adding Up Times with Reduce ( JavaScript30 )

Dev/JavaScript30

18. Adding Up Times with Reduce ( JavaScript30 )

takeU 2021. 7. 9. 14:00

Adding Up Times with Reduce

목표

목록의 동영상들의 총 재생시간을 구하는 것

기본 코드

<!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>
  </ul>
<script>
</script>
</body>
</html>

과정

배열 선언
동영상들의 총 재생시간을 초단위로 구함
총 재생시간을 시, 분, 초로 바꿔줌

코드 분석

1. 배열 선언

const timeNodes = Array.from(document.querySelectorAll('[data-time]'));

timeNode에 [data-time]을 가진 태그들을 배열로 담아준다.

2. 동영상들의 총 재생시간을 초단위로 구함

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);

seconds에 배열의 값들의 재생시간을 담고,
재생시간을 :를 기준으로 분, 초로 나눠 분값에 60을 곱해 총 재생 시간을 초단위로 뽑아내 정수로 출력,
그 뒤에 total에 모든 동영상의 재생시간을 합한 값을 출력한다.

3. 총 재생시간을 시, 분, 초로 바꿔줌

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);

secondsLeft에 총 재생시간(초단위)를 담아,
3600으로 나눈 몫, 즉 시간을 hours에 담고
나머지를 secondsLeft에 담아 60으로 나눈 몫을 mins에 담고 그나머지를 secondsLeft에 담는다.
결과적으로 hours,mins,secondsLeft에 총 재생시간이 시, 분, 초 단위로 담기게 된다.

찾아본 내용, 알게된 내용들

reduce - 누산기 역할을 함. 전에도 찾아본건데 또 찾아봄.. 복습이 중요한걸 다시 깨달았다.

저작자표시 비영리 변경금지

현재글18. Adding Up Times with Reduce ( JavaScript30 )

takeU