-
자바스크립트 고차함수 - filter()프론트엔드/JavaScript 2020. 10. 3. 09:08
filter 메서드란?
filter메서드란 해당 메서드를 호출한 배열에서 특정 조건을 제외한 나머지로 새 배열을 만든다.
Map 메서드는 원래 있던 배열을 그대로 복사하거나 요소들의 값만 살짝 바꿔서 새 배열을 만든다.
하지만 filter 메서드는 if문을 쓰는 것과 같다.
복사 대상이 되는 배열에서 조건에 맞는 요소만 추려서 새로운 배열을 만드는 것이다.
코드를 보면 다음과 같다.
<body> <script> let array = [1,2,3,4,5,6,7]; let array2 = array.filter(function(item){ return item%2; }) // 배열의 요소를 2로 나눠서 true인 값을 걸러냄 // 그렇게 거른 값을 새로운 배열로 생성 let array3 = array.filter(function(item, index){ return index%2; }) // 배열의 인덱스를 2로 나눠서 true인 값을 걸러냄 // 그렇게 거른 값을 새로운 배열로 생성 console.log(array2); // [1,3,5,7] 출력 console.log(array3); // [2,4,6] 출력 </script> </body>위에서 보면 알겠지만 return을 할 때 조건을 정해주면 해당 조건에 true값을 걸러 그 값으로 새로 배열을 만든다.
즉 조건의 값이 true, 1인 경우 그 값이 새로운 배열의 대상 값이 되는 것이다.
<body> <script> let array = [1,2,3,4,5,6,7]; let array2 = array.filter(function(item, index, self){ console.log("아이템: "+item+" 인덱스: "+index+" 배열: "+self); }) // 아이템: 1 인덱스: 0 배열: 1,2,3,4,5,6,7 // 아이템: 2 인덱스: 1 배열: 1,2,3,4,5,6,7 // 아이템: 3 인덱스: 2 배열: 1,2,3,4,5,6,7 // 아이템: 4 인덱스: 3 배열: 1,2,3,4,5,6,7 // 아이템: 5 인덱스: 4 배열: 1,2,3,4,5,6,7 // 아이템: 6 인덱스: 5 배열: 1,2,3,4,5,6,7 // 아이템: 7 인덱스: 6 배열: 1,2,3,4,5,6,7 </script> </body>filter 메서드 또한 forEach와 Map과 마찬가지로 filter의 인자로 제공되는 함수는
filter 메서드를 호출한 배열의 요소, 인덱스값, 배열 그 자체를 인자로 제공받을 수 있다.
필터의 실용성 검색 기능
filter의 가장 주요 기능 중 하나는 검색 기능이다.
필터는 자료를 필터링해내는 역할을 한다.
이를 활용해서 배열의 데이터를 거를 수 있는 검색 기능처럼 이용할 수 있다.
<body> <script> let hero = [ {name: "헐크", age: "34"}, {name: "배트맨", age: "37"}, {name: "스파이더맨", age: "27"}, {name: "슈퍼맨", age: "39"}, {name: "아이언맨", age: "31"} ]; let name = hero.filter(function(x){ console.log(x); return x.name.includes("헐크"); }); console.log(name); // {name: "헐크", age: "34"} 출력 </script> </body>위 코드는 단순한 필터 기능이다.
위와 같이 코드를 짜면 배열 안의 객체에서 원하는 객체만 골라낼 수 있다.
<body> <script> let hero = [ {name: "헐크", age: "34"}, {name: "배트맨", age: "37"}, {name: "스파이더맨", age: "27"}, {name: "슈퍼맨", age: "39"}, {name: "아이언맨", age: "31"} ]; function filterName(name){ return hero.filter(function(x){ return x.name.includes(name); }) } console.log(filterName("헐크")); // {name: "헐크", age: "34"} 출력 console.log(filterName("스파이더맨")); // {name: "스파이더맨", age: "27"} 출력 </script> </body>처음 검색 기능 코드는 너무 수동적이고 복잡하다면 위와 같은 코드는 조금 더 간략하다.
고차 함수의 기능을 적극 활용한 내용으로서 filterName이라는 함수는 콜백함수를 인자로 가진 filter 메서드를 반환값으로 돌려주는 함수다.
그리고 이 filterName 함수에 이름값을 인자로 주면 해당 이름값이 존재하는 객체를 걸러준다.
함수 자체는 복잡할지 모르지만 코드는 훨씬 간결해졌다.
<body> <script> let fruits = ["apple", "orange", "banana", "grape", "mango"]; function filterItems(name){ return fruits.filter(function(el){ return el.toLowerCase().indexOf(name.toLowerCase()) > -1; }) } console.log(filterItems("or")) // "orange" 출력 console.log(filterItems("ap")) // "apple", "grape" 출력 </script> </body>위 코드는 조금 더 복잡한 코드지만 잘 살펴보면 어렵지 않다.
filterItem 함수는 fruits 배열 안의 요소를 찾아주는 함수다.
우선 filterItem 함수는 fruits 배열로 filter메서드를 호출한 값을 반환한다.
그리고 fruits의 filter 메서드는 filterItems를 통해 받은 인자가 fruits 배열에 있는지 확인한다.
만약 있다면 해당 인자를 반환한다.
다만 이때 한글과 달리 영어는 대,소문자 구분을 한다.
그래서 toLowerCase() 메서드를 통해 인자로 받은 글자와
filter메서드를 통해 불러오는 배열의 요소를 모두 소문자로 치환한 다음 글자를 찾는다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 고차함수 - every(), some() (0) 2020.10.06 자바스크립트 고차함수 - reduce() (0) 2020.10.03 자바스크립트 고차함수 - Map() (0) 2020.10.03 자바스크립트 고차함수 - forEach() (0) 2020.10.03 자바스크립트 고차함수 - Sort(), reverse() (0) 2020.10.03