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

객체를 포함하는 배열 정렬하기

• 배열 요소를 오름차순/내림차순으로 정렬하고 싶을 때

실습

index.html

<div class="button-wrapper">
  <button class="ascending">오름차순</button>
  <button class="descending">내림차순</button>
</div>
<ul class="user_list">
  <!-- 자바스크립트로 태그 넣기 -->
</ul>

script.js

window.onload = () => {
  
  // 유저 데이터
  const userDataList = [
    {
      id: 2,
      name: '곰',
    },
    {
      id: 10,
      name: '여우',
    },
    {
      id: 4,
      name: '사자',
    },
    {
      id: 29,
      name: '기린',
    },
    {
      id: 101,
      name: '호랑이',
    },
  ];
  
  // 데이터 표시 업데이트
  function updateList() {
    let listHtml = '';
  
    for (const data of userDataList) {
      listHtml = listHtml + `<li>${data.id} : ${data.name}</li>`;
    }
  
    document.querySelector('.user_list').innerHTML = listHtml;
  }

  // 오름차순 정렬
  function sortByAscending() {
    userDataList.sort((a, b) => {
      return a.id - b.id;
    });
    updateList();
  }

  // 내림차순 정렬
  function sortByDescending() {
    userDataList.sort((a, b) => {
      return b.id - a.id;
    });
    updateList();
  }

  // 오름차순 버튼 클릭 시 처리 작업
  document.querySelector('.ascending').addEventListener('click', () => {
    sortByAscending();
  });

  // 내림차순 버튼 클릭 시 처리 작업
  document.querySelector('.descending').addEventListener('click', () => {
    sortByDescending();
  });

  // 오름차순으로 초기 정렬
  sortByAscending();
}