[Javascript] 글자순 필터 기능

이렇게 마구잡이로 정렬되어있던 글들을 가나다순, 역순으로 정렬해주는 필터를 만들어보았다.

 

HTML

  <ul class="box">

   

  </ul>

  <button class="filter">가나다순정렬</button>

  <button class="reverse-filter">역순정렬</button>

짜잔 아무 것도 없다.

 

CSS

*{

  padding: 0;

  margin: 0;

  list-style: none;

}

.box li{

  padding: 30px;

  font-size: 40px;

  border-bottom: 4px solid black;

}

button{

  padding: 30px;

  font-size: 40px;

}

css도 뭐 별거없다.

 

JAVASCRIPT

let list = ['고양이','치킨','햄버거','다람쥐','안녕하세요'];

list.forEach(function(data, i){

  let template = `<li>${data}</li>`;

  document.querySelector('.box').insertAdjacentHTML('beforeend',template);

});

document.querySelector('.filter').addEventListener('click',function(){

  let copy = list;

  copy.sort();

  document.querySelector('.box').innerHTML = '';

  copy.forEach(function(data){

    let template = `<li>${data}</li>`;

    document.querySelector('.box').insertAdjacentHTML('beforeend',template);

  });

});

document.querySelector('.reverse-filter').addEventListener('click',function(){

  let copy = list;

  copy.sort(function(a, b){

    if( a > b ){

      return -1

    } else{

      return 1

    }

  });

  document.querySelector('.box').innerHTML = '';

  copy.forEach(function(data){

    let template = `<li>${data}</li>`;

    document.querySelector('.box').insertAdjacentHTML('beforeend',template);

  });

});

HTML과 모든 기능들은 js에 숨겨두었다.

 

우선 가상의 서버데이터라고 생각하고 array를 list에 담아두었다.

그리고 forEach반복문을 통해 ul안에 li를 템플릿으로 만들어 insertAdjacentHTML이라는 것으로 요소를 집어넣어주었다. beforeend의 의미는 새로운 요소는 마지막으로 두어라~ 라는 뜻이다.

 

그리고 각 버튼을 클릭하면 정렬되게 이벤트리스너를 부여했다.

 

가나다순 버튼은 .sort()라는 함수로 간단하게 정렬했다. sort는 글자 순서대로 array를 정리해주는 함수이다.

 

역순 버튼 또한 .sort()라는 함수를 썼는데, 콜백함수를 넣어서 조건문을 넣어주었다. 파라미터에 a,b의 의미는 array자료 안에 선택된 두가지 요소들이다. 그래서 a와 b를 비교해서 a가 더 크면 return -1로 해두었는데, 이 의미는 return값이 음수이면 a의 값을 왼쪽으로 보내준다. 즉 array 자료 안에 있는 데이터들을 각각 다 비교해 제일 큰(한글에서는 자음 'ㅎ') 자료를 오른쪽으로 보내서 제일 앞에 배치되게 된다. 이러면 역순 끝~

 

이벤트리스너 안에 굳이 copy본을 만들어서 copy본을 정렬하는 것을 볼 수 있는데 이 이유는 원래의 자료를 훼손시키게 되면 나중에 원상태의 array자료를 불러올 때 어려움이 있을 수 있기 때문에 복사본으로 다루는 것이 안전하다. 습관적으로 하면 좋은 관습일 것이다.