Array Cardio Day 2

κΈ°λ³Έ μ½”λ“œ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Array Cardio πŸ’ͺπŸ’ͺ</title>
</head>
<body>
  <p><em>Psst: have a look at the JavaScript Console</em> πŸ’</p>
  <script>
    // ## Array Cardio Day 2

    const people = [
      { name: 'Wes', year: 1988 },
      { name: 'Kait', year: 1986 },
      { name: 'Irv', year: 1970 },
      { name: 'Lux', year: 2015 }
    ];

    const comments = [
      { text: 'Love this!', id: 523423 },
      { text: 'Super good', id: 823423 },
      { text: 'You are the best', id: 2039842 },
      { text: 'Ramen is my fav food ever', id: 123523 },
      { text: 'Nice Nice Nice!', id: 542328 }
    ];


    // Array.prototype.find()
    // Find is like filter, but instead returns just the one you are looking for
    // find the comment with the ID of 823423

    // Array.prototype.findIndex()
    // Find the comment with this ID
    // delete the comment with the ID of 823423

  </script>
</body>
</html>

λͺ©ν‘œ

Array Cardio Day1에 이어 각쒅 μžλ°”μŠ€ν¬λ¦½νŠΈ λ©”μ†Œλ“œλ₯Ό μ΅ν˜€λ΄„

κ³Όμ •

  1. some()
  2. every()
  3. find()
  4. findIndex(), slice()

μ½”λ“œ 뢄석

  1. some()

     // Array.prototype.some() // is at least one person 19 or older?
     const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19);
    
     console.log({isAdult});
    

    κΈ°λ³Έ μ½”λ“œμ—μ„œ μ„ μ–Έν•œ people에 19μ‚΄ 이상이 ν•œλͺ… 이상 μžˆλŠ”μ§€ μ•Œμ•„λ³΄κΈ° μœ„ν•œ μ½”λ“œλ₯Ό μž‘μ„±
    some()은 μ•žμ˜ λ°°μ—΄μ˜ λ‚΄μš© 쀑 쑰건에 λ§žλŠ”κ²ƒμ΄ μžˆλ‹€λ©΄ true μ—†λ‹€λ©΄ falseλ₯Ό λ°˜ν™˜ν•˜λŠ” λ©”μ†Œλ“œ.
    κ΄„ν˜Έ μ•ˆμ˜ λ‚΄μš©μ€ ν˜„μž¬ μ‹œκ°„μ—μ„œ λ„€μžλ¦¬λ‘œ ν˜„μž¬ 연도λ₯Ό μ–»μ–΄ λ‚Έ λ’€ νƒœμ–΄λ‚œ 년도λ₯Ό 뺐을 λ•Œ 19 이상이 μžˆλŠ”μ§€
    ν™•μΈν•˜λŠ” μ½”λ“œ, μ½˜μ†”μ„ 톡해 κ²°κ³  확인

  2. every()

     // Array.prototype.every() // is everyone 19?
     const allAdults = people.every(person => ((new Date()).getFullYear()) - person.year >= 19);
     console.log({allAdults});
    

    κΈ°λ³Έ μ½”λ“œμ—μ„œ μ„ μ–Έν•œ people에 λͺ¨λ‘ 19μ‚΄ 이상인지 μ•Œμ•„λ³΄κΈ° μœ„ν•œ μ½”λ“œλ₯Ό μž‘μ„±
    every()λŠ” μ•žμ˜ λ°°μ—΄μ˜ λ‚΄μš©μ΄ λͺ¨λ‘ 쑰건에 λ§žλ‹€λ©΄ true μ—†λ‹€λ©΄ falseλ₯Ό λ°˜ν™˜ν•˜λŠ” λ©”μ†Œλ“œ
    κ΄„ν˜Έ μ•ˆμ˜ λ‚΄μš©μ€ μœ„μ™€ 동일, μ½˜μ†”μ„ 톡해 κ²°κ³Ό 확인

  3. find()

     // Array.prototype.find()
     // Find is like filter, but instead returns just the one you are looking for
     // find the comment with the ID of 823423
    
     const comment = comments.find(comment => comment.id === 823423);
    
     console.log(comment);
    

    κΈ°λ³Έ μ½”λ“œμ—μ„œ μ„ μ–Έν•œ commentμ—μ„œ IDκ°€ 823423인 값이 μžˆλŠ”μ§€ μ°ΎκΈ° μœ„ν•΄ μ‚¬μš©
    λΆ€μ—°μ„€λͺ…이 λ”°λ‘œ ν•„μš” 없이 μ½”λ“œ 그자체둜 이해가 κ°€λŠ₯, μ½˜μ†”μ°½μ— κ²°κ³Ό 좜λ ₯

  4. findIndex(), slice()

    // Array.prototype.findIndex()
     // Find the comment with this ID
     // delete the comment with the ID of 823423
     const index = comments.findIndex(comment => comment.id === 823423);
     console.log(index);
    
     // comments.splice(index, 1);
     const newComments = [
         ...comments.slice(0, index),
         ...comments.slice(index + 1)
     ];
     console.log(newComments);
    

    κΈ°λ³Έ μ½”λ“œμ—μ„œ μ„ μ–Έν•œ commentμ—μ„œ IDκ°€ 823423인 값을 μ°Ύμ•„ indexλ₯Ό λ°˜ν™˜ν• λ•Œ μ‚¬μš©
    μ½˜μ†”μ°½μ— κ²°κ³Ό 좜λ ₯
    λ°°μ—΄μ•ˆμ— ...을 μ‚¬μš©ν•΄ μƒˆλ‘œμš΄ λ°°μ—΄ newCommentsμ•ˆμ— idκ°€ 823423인 값을 λΊ€ λ‚˜λ¨Έμ§€λ₯Ό λ„£λŠ” μ½”λ“œ,
    주석과 μ•„λž˜μ˜ μ½”λ“œκ°€ λ™μΌν•˜λ©° slice()와 splice()의 μ°¨μ΄λŠ” μ•„λž˜μ— μ μ–΄λ‘μ—ˆμŒ

μ°Ύμ•„λ³Έ λ‚΄μš©, μ•Œκ²Œλœ λ‚΄μš©λ“€

findIndex() - μΌμΉ˜ν•˜λŠ” κ°’μ˜ 색인을 λ°˜ν™˜ν•  λ•Œ μ‚¬μš©
slice() - 숫자만큼 λ’€μ—μ„œλΆ€ν„° 배열을 μΆ”μΆœ
splice() - 숫자만큼 λ’€μ—μ„œλΆ€ν„° 배열을 μ‚­μ œ
... - μ „κ°œ μ—°μ‚°μž(spread operator)/ 식이 μ—¬λŸ¬ 인수(ν•¨μˆ˜ 호좜 용)λ‚˜ μ—¬λŸ¬ μš”μ†Œ(λ°°μ—΄ λ¦¬ν„°λŸ΄ 용) λ˜λŠ” μ—¬λŸ¬ λ³€μˆ˜(비ꡬ쑰화 ν• λ‹Ή 용)κ°€ μ˜ˆμƒλ˜λŠ” 곳에 ν™•μž₯될 수 μžˆλ„λ‘ 함

'개발 > JavaScript30' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

9. Dev Tools Domination  (0) 2017.04.09
8. Fun with HTML Canvas  (0) 2017.04.07
7. Array Cardio Day 2  (0) 2017.04.07
6. Type Ahead  (0) 2017.04.06
5. Flex Panel Gallery  (0) 2017.04.05
4. Array Cardio Day 1  (0) 2017.04.04

+ Recent posts