Javascript30 - day18 : Tally String Times with Reduce

<li data-time="5:43">
  Video 1
</li>
<li data-time="2:33">
  Video 2
</li>
<li data-time="3:45">
  Video 3
</li>

video list의 data-time에 있는 시간들을 가져와서 총 시간을 구하기

 

 

내가 적은 코드

const videos = document.querySelectorAll("li");
 
const videoTimes = Array.from(videos).reduce((total, video) => {
    const time = video.dataset.time;
    const splitTime = time.split(':');
    const min = Number(splitTime[0]);
    const sec = Number(splitTime[1]);
    return total += (min * 60) + sec;
}, 0);
 
console.log(`Total time of these video is ${parseInt(videoTimes / 60)} min ${videoTimes % 60}sec`);

• list들을 가져와서 reduce를 한번씩만 돌림.
• reduce안에서 data-time을 가져오고
• 3:20 => 3 20 으로 분리해 숫자형식으로 만들어서
• 모든 비디오의 시간을 초로 계산해 더하도록 만들었다.

 

영상의 코드

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(`total : ${hours}hour ${mins}min ${secondsLeft}sec`)

• timeNodes를 가져올 때 data-time이 있는 list만 가져옴
• map을 통해 새로운 array를 만들어가며 시간을 구함
• reduce에서는 vidSeconds를 더해주기만함
• 시/분/초를 구할 때 굳이 다시 곱해서 빼주는 과정을 거치지 않고 나머지를 통해 secondsLeft를 구함

 

새롭게 알게된 것

• 굳이 하나의 함수에서 모든 일을 처리하려고 하지 않아도 된다. 순차적으로 하는 것이 더 이해하기 쉬워보임
• array를 만들어 하나씩 사용하고 싶은 경우, 따로 선언하지 않아도 된다.

const splitTime = timeCode.split(':');
const mins = splitTime[0];
const secs = splitTime[1];
 
// 한 줄로 줄여서 쓸 수 있다.
const [mins, secs] = timeCode.split(':');

• 코드는 간결하게 쓰는 것이 좋은데 생각보다 쉽지 않다. 한 눈에 보기 쉽게 작성하도록 노력해야겠다.