웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > lodash

lodash filter() 함수 알아보기

Last Modified : 2023-11-08 / Created : 2020-11-10
9,080
View Count

자바스크립트 라이브러리 lodash의 함수 중 filtering()에 대하여 알아봅니다.




# lodash filter() 함수 알아보기


lodash의 filter() 함수는 컬렉션에 사용하는 함수로 주로 배열에 사용하여 값을 필터링하는 기능을 수행하는 유용한 함수입니다. 간단한 문법은 아래와 같습니다.

_.filter(컬렉션, 필터링 조건)

두 가지 인자를 받으며 첫 번째는 필터링 대상을 그리고 두 번째로 필터링의 조건을 전달할 수 있습니다.

- 컬렉션 : Collection으로 필터링의 대상
- 필터링 조건 : 함수 및 일치하는 값 또는 조건


그럼 아래에서 간단한 예제를 만들어보겠습니다.


! lodash filter() 예제보기


만약 아래와 같은 컬렉을 가지는 변수 webSites가 있다고 합시다.
webSites = [
  {
    no: 1,
    name: '웹',
    enName: 'web'
  },
  {
    no: 2,
    name: '이즈',
    enName: 'is'
  },
  {
    no: 3,
    name: '프리',
    enName: 'free'
  }
]

이제 아래와 같이 lodash의 filter()을 사용하여 원하는 값만 필터링해 값을 얻어보도록 하겠습니다.

@ no의 값이 1인 값만 얻기
가장 먼저 no의 값이 1인 데이터만 얻어보려고 합니다.
_.filter(webSites, {no: 1});

// 출력결과
[
  {
    no: 1,
    name: '웹',
    enName: 'web'
  }
]

위와 같이 간단하게 필터링되어 원하는 값만 얻을 수 있습니다.

@ enName에 free인 값만 얻기
이번에는 enName 필드에서 free인 값만 찾으려고 합니다.
_.filter(webSites, {enName: 'free'});

// 출력 결과
[
  {
    enName: "free",
    name: "프리",
    no: 3
  }
]

이번에도 예상한 것처럼 enName이 free인 값만 쉽게 찾을 수 있었습니다.


! filter()에 함수를 사용하는 방법과 예제


위의 예제들은 데이터를 찾기 위해 객체를 인자로 전달하였습니다. 하지만 filtering()의 인자로 객체가 아닌 함수를 전달하는 것도 가능합니다. 함수에서는 true를 리턴하는 경우에 해당하는 값을 반환하게 되죠. 그럼 아래에서 간단한 예제를 사용하여 값을 가져와 보겠습니다.

@ enName에 e가 포함된 값만 찾기
만약 enName 필드에서 e가 포함된 값만 찾으려면? 이 경우 함수를 사용하여 간단하게 해결할 수 있습니다.
_.filter(webSites, function(i) {
  return i.enName.indexOf('e') !== -1
});

위의 예제를 살펴보면 두 번째 인자로 함수를 사용하였으며 indexOf()를 문자열에 사용하여 e를 포함하는 경우에만 true를 반환하도록 작성하였습니다. 결과를 확인하면 아래와 같습니다.
// 출력 결과

[
  {
    enName: "web",
    name: "웹",
    no: 1
  },
  {
    enName: "free",
    name: "프리",
    no: 3
  }
]

보시는 것처럼 enName에 e가 포함된 값들만 반환하는 것을 찾을 수 있습니다.


여기까지 lodash의 filter() 함수에 대하여 알아보았습니다. 인자에 함수를 사용할 경우 정규표현식 등 다양한 방법으로 값을 찾을 수 있어 복잡한 값을 얻을 때 더욱 간단하게 찾을 수 있도록 도와줍니다.

Previous

[lodash] 배열의 역순으로 순서 바꾸기, reverse

Previous

lodash pickBy() 사용방법 및 예제