Map.js

/* 사용자 지정 데이터 특성([data-time]) 예시
  <li data-time="4:04">
        Video 58
  </li> 
*/

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

//1️⃣ Map
  const seconds = timeNodes
        .map((node) => {
          console.log(node.dataset);
          node.dataset.time;
        })
        .map((timeCode) => {
          const [mins, secs] = timeCode.split(":").map(parseFloat);
          return mins * 60 + secs;
        })
        // console.log(seconds) 
        // 1️⃣ Map => 배열 반환
        /* [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 과정 필요!
        .reduce((total, vidSeconds) => total + vidSeconds); 
      // console.log(seconds); // 17938