filter 함수

배열이나 JSON 객체에 대해 콜백함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성하는 기능.

 

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

filter함수는 콜백함수와, thisArg를 매개변수로 갖는다, thisArg는 선택적으로 사용하지 않을 수 있다.

콜백함수의 매개변수로 element, index, array를 사용할 수 있다.

 

기본적으로 반복이 된다고 생각하면 된다.

element는 현재 돌고 있는 요소의 값,

index는 현재 돌고 있는 요소의 인덱스,

array는 filter에 사용되는 배열 객체.

var test = [0,1,2,3]
var newArr = test.filter(function(element,index,array){
    console.log("현재 돌고 있는 요소값 : ", element)
    console.log("현재 돌고 있는 요소의 인덱스 : ", index)
    console.log("filter에 사용되는 배열 객체 : ", array)
})

결과.

 

 

JSON 객체에 적용해보기.

20000원 이상의 음식만 골라서 새로운 배열로 만들기

var test = [{food : '아구찜', price : 35000},
            {food : '족발', price : 25000},
            {food : '닭발', price : 16000},
            {food : '치느님', price: 18000}]
var newArr = test.filter(function(element){
    return element.price >= 20000
})
console.log(newArr)

결과.

다른 방법.

var test = [{food : '아구찜', price : 35000},
            {food : '족발', price : 25000},
            {food : '닭발', price : 16000},
            {food : '치느님', price: 18000}]
var newArr = test.filter(function(element){
    if(element.price >= 20000) return true
    else return false
})
console.log(newArr)

결과

즉, return true로 반환될 때의 요소들이 새로운 배열에 저장된다.

 

 

 

또 다른 매개변수 thisArg 사용법.

thisArg는 callbackFunction 내에서 this로 사용 가능하다.

이번엔 20000원 이하의 음식 리스트를 새로 만들기.

var test = [{food : '아구찜', price : 35000},
            {food : '족발', price : 25000},
            {food : '닭발', price : 16000},
            {food : '치느님', price: 18000}]
var thisArg = {max: 20000}
var newArr = test.filter(function(element){
    if(element.price <= this.max) return true
    else return false
}, thisArg)
console.log(newArr)

결과

 

 

구분하기 쉽게 다른 예.

var test = [{food : '아구찜', price : 35000},
            {food : '족발', price : 25000},
            {food : '닭발', price : 16000},
            {food : '치느님', price: 18000}]
var thisArg = {max: 20000}
function imhungry(element){
    if(element.price <= this.max) return true  // thisArg가 this로 쓰여짐
    else return false
}
var newArr = test.filter(imhungry, thisArg)
console.log(newArr)

결과

(thisArg를 JSON으로 활용하지 않아도 된다.)