array.sort() 오름차순, 내림차순 정렬하기

배열 오름차순, 내림차순 정렬을 해보자

 

 

조건

1. 오름차순, 내림차순 버튼이 있고 버튼을 누르면 userDataList 배열에 있는 객체 값을 보여준다.

2. 오름차순 버튼을 누르면 id가 오름차순 된 순서대로 보여준다.

3. 내림차순 버튼을 누르면 id가 내림차순 된 순서대로 보여준다.

4. 최초에는 id가 오름차순 된 순서대로 보여준다. 

 

 

<div class="container">

    <button id="ascending">오름차순</button>
    <button id="descending">내림차순</button>
    
    <ul id="userList">
   
    </ul>
    
</div>

 

div 태그 안에 오름차순 버튼과 내림차순 버튼을 만들고, 버튼을 누르면 ul태그 안에 li 태그로 객체 값을 출력한다. 

 

 

 <script>
    const userDataList = [
      { id: 123, name: '홍길동' },
      { id: 3, name: '서길동' },
      { id: 47, name: '박길동' },
      { id: 763, name: '김길동' },
      { id: 14, name: '최길동' }
    ];

    const ascending = document.querySelector('#ascending');
    const descending = document.querySelector('#descending');

    function updateList() {
      let liText = '';

      for (const data of userDataList) {
        liText += `<li> ${data.id} : ${data.name}</li>`;
      }

      const userList = document.querySelector('#userList').innerHTML = liText;
    }

    function sortByAscending() {
      userDataList.sort((a, b) => {
        // console.log(`a.id : ${ a.id} , b.id : ${b.id}`);
        // console.log(a.id - b.id);
        return a.id - b.id;
      })
      updateList();
    }

    function sortByDescending() {
      userDataList.sort((a, b) => {
        // console.log(`a.id : ${ a.id} , b.id : ${b.id}`);
        // console.log(b.id - a.id);
        return b.id - a.id;
      })
      updateList();
    }

    ascending.addEventListener('click', () => {
      sortByAscending();
    })

    descending.addEventListener('click', () => {
      sortByDescending();
    })

    sortByAscending();
 </script>

 

 

결과

 

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

 

 

---

 

리뷰

 

특별하게 어려운 건 없었는데 sortByAscending과 sortByDescending에서 return 값을 설정하는데 시간이 좀 걸린 것 같다. 

sort() 메서드에서 sort(a, b)를 비교한다고 했을 때, return 값은 a가 b보다 크다면 1, 같으면 0, a가 b보다 작으면 -1이라고 생각해도 어떻게 return 값을 줘야 하는지 이해가 안 됐다. 

 

그래서 mdn을 통해 sort()을 공부하고 console.log()으로 매개변수 값들을 비교해 보니

오름차순의 경우 return a.id-b.id; 내림차순의 경우 return b.id-a.id;를 하면 되는 걸 알게 됐다.  

 

각각의 함수에서 console.log로 값을 확인해보니 확실하게 이해가 됐던 것 같다.  :)

 

 

ref:

 

Array.prototype.sort() - JavaScript | MDN