[ JavaScript ] 자바스크립트 filter( ) 함수와 find( ) 함수

 

 

저번 포스팅에서 배열에서 map( ) 함수로 값을 빼오는 법을 다루었다.

 

그럼 배열에서 특정 조건만 주어 조건에 해당하는 값들만 걸러내려면 어떻게 해야 할까?

 

 

이럴 때 사용하는 것이 주로 filter( ) 함수, find( ) 함수이다.

 

예제를 보며 이해해보도록 하자.

 

 

 

filter( ) 함수

영어 뜻 그대로 배열의 값들 중 특정 조건이 true인 값들을 다 걸러내준다.

 

아래의 코드를 보자.

 const arr1 = [10, 20, 30, 40, 50];

//값이 30 이상인 값 구하기
const result1 = arr1.filter(item => item>30);
console.log("값이 30 이상인 값 구하기");
console.log(result1);

//값이 40 인 값 구하기
const result2 = arr1.filter(item => item === 40);
console.log("\n값이 40 인 값 구하기");
console.log(result2);

//값이 30 이 아닌 값들 구하기
const result3 = arr1.filter(item => item !== 30);
console.log("\n값이 30 이 아닌 값들 구하기");
console.log(result3);

 

item 인자에는 arr1 배열의 값이 하나씩 들어오고 이를 조건문으로 검증해 걸러낸다.

 

예를 들어 result1 의 경우 값이 30 이상인 값들을 전부 걸러내 result1 에 담는 것이다.

 

 

실행 결과는 다음과 같다.

 

그럼 이번엔 find( ) 함수를 살펴보도록 하자.

 

 

 

 

 

find( ) 함수

filter( ) 함수가 특정 조건에 맞는 값들을 모두 걸러준다면,

 

find( ) 함수는 특정 조건에 맞는 값이 나오면 그 값만 걸러내준다.

 

아래의 filter( ) 와 find( ) 를 비교해 사용한 예제코드를 보면 이해가 갈 것이다.

const arr1 = [10, 20, 30, 40, 50];

//30 이상인 값 - find() 사용
const result1 = arr1.find(item => item>30);
console.log("find() 사용");
console.log(result1);

//30 이상인 값 - filter() 사용
const result2 = arr1.filter(item => item>30);
console.log("\nfilter() 사용");
console.log(result2);

 

 

실행 결과는 다음과 같다.

 

결과를 보면 [ 10, 20, 30, 40, 50 ] 에서 30 이상인 조건을 만족하는 값은 40, 50 두 개인데,

 

filter( ) 는 40, 50 을 뽑아냈지만, find( ) 는 조건을 만족하는 40 만 뽑아내고 끝난걸 알 수 있다.

 

 

이상 filter( ) 함수와 find( ) 함수를 다뤄보는 포스팅이었다.