JavaScript 검색 구현 - 검색 키워드로 값 필터링하기.

검색 키워드를 갖고 데이터에서 해당 키워드가 있는지 유무를 알기 위해 "indexOf"를 사용한다.

 

어떤 방식으로 검색이 이뤄질까?

 > indexOf는 원 데이터가 인자로 받은 값을 갖고 있을 경우 해당 인덱스를 반환한다.

인덱스 값인 정수는 참값에 해당하므로

참인 값을 토대로 필터링해 새로운 배열을 반환해 주는 "filter"메서드와 함께 사용 시

검색 키워드를 통해 필터링된 데이터 리스트를 반환받게 된다.

 

- indexOf 심플 사용버전.

let item = "hello my name is Amanda.";
let search = "name";

if(item.indexOf(search) > -1) {
    console.log("this is true");
}

 

> 실행 시

실행 화면.

---

filter와 함께 사용 ver. 실제 검색 구현시와 동일.

 

예제) "an"이라는 검색 키워드를 포함하는 배열의 값(여기서 배열은 전체 데이터에 해당하는 예제로 인식)을 검색.

=> 결과로 "an"을 포함하는  "banana"와 "orange"를 포함하는 새로운 배열이 반환됨!

결과.

상세 설명

1) 전체 데이터 arr에 필터를 사용하며, 배열의 각 요소를 뜻하는 변수 item을 인자로 넣어준다. (화살표함수 함께 사용했음!)

2) 결과를 담을 result 변수를 만들고, 

 2-1) 각각 item들을 lowercase로 동일하게 맞춰주고(uppercase로 맞추거나, case sensitive 하게 해도 되지만 이건 개인 취향이나 상황에 따라 알아서..) 

 2-2) item에 search 키워드를 갖고 있는지, indexOf를 통해 검색.

 2-3) 인덱스가 -1보다 크다면, 정수값이 result에 담긴다.

3) result를 반환한다. (filter에 반환값이 전달되므로 정수값은 boolean의 true, false에 해당하는 값들로 치환되어

 참에 해당하는 값들만 새로운 배열 filteredList에 담긴다.

---

 

배울 땐 제대로 이해한 것 같아도, 막상 오랜만에 보거나 내가 코드를 작성하려 할 때는 헷갈리는 게 많다.

나중에 또 헷갈릴까 봐 정리..