자바스크립트 filter 함수는 배열에서 조건에 맞는 요소만을 걸러내어 새로운 배열에 담아서 리턴을 해주는 함수입니다.
자바스크립트 filter 의 정의
자바스크립트 fileter 배열은 다음과 같은 정의를 가지게 됩니다.
arr.filter(callback(element[, index[, array]])[, thisArg])
- callback : 각 요소에 대해 처리할 콜백함수, True인 경우 취하고, False 인 경우 없앰
- element : 처리할 현재의 요소 객체
- index : 처리할 요소의 인덱스 : option
- arrray : filter를 호출한 배열 : option
콜백 함수에는 elelemt를 넣어주고 필요시 index 등의 추가 파라매터를 넘겨주면 됩니다.
filter 의 경우, map과 마찬가지로 새로운 배열 객체를 생성하게 됩니다.
자바스크립트 filter를 활용한 코드
아래의 결과는 10보다 큰 수만을 골라 새로운 배열에 담아 리턴하게 됩니다.
<script>
function callFuc( value ){
return value >=10;
}
let filtered = [1, 20, 30, 3, 5].filter( callFuc );
console.log( filtered );
</script>배열 객체에서 이름이 동일한 요소만을 가져오는 내용입니다. filter를 활용한 search function 입니다.
<script>
let lists = ['apple', 'banana', 'orange', 'grapes', 'mango' ];
function filterItem( sel ){
return lists.filter( (elem) => {
return elem.toLowerCase().indexOf( sel ) > -1;
})
}
console.log( filterItem( "banana" ) )
</script>
다음은 boolean 값이 true인 내역을 추출하는 filter 사용법입니다. 각 객체리터럴 요소를 반복하며 alreadyDone 값이 true 인 내역만 추출해 오는 코드입니다.
<script>
const descList = [
{
id: 1,
text: "첫번째 요소",
alreadyDone: true,
},
{
id: 2,
text: "두번째 요소",
alreadyDone: false,
},
{
id: 3,
text: "세번째 요소",
alreadyDone: true,
},
];
const alreadyDoneList = descList.filter((elem) => {
return elem.alreadyDone === true;
});
console.log(alreadyDoneList)
</script>
아래의 내용은 배열 filter를 활용해서 짝수 번호만 추출하는 함수입니다.
<script>
//짝수 번호만 조회하는 코드
const nums = [1,2,3,4,5,6,7,8,9];
const ret = nums.filter( ( elem ) => {
return ( elem % 2 === 0 ? true : false )
})
console.log( ret );
</script>
다음은 길이가 4 이상인 리스트만을 추출해서 리턴하는 코드입니다.
<script>
let arrList = ["tiger", "lion", "dog", "cat"];
let retList = arrList.filter((value) => {
value.length >= 4;
});
console.log(retList);
</script>
json 형태의 코드는 다음과 같이 활용할 수 있습니다.
<script>
let jsonData = [
{"name" : "영수"},
{"name" : "철수"},
{"name" : "제임스"},
{"name" : "수지"},
{"name" : "명철"},
]
// json 데이터의 name이 세글자가 넘어가는 것의 목록
let resultList = jsonData.filter( ( word ) => {
return word.name.length >= 3 ;
})
console.log( resultList )
</script>
this 키워드는 다음과 같이 활용합니다. 콜백 함수 다음 파라메터에 참조 객체를 주게 되면 배열 function 내부에서 this 키워드로 활용이 가능합니다.
<script>
var testArray = [1, 22, 33, 44, 55, 66, 100];
var minMax = { min: 20, max: 50 };
function getBetween(value) {
return value >= this.min && value <= this.max;
}
// 콜백 함수 다음 파라메터에 참조 객체를 주게 되면 this 키워드로 활용
var resultArray = testArray.filter(getBetween, minMax); // 두번째 인수를 obj로 줘서 this를 조작함
console.log(resultArray);
</script>
이상으로 자바스크립트 배열 filter 함수를 알아보았습니다. 더 자세한 사항은 모질라 mdn 문서 를 참고해 보시기 바랍니다.
그리고 자바스크립트 배열 함수의 forEach 문을 참고하고자 한다면 이 글을 참고 해 보시기 바랍니다.