searchEffect06 - sort(), reverse()

https://boseungdl.github.io/webs_class/javascript/effect/searchEffect06.html

      const searchBox =document.querySelector(".search span"); //버튼
      const cssList = document.querySelector(".list ul");      //속성 리스트
      const cssCount = document.querySelector(".count")        //css 갯수

      //데이터 출력
      const updateList = function (){
        let listHTML = '';

        // for(let i=0; i<cssProperty.length; i++){
        //     listHTML += `${arr[i].num}. ${arr[i].name} : ${arr[i].desc}`;
        //     countHTML = index + 1;
        // }

        cssProperty.forEach((data, index) => {
            listHTML += `${data.num}. ${data.name} : ${data.desc}`;
            countHTML = index + 1;
        });
        cssList.innerHTML = listHTML;
        cssCount.innerHTML = countHTML;

      }
      updateList();

        //반대 정렬
        function reverse(){ 			
            cssProperty.reverse();
            updateList();
        }
        //오름차순 정렬
        function sortAscending(){		//return 값이 음수 일시 b가 a보다 먼저 위치한다.
            cssProperty.sort((a,b) => {
                return a.num - b.num;
            });
            updateList();
        }
        //내림차순 정렬
        function sortDescending(){   //return 값이 양수 일시 a가 b보다 먼저 위치한다.
            cssProperty.sort((a,b) => {
                return b.num - a.num;
            });
            updateList();
        }
         //알파벳순 정렬(a~z)
         function sortAlphabet(){		
            cssProperty.sort((a,b) => {
                let x = a.name;
                let y = b.name;
                return x.localeCompare(y)		//x.localeCompare(y)은 -1을 반환하기 때문에 a,b 순으로 정렬
            });
            updateList();
        }
        //알파벳순 정렬(z~a)
        function sortAlphabetZ(){
            cssProperty.sort((a,b) => {
                let x = a.name;
                let y = b.name;
                return y.localeCompare(x)		// y.localeCompare(x)는 1을 반환하기 때문에 b, a 순으로 정렬
            });
            updateList();
        }
        //반대로 버튼 클릭 시
        document.querySelector(".btn1").addEventListener("click", () => {
            reverse();
        })
        //오름차순 버튼 클릭 시
        document.querySelector(".btn2").addEventListener("click", () => {
            sortAscending();
        })
        //내림차순 버튼 클릭 시
        document.querySelector(".btn3").addEventListener("click", () => {
            sortDescending();
        })
        //알파벳순 정렬(a~z) 버튼 클릭 시
        document.querySelector(".btn4").addEventListener("click", () => {
            sortAlphabet();
        })
        //알파벳순 정렬(z~a) 버튼 클릭 시
        document.querySelector(".btn5").addEventListener("click", () => {
            sortAlphabetZ();
        })