Javascript30 - Adding Up Times with Reduce

seeh_h·2021년 2월 4일
1

javascript30

목록 보기
15/16
post-thumbnail

이번 실습은 영상이 쭉 있다고 가정하고, data-time(dataset attribute)에 표현되어 있는 영상 길이 정보를 한번에 가져와서 console.log로 찍는 연습을 해보았다.

map과 reduce를 적절하게 연습해 볼 수 있었던 굉장히 유익한 실습이었다. 😁

Learning Point

  • Array.from에 대해 학습한다.
  • Array.prototype.map, Array.prototype.reduce에 대해 학습한다

HTML Part

<!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>
      <li data-time="5:59">Video 11</li>
      <li data-time="3:07">Video 12</li>
      <li data-time="11:29">Video 13</li>
      <li data-time="8:57">Video 14</li>
      <li data-time="5:49">Video 15</li>
      <li data-time="5:52">Video 16</li>
      <li data-time="5:50">Video 17</li>
      <li data-time="9:13">Video 18</li>
      <li data-time="11:51">Video 19</li>
      <li data-time="7:58">Video 20</li>
      <li data-time="4:40">Video 21</li>
      <li data-time="4:45">Video 22</li>
      <li data-time="6:46">Video 23</li>
      <li data-time="7:24">Video 24</li>
      <li data-time="7:12">Video 25</li>
      <li data-time="5:23">Video 26</li>
      <li data-time="3:34">Video 27</li>
      <li data-time="8:22">Video 28</li>
      <li data-time="5:17">Video 29</li>
      <li data-time="3:10">Video 30</li>
      <li data-time="4:43">Video 31</li>
      <li data-time="19:43">Video 32</li>
      <li data-time="0:47">Video 33</li>
      <li data-time="0:47">Video 34</li>
      <li data-time="3:14">Video 35</li>
      <li data-time="3:59">Video 36</li>
      <li data-time="2:43">Video 37</li>
      <li data-time="4:17">Video 38</li>
      <li data-time="6:56">Video 39</li>
      <li data-time="3:05">Video 40</li>
      <li data-time="2:06">Video 41</li>
      <li data-time="1:59">Video 42</li>
      <li data-time="1:49">Video 43</li>
      <li data-time="3:36">Video 44</li>
      <li data-time="7:10">Video 45</li>
      <li data-time="3:44">Video 46</li>
      <li data-time="3:44">Video 47</li>
      <li data-time="4:36">Video 48</li>
      <li data-time="3:16">Video 49</li>
      <li data-time="1:10">Video 50</li>
      <li data-time="6:10">Video 51</li>
      <li data-time="2:14">Video 52</li>
      <li data-time="3:44">Video 53</li>
      <li data-time="5:05">Video 54</li>
      <li data-time="6:03">Video 55</li>
      <li data-time="12:39">Video 56</li>
      <li data-time="1:56">Video 57</li>
      <li data-time="4:04">Video 58</li>
    </ul>

Javascript Part

const timeNodes = Array.from(document.querySelectorAll("li"));

let seconds = timeNodes
  .map((li) => li.dataset.time)
  .map((timeCode) => {
    const [mins, secs] = timeCode.split(":").map(parseFloat);
    return mins * 60 + secs;
  })
  .reduce((total, curSeconds) => total + curSeconds);

const hour = Math.floor(seconds / 3600);
const min = Math.floor(seconds / 60 - hour * 60);
seconds = seconds % 60;

console.log(hour, min, seconds);

정리

Array.from

Array.from() 메서드는 유사 배열 객체(array-like object)나 반복 가능한 객체(iterable object)를 얕게 복사해 새로운 Array 객체로 만든다.

따라서 document.querySelectorAll로 가져온 유사 배열 객체를 배열로 변환해서 map과 reduce 메서드를 사용할 수 있게 만들었다.


javascript30을 진행하면서 가장 많이 배우는 것은 '깔끔한 코딩 스타일'인것 같다.

먼저 코드를 작성해 본 후, 정답 코드와 비교하면 내가 작성한 것보다 훨~씬 깔끔한 방식으로 작성된 코드를 보게 된다.😂😂

잘하는 사람의 코드를 읽는 것만 해도 많은 도움이 된다고 하는데, 실제로 많이 성장하고 있는 것 같아 뿌듯하다. 💪💪

profile
주니어 개발자 성장기😎

0개의 댓글