[javascript] 배열에서 특정한 문자열을 포함한 경우만 뽑아 보았다.

가짜 검색창 기능을 만들어보면서, 제일 궁금했던 것은 어떻게 특정한 문자열을 포함한 리스트를 가져오는가 였다.

구글에 검색해보니 다양한 방법들이 존재했는데, 그 중에서도 간단하게 써먹을 만한 것을 하나 기록해볼 것이다.

 

우선 사용된 배열의 메서드는  filter() 하고 indexOf() 메서드 두 개이다.  filter  메서드는 조건에 일치하는 요소만 뽑아서 새로운 배열로 반환하는 메서드이고, indexOf 메서드는 접근한 문자열이 파라미터와 일치하는 경우 해당 문자가 위치한 인덱스 번호를 반환하는 메서드인데,

 

indexOf 메서드에서 걸러낸 인덱스 번호에 위치하는 문자열을  filter 메서드가 순회하면서 새로운 배열로 반환해주는 과정을 거친다. 아무튼, 이에 대한 설명을 포함해서 작성해보면 다음 코드로 정리된다.

let userInput = document.getElementById('user_input');
let btn = document.querySelector('.btn');



//유저가 버튼을 클릭하면, input의 value를 st 변수에 저장하고, 그것을 filters() 함수의 매개변수로 보냄
let result = btn.addEventListener('click',()=>{
    let st = userInput.value;

    filters(st);
});



function filters(st){

// filter() 메서드로 순회하면서 비교할 리스트 
    const list = [
        {name:"kim2", pw:1234},
        {name:"kgm", pw:124},
        {name:"kiufd", pw:122},
        {name:"kfdsfim", pw:142},
        {name:"kittrm", pw:162},
        {name:"kierem", pw:12},
        {name:"kweim", pw:132},
        {name:"kirrm", pw:112},
        {name:"kimyy", pw:122},
    ];
    
// list 의 요소 중 name의 값을 순회하면서 유저가 입력한 값과 일치하는 인덱스가 있다면 ture로 보고
// 해당 요소로만 구성된 새로운 리스트로 반환한다.
    const fil = list.filter((el)=>{
        return el.name.indexOf(st) !== -1
    });

};

 

 

위 코드에서 

--------------------------------------------------

   const fil = list.filter((el)=>{
        return el.name.indexOf(st) !== -1
    })

--------------------------------------------------

와 같이 indexOf 메서드의 결과에 비교연산를 한 부분이 있는데, 만일 이 과정을 거치지 않는다면, 거짓인 부분은 -1로, true인 경우에는 해당 문자열이 위치한 인덱스 번호만을 반환하므로 filter 메서드의 입장에서는 무엇이 true 이고  false인지 구분하지 못한다.

 

따라서  " indexOf 메서드의 결과가 -1이 아니라면 나머지 인덱스 번호는 true로 출력해줘! " 라는 의미에서 !== -1 을 사용하는 것이다.