7. Array Cardio Day 2 ( JavaScript30 )

Dev/JavaScript30

7. Array Cardio Day 2 ( JavaScript30 )

takeU 2021. 7. 8. 15:12

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에 이어 각종 자바스크립트 메소드를 익혀봄

과정

some()
every()
find()
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() - 일치하는 값의 색인을 반환할 때 사용

저작자표시 비영리 변경금지

현재글7. Array Cardio Day 2 ( JavaScript30 )

takeU