[책] 자바스크립트 코드 레시피 278 - 48일차

조건을 만족하는 배열 요소 추출하여 새 배열 만들기

• 유저 정보 배열에서 18세 이상인 유저의 정보만을 가져와 배열을 생성하고 싶을 때

구문

array.filter((value) => value === value);

실습

filter() 배열의 인덱스 값이 일치하면 새 배열로 반환합니다.

const newArray = [10, 20, 30, 40].filter((value) => value >= 30);
console.log(newArray); // [30, 40]

---

배열에 있는 문자열 훑어서 문자열 '망고' 라는 값이 일치하면 새 배열로 담아서 반환합니다.

const newArrayName = ['담배', '망고', '솔솔', '지지', '에휴'].filter((value) => value === '망고');
console.log(newArrayName[0]); // 망고

유저의 정보를 가져오기

해당하는 항목에 클릭하면 데이터를 가져옵니다. 20세 이상, 30세 이상, 40세 이상 유저의 정보를 가져옵니다.

index.html

<div class="button-wrapper">
  <button class="button" data-age="20">20세 이상</button>
  <button class="button" data-age="30">30세 이상</button>
  <button class="button" data-age="40">40세 이상</button>
</div>
<ul class="user_list">

script.js

window.onload = () => {
  // 유저의 데이터
  const userDataList = [
    {
      myName: '곰',
      age: '18',
    },
    {
      myName: '여우',
      age: '27',
    },
    {
      myName: '사자',
      age: '32',
    },
    {
      myName: '얼룩말',
      age: '41',
    },
    {
      myName: '기린',
      age: '56',
    },
  ];
  
  document.querySelectorAll('.button-wrapper .button').forEach((element) => {
    element.addEventListener('click', (event) => {
      onClickButton(event);
    });
  });
  
  function onClickButton(event) {
    const button = event.target; // 클릭한 요소
    const targetAge = button.dataset.age; // data-age 가져오기
    const filterdList = userDataList.filter((data) => data.age >= targetAge);
    updataList(filterdList);
  }

  function updataList(filterdList) {
    let listHtml = '';

    for (const data of filterdList) {
      listHtml = listHtml + `<li>${data.myName} : ${data.age}세</li>`;
    }
    document.querySelector('.user_list').innerHTML = listHtml;
  }
}