Search Effect05 - filter( )

const cssProperty = [
    {name: "accent-color", desc: "accent-color 속성은 일부 사용자 인터페이스 컨트롤의 액센트 색상을 설정합니다."},
    {name: "align-content", desc: "align-content 속성은 콘텐츠 항목 사이 및 주위의 공간 분포를 설정합니다."},
    {name: "align-items", desc: "align-items 속성은 모든 직계 자식의 align-self 값을 그룹으로 설정합니다."},
	//중략...  
]

const searchBox = document.querySelectorAll(".search span");    //검색버튼(#search_box)을 변수(searchBox)에 저장
const cssList = document.querySelector(".list ul");    //속성의 리스트를 변수(cssList)에 저장
const cssCount = document.querySelector(".count em");    //전체 속성 갯수(.count)를 변수(cssCount)에 저장
let listHTML = "";    //변수(listHTML) 선언

//목록 보여주기
function upDataList(list){    //함수(upDataList) 정의
    listHTML = "";    //변수(listHTML) 리셋

    //반복문: 변수(list)의 수만끔 반복실행
    for(const data of list){
        listHTML += `<li>${data.name} : ${data.desc} <span>${data.view}</span></li>`;    //변수(listHTML)에 데이터 추가
    }
    // for(let i=0; data<cssProperty.length i++){
    //     listHTML += `<li>1</li>`;
    // }
    // cssProperty.forEach(el => {
    //     listHTML += `<li>1</li>`;
    // })
    cssList.innerHTML = listHTML;    //변수(cssList)에 변수(listHTML)를 저장하여 HTML문서에 표현(innerHTML)
};
upDataList(cssProperty);    //함수(upDataList)를 변수(cssProperty)에 대하여 실행

//버튼 클릭하기
searchBox.forEach(span => {    //검색버튼(#search_box)에 대하여
    span.addEventListener("click", () => {    //검색버튼(#search_box)의 값을 클릭하는(click) 이벤트 발생하는 경우(addEventListener)
        const target = span.dataset.view    //변수(target)에 클릭한 검색버튼(#search_box)의 값 중에서 뷰값(dataset.view)을 저장
        const filterList = cssProperty.filter(data => data.view >=target)    //변수(filterList)에 변수(cssProperty)의 뷰값(dataset.view)이 변수(target)보가 크거나 같으면 찾아서(filter) 저장

        upDataList(filterList);    //함수(upDataList)를 변수(filterList)에 대하여 실행
    });
});

• filter( ) 참조
• 매개변수 참조
• 연산자 참조
• for of문 참조