18. Adding Up Times with Reduce

프로젝트 소개

• 전체 비디오 시간(date-time 속성 값)을 합산하여, 시, 분, 초로 표시 (Reduce)

배운 것들

• .reduce

최종 코드

정답 코드

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

내 코드

<script>
      const videos = Array.from(document.querySelectorAll('li'));

      const sec = videos.reduce((total, video) => {
        const separateValue = video.dataset.time.split(':');
        const resultArray = separateValue.map((eachValue) =>
          parseInt(eachValue)
        );

        return total + resultArray[1];
      }, 0);

      const min = videos.reduce((total, video) => {
        const separateValue = video.dataset.time.split(':');
        const resultArray = separateValue.map((eachValue) =>
          parseInt(eachValue)
        );

        return total + resultArray[0];
      }, 0);

      const hour = Math.floor(min / 60);
      const minNew = (min % 60) + Math.floor(sec / 60);
      const secNew = sec % 60;

      console.log(`${hour}:${minNew}:${secNew}`);
    </script>

느낀 점/ 기억할 점

• 내 코드는 초, 분을 각각 Reduce로 얻어내다 보니 중복이 많이 발생
• 정담 코드에서는 분을 초로 환산 후 기존 초의 값과 합산한 각 video의 값을 반환받아서 연속적으로 .reduce로 간단히 실행하서 모든 vidoe의 seconds를 간단히 구하는 방식임
• .map(parseFloat)식으로 사용할 수 있는지는 처음 알았음(항상 parseFloat(a)식으로만 사용해야 하는 줄)