[JavaScript] filter 사용법

 

 

오늘은 Javascript에서 filter라는 함수의 사용법에 대해서 알아보려고합니다.

배열 관련 함수 중 많이 쓰이는 함수들은 filter, map, reduce 등 있습니다.

그중에서도 filter는 활용도가 높은 편이라 자세히 알아두면 굉장히 유용하게 사용할 수 있을 거 같습니다.

 

 

 

 

filter 메서드는 조건을 주고 해당 조건이 true인 요소를 모아 새로운 배열로 반환하는 메서드입니다.

배열에서 추출 하고 싶은 데이터가 있을 경우 자주 사용합니다. 

filter는 중복값을 제거해주지 않아 중복값이 반환될 수 있습니다.

 

 

 

 

정의

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

 

callback : 각 요소에 조건 값 (true: 요소 유지, false: 요소 버림)

element : 처리할 현재 요소

index : 처리할 현재 인덱스

array : filter를 호출한 배열

thisArg : callback을 생행 할 때 this로 사용하는 값

 

 

 

 

 

예제 코드

const arr = [1, 2, 3, 4, 5, 6, 7];
const result = arr.filter(n => n > 5);

console.log(result);
// [6, 7]

위 예제 코드를 보면 result는 filter를 통해서 arr에서 5이상의 요소들만 반환하여 [6, 7] 이라는 결과값을 가지게 됩니다. 

 

 

 

 

간단한 예제 코드보다 좀 더 많이 활용하는 예제에 대해서 알아보려고합니다.

 

const people = [
    { name: 'A', age: 21 },
    { name: 'B', age: 19 },
    { name: 'C', age: 30 },
    { name: 'D', age: 15 }
];

const teeneage = people.filter(person => person.age < 20);

console.log(teenage);
// [{name: "B", age: 19}, {name: "D", age: 15}]

people의 요소에서 10대들의 요소들만 반환하고 싶을 때의 코드입니다.

filter를 활용하여 해당 요소들의 age가 20세보다 미만이라면 10대로 판단하여 반환해줬습니다.

 

 

 

이렇듯 filter를 잘 활용한다면 실무에서 많이 활용할 수 있는 좋은 메서드인 것 같습니다.