[JS] filter 함수 특징 정리

노마드 코더 - 바닐라 JS로 크롬앱 만들기 클래스를 듣다가 정리한다!

 

/* filter 함수 

// filter함수는 함수 정의를 필요로하고, 원리는, Array에서 없애고 싶은 것만 빼고 새로운 array를 만드는 역할

// forEach함수와 비슷한 역할을 함. array의 각 item들을 함수의 첫 argument로 전달하는 형식으로 함수를 호출함

// ex) [1,2,3,4].filter(sexyFilter) 일 경우,

sexyFilter(1)

sexyFilter(2)

sexyFilter(3)

sexyFilter(4)

과 같은 식으로 함수 호출한다.

배열 속 item이 네 개이니, sexyFilter 함수를 네 번 호출

 

filter function(여기선 sexyFilter)은 new array를 줌

 

true와 false를 이용해서 배열 속 item을 유지 or 삭제를 한다

// [1,2,3,4]를 새 array에서도 유지시키고 싶다면, sexyFilter는 반드시 true를 리턴시켜야함!

// 만약 false을 리턴하면, 그 item은 새 array에 포함되지 않을 것임 

 

 

배열 속 모든 요소를 유지하고 싶을 때

 

배열 속 모든 요소를 없애고 싶을 때

 

3만 제외한 새 배열을 만들고 싶을 때

 

 

 

예제

제외하고 싶은 것이 있다면, 질문만 제대로 하면 된다!

 

 

banana만 제외하고 싶을 때

banana가 아니었으면(!==) 좋겠어!를 코딩

 

1000보다 큰 수들을 지우고 싶을 때 

1000보다 작거나 같냐고(<=) 물어봐야하는 것임!

 

제대로 결과가 나오게 됨

 

 

배열 속 item이 Object일 경우

todo.id로 불러와서 비교해야함

 

Array의 각 item인 {text:"lalala"}와 {text:"lololo"}가 각각 

filter function(이 상황에선 sexyFilter)의 첫 번째 argument로 각각 전달되는 상황

 

todo는 아무렇게나 지은 이름. 

 

정리하면,

순서1. filter함수를 정의한다(여기선 sexyFilter) 없애고 싶은 요소만 false를 반환할 수 있도록.

순서2. 배열에 filter함수를 씌워서 필터링을 한다.

 

 

적용 예시

arr에서 2보다 작거나 같은 item들을 없앤 newArr

*심지어 filter function을 정의하지 않고 (화면처럼) 바로 코딩도 가능

*참고로 item은 내가 정한 이름! tomato로 이름 지어도 됨 ㅎㅎ