[JS] filter() 사용하여 조건 검색 만들기

songtak·2020년 11월 8일
6

JS

목록 보기
1/1

filter()란?

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 메서드입니다.
값이 없는 배열 요소에 대해 함수를 실행하지 않고, 원래 배열을 변경하지 않습니다.

예제

arr.filter(callback(element[, index[, array]])[, thisArg])

매개변수

callback
각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다. 다음 세 가지 매개변수를 받습니다.

element 처리할 현재 요소.

index Optional 처리할 현재 요소의 인덱스.

array Optional filter를 호출한 배열.

thisArg Optional callback을 실행할 때 this로 사용하는 값.

반환 값
테스트를 통과한 요소로 이루어진 새로운 배열.
어떤 요소도 테스트를 통과하지 못했으면 빈 배열을 반환합니다.

설명
filter()는 배열 내 각 요소에 대해 한 번 제공된 callback 함수를 호출해,
callback이 true로 강제하는 값을 반환하는 모든 값이 있는 새로운 배열을 생성합니다.
callback은 할당된 값이 있는 배열의 인덱스에 대해서만 호출됩니다.
삭제됐거나 값이 할당된 적이 없는 인덱스에 대해서는 호출되지 않습니다.
callback 테스트를 통과하지 못한 배열 요소는 그냥 건너뛰며 새로운 배열에 포함되지 않습니다.

callback은 다음 세 인수와 함께 호출됩니다:

1. 요소값
2. 요소 인덱스
3. 순회(traverse)되는 배열 객체

thisArg 매개변수가 filter에 제공된 경우, 호출될 때 그 값은 callback의 this 값으로 전달됩니다.
그 이외에, undefined값도 callback의 this 값으로 쓰기 위해 전달됩니다.
결국 callback에 의해 관찰될 수 있는 this 값은 this를 결정하는 함수의 평소 규칙에 따라 결정됩니다.

filter()는 호출되는 배열을 변화시키지(mutate) 않습니다.

filter()에 의해 처리되는 요소의 범위는 callback의 첫 호출 전에 설정됩니다.
filter() 호출 시작 이후로 배열에 추가된 요소는 callback에 의해 방문되지 않습니다.
배열의 기존 요소가 변경 또는 삭제된 경우,
callback에 전달된 그 값은 filter()가 그 요소를 방문한 시점에 값이 됩니다.
삭제된 요소는 반영되지 않습니다.

리액트에서 useEffect를 사용해 검색 구현하기

    useEffect(() => {
        setDataList(props.data.filter((object) => object.title.toLowerCase().includes(inputValue.toLowerCase()) || object.subtitle.toLowerCase().includes(inputValue.toLowerCase())));
    }, [inputValue]);

useEffect를 사용해 두번째 인자에 inputValue를 넣어 inputValue가 변경 할 때 마다 함수가 실행 되도록 설정하였다.

그럼 여기서 toLowerCase()은 무엇이고 왜 사용했을까?

toLowerCase()는 호출 문자열을 소문자로 변환한 새로운 문자열을 반환하고 원래의 값에 영향을 주지 않는 메서드

includs()같은 경우에 대문자와 소문자를 구분하기 때문에 대문자가 검색할 데이터와 inputValue를 전부 소문자로 바꿔 정확한 검색이 가능하도록 합니다.

includes()는 배열이 특정 요소를 포함하고 있는지 판별

toLowerCase()을 사용할 때 소문자 i를 검색시 대문자 소문자 모두 검색되는 것을 확인할 수 있다.

toLowerCase()을 사용하지 않을 시 소문자 i를 검색하니 대문자인 Incheon은 검색되지 않는걸 확인 할 수 있다.

출처

profile
멋쟁이 개발자

0개의 댓글