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

조건을 만족하는 배열 요소 가져오기

• 유저 정보가 담긴 배열에서 ID를 기준으로 정보를 가져오고 싶을 때

구문

Array.find(callback);
Array.findIndex(callback);

실습

find() 배열에서 요소를 하나씩 하나씩 확인 후 맞으면 그(첫번 째) 요소를 반환해줍니다.

const myArray = ['곰', '사자', '여우', '원숭이'];

// 배열에서 '사자'를 가져옴
const targetUser = myArray.find((element) => {
  return element === '사자'; // 하나씩 하나씩 확인 후 '사자' 값이 맞으면 반환
});
console.log(targetUser);

findIndex() 배열에서 요소를 하나씩 하나씩 확인 후 맞으면 그(첫번 째) 요소를 반환해줍니다.

const myArray = ['곰', '사자', '여우', '원숭이'];

// 배열에서 '여우'를 가져옴
const targetUser = myArray.findIndex((element) => {
  return element === '여우';
});
console.log(targetUser);

입력한 ID의 이름 표시

index.html

<div class="search-word-wrapper">
  <label for="">
    유저 ID
    <input type="text" id="search-id-input">
  </label>
  <p id="search-result">
    유저 검색 결과 없음
  </p>
</div>

script.js

window.onload = function() {

  const userDataList = [
    {
      id: 123,
      name: '곰',
    },
    {
      id: 1021,
      name: '사자',
    },
    {
      id: 6021,
      name: '여우',
    }
  ];
  
  // 검색 ID 입력창
  const searchIdInput = document.querySelector('#search-id-input');
  
  // 검색 결과 표시창
  const searchResult = document.querySelector('#search-result');
  
  // 문자가 입력될 때마다 내용 체크
  searchIdInput.addEventListener('keyup', (event) => {
    // 검색 ID 가져오기
    const searchId = Number(event.target.value);
    findUser(searchId);
  });
  
  function findUser(searchId) {
    const targetDate = userDataList.find((data) => data.id === searchId);
  
    // 해당 데이터가 없으면 '유저 검색 결과 없음' 표시 후 종료
    if (targetDate === undefined) {
      // console.log(targetDate);
      searchResult.textContent = '유저 검색 결과 없음';
      return;
    }
  
    // 검색 결과의 이름을 표시
    searchResult.textContent = targetDate.name;
  }
  
}