[JS30] - 18) Adding Up Times with Reduce

🍟 시간 배열 만들기

  const $timeList = document.querySelectorAll('li')
  console.log($timeList)
  const timeArr = [];
  $timeList.forEach((times) => timeArr.push(times.dataset.time))

처음에는 이렇게 만들었는데,
이렇게 배열을 따로 만들고 일일히 푸시할 필요는 없었다.

map

DOM요소를 가져왔으므로 $timeList는 유사배열객체인 노드리스트이다.
여기서 Array.from으로 배열로 만들어준다음, map을 사용해 data-time 값만 가져온다.

  const $timeList = Array.from(document.querySelectorAll('li'))
  const $times = $timeList
    .map(node => node.dataset.time)

  console.log($times)

🍟 분, 초 분리하고 모두 초로 계산하기

구조분해 할당 Destructuring

 const $times = $timeList
    .map(node => node.dataset.time)
    .map(timeCode => {
      const [mins, secs] = timeCode.split(':').map(parseFloat);
    })

[ "6:30","5:18"]과 같은 형태로 시간이 배열에 담겨있었다. 이것을 :를 기준으로 쪼개 숫자형으로 변환한 다음, 각각 mins와 secs로 변수를 지정해준다.

  const $times = $timeList
    .map(node => node.dataset.time)
    .map(timeCode => {
      const [mins, secs] = timeCode.split(':').map(parseFloat);
      return (mins * 60) + secs;
      console.log(mins,secs)
    })
  
  // [343, 153, 225, 47, 321, 416, 226, 325, 194, 211, 359, 187, 689, 537, 349, 352, 350, 553, 711, 478, 280, 285, 406, 444, 432, 323, 214, 502, 317, 190, 283, 1183, 47, 47, 194, 239, 163, 257, 416, 185, 126, 119, 109, 216, 430, 224, 224, 276, 196, 70, 370, 134, 224, 305, 363, 759, 116, 244]

리턴했을 때 다음과 같은 결과가 나온다.

🍟 전체 초의 합계 구하기

reduce

초로 모두 변환한 배열을 리턴하는 $times.
여기에 reduce로 모든 배열의 합계를 구한다.

  const $times = $timeList
    .map(node => node.dataset.time)
    .map(timeCode => {
      const [mins, secs] = timeCode.split(':').map(parseFloat);
      return (mins * 60) + secs;
    })
    .reduce((total, vidSeconds) => total + vidSeconds);

🍟 합계를 시간/분/초로 변환하기

    let secondsSum = $times;
    const hours = Math.floor(secondsSum / 3600);
    secondsSum = secondsSum % 3600;
    const mins = Math.floor(secondsSum / 60);
    secondsSum = secondsSum % 60;

    console.log(hours, mins, secondsSum)//4 58 58

앞에서 합계를 구한 전체 초를 우선 3600으로 나누어 시간을 구한다.
여기서 중요한데, 나누어 시간을 구하고 남은 나머지 초로 다시 분을 구해야 한다.
secondsSum에 다시 3600으로 나눈 나머지를 할당한 뒤, 60으로 나누어 분을 구한다.
똑같이 처음 secondsSum에 60으로 나눈 나머지를 할당하면 남은 초가 된다.