자바스크립트 filter()메서드

Array.prototype.filter()

- filter()메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환하는 배열메서드이다.

- filter의 조건을 충족하는 요소가 없을때는 빈 배열을 반환한다.

- 배열뿐만 아니라 객체에서도 사용이 가능하다.

- map(),reduce() 와 더불어 객체에서 가장 많이 사용되는 메서드이다.

기본구문

arr.filter(callback(요소[, 인덱스[, 배열]])[, thisArg])

const arr = [1,2,3,4,5,6,7,8,9]
const arr1 = arr.filter(e => e > 6)

console.log(arr1)  //[ 7, 8, 9 ]

배열 arr를 filter()메서드를 사용해 6보다 큰 요소들을 걸러내어 arr1이라는 새로운 배열로 반환했다.

객체에서 filter 사용

- json같은 객체에도 접근이 가능하다

const guys = [
    { name: '철수', money: 40000 },
    { name: '유리', money: 80000 },
    { name: '맹구', money: 20000 },
    { name: '짱구', money: 100000 }
];
const buja = guys.filter(e => e.money > 40000)

console.log(buja) //[ { name: '유리', money: 80000 }, { name: '짱구', money: 100000 } ]

filter() 메서드로 객체의 money가 40000이상(true)인 값을 충족하는 값들을 buja라는 새로운 객체로 반환하였다.

filter()와 다른 메서드 활용예제

const guys = [
    { name: '철수', money: 40000 },
    { name: '유리', money: 80000 },
    { name: '맹구', money: 20000 },
    { name: '짱구', money: 100000 }
];
const buja = guys.filter(e => e.money > 40000)
const bujaname = guys.filter(e => e.money > 40000).map(e => e.name)
const bujanamejjagu = guys.filter(e => e.money > 40000).map(e => e.name).join('').replace('유리','')


console.log(buja)    //[ { name: '유리', money: 80000 }, { name: '짱구', money: 100000 } ]
console.log(bujaname)  //[ '유리', '짱구' ]
console.log(bujanamejjagu)  //짱구

변수 buja는 객체 guys에서 value값이 40000이 넘는 객체들을 따로 반환하여 만든 객체이다.

변수 bujaname은 40000이 넘는 객체들을 반환한 요소중에 name 요소들만 따로 가져와 만든 배열이다.

변수 bujanamejjangu는 변수 bujaname을 배열에서 join메서드로 string으로 형변환을 하고 replace()메서드로 '유리'를 삭제하고 '짱구'를 출력했다.

요약

• filter()는 조건에 부합하는 요소들을 뽑아 새로운 배열을 반환하는 메서드이다.
• map(), reduce()와 같이 배열을 조작할때 자주쓰는 메서드 중 하나이다.