javascript 배열 메소드 filter 함수

javascript 배열 메소드인 filter 함수를 알아보겠습니다.

filter 함수는 특정 조건에서 true 인 결과만 뽑아 새로운 배열로 리턴해 주는 함수입니다.

이 함수에서 매개변수를 사용할수 있는데요

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

- callback

1.element : 호출할 배열의 요소

2.index : 요소 인덱스

3.array : 호출할 배열 

-thisArg 

콜백에서 this

그럼 예제를 통해 알아볼까요

    
var fruit = ['사과','메론','수박','바나나'];

var fruitBox = fruit.filter(function(el,idx,arr){
    return el.length == 2;
})

console.log(fruitBox)
    

fruit변수를 만들어 배열을 담아줄게요.

filter함수는 새 변수에 담아 사용해줘야 합니다.

fruitBox 변수를 만들어 fruit에 filter함수를 적용해줍니다.

새 배열 fruitBox를 호출하니 요소의 길이가 2이상인 것만 필터링 되어 나왔습니다.

filter에서 인자값을 가져오는 걸로 바꾸어볼게요

    
var fruit = ['사과','메론','수박','바나나'];

function getFruit(el){
    return el.length == 2;
}

var fruitBox = fruit.filter(getFruit)

console.log(fruitBox)
    

결과는 같죠?

그럼 지금 이상태에서 간단하게 this의 값을 가져오겠습니다.

콜백함수에서 this를 사용하고 싶을때 

filter함수의 맨뒤에 this의 값을 지정해주면 됩니다.

    
var fruit = ['사과','메론','수박','바나나'];

function getFruit(el){
    return el.length == this;
}

var fruitBox = fruit.filter(getFruit,2)

console.log(fruitBox)
    

this의 값으로 2를 주었습니다.

아까 위에서 한 결과랑 같죠?

filter 콜백함수 내에 this의 값은 2가 된것입니다.