자바스크립트 filter 사용법

자바스크립트 filter 메소드에 대해 알아보겠습니다. Filter 메소드는 배열 내부를 순환하면서 특정 조건에 부합하는 요소들을 새로운 배열에 담아 반환합니다.

 

1. 기본사용법

result = my_array.filter (a => {
    return [조건];
});

 

const my_array = [1,2,3,4,5,6,7,8,9,10]

const result = my_array.filter(a => {
  return a % 2 == 0; // a중 2로 나눈 나머지가 0(즉, 짝수)인 요소
});

console.log(result);

// [ 2, 4, 6, 8, 10 ]

 

 

2. 객체 다루기

const my_array = [
    {name:'홍길동', age:28},
    {name:'이순신', age:37},
    {name:'유관순', age:18}
];

const result = my_array.filter(a => {
  return a.age > 20; // 20세 이상인 요소
});

console.log(result);

// [ { name: '홍길동', age: 28 }, { name: '이순신', age: 37 } ]

 

3. Map, Reduce로 filter 구현하기

 

map, reduce함수로도 filter를 구현할 수 있습니다.

[map 예시]

const my_array = [
    {name:'홍길동', age:28},
    {name:'이순신', age:37},
    {name:'유관순', age:18}
];

const result = my_array.map(a=>{
  if(a.age>20){
    return a;
  }
})
console.log(result);

// [ { name: '홍길동', age: 28 }, { name: '이순신', age: 37 }, undefined ]

그런데 이 경우 마지막에 undefined가 들어갑니다. map과 filter의 특성이 다르니 상황에 따라 적절히 사용하면 좋을 것 같습니다.

 

[reduce 예시]

const my_array = [
    {name:'홍길동', age:28},
    {name:'이순신', age:37},
    {name:'유관순', age:18}
];

result = my_array.reduce((acc, cur) => {
  if (cur.age > 20) acc.push(cur);
  return acc;
}, []);

console.log(result);

// [ { name: '홍길동', age: 28 }, { name: '이순신', age: 37 } ]

 

오늘은 이름과 같이 직관적으로 사용할 수 있어서 자주사용하게되는 filter메소드에 대해 간단한 사용법 몇가지, 그리고 참고로 map과 reduce를 사용하여 filter 구현하는 법을 알아보았습니다.