[자바스크립트 기초] filter vs find 둘은 어떤 차이가 있을까?

이번 포스팅에선 대표적인 배열(array) 메소드인 filter와 find 차이에 관해 알아 보도록 하겠습니다.

 

이 둘은 배열에서 값을 하나씩 뽑아낸 후 특정 조건에 해당하는 값을 다시 분류해 새로운 배열에 담는 컨셉인데요.

 

하지만 명확한 차이가 있는데요. 바로 코드로 확인해보겠습니다.

const Fruits = [{  
    Fruit: 'Banana',  
    Count: 10  
}, {  
    Fruit: 'Apple',  
    Count: 12  
}, {  
    Fruit: 'Strawberry',  
    Count: 5  
}, {  
    Fruit: 'Pineapple',  
    Count: 2  
}];

위와 같이 과일과 갯수가 담긴 객체 리스트를 만듭니다. 

 

그 후 filter , find 메소드를 각각 사용 해보겠습니다.

 

filter method 사용

const filterUse = Fruits.filter( fruit => fruit.Count >= 10)
console.log(filterUse)

과일의 갯수가 10개 이상인 과일만 뽑아내겠다라는 조건으로  "fruit.Count >=10" 를 설정 했습니다.

 

output :

우리가 예상한대로 10개 이상의 과일들만 새로운 배열로 출력된 것을 알 수 있습니다. 

 

 

 

그렇다면 find 메소드를 사용한다면 어떤 결과가 나올까요?

 

find method 사용

const findUse = Fruits.find( fruit => fruit.Count >= 10)
console.log(findUse)

output :

find 메소드를 사용할 경우에는 조건을 만족하는 하나의 객체만 반환을 했습니다. 

분명 같은 조건인데 말이죠.

 

 

여기서 우리는 차이를 알 수 있습니다. filter method와 다르게 find method는 조건에 만족하는 값을 발견하면 그 값을 반환후 작동을 멈춰 버리게 된다는것입니다.

 

우리 코드에서는 10개 이상의 과일을 중 먼저발견한 바나나를 반환하고 작동을 멈추게 된 것입니다. (뒤에 여전히 12개인 Apple 이 있음에도 불구하고요.)

 

 

만약 아래와 같이 Apple이 먼저 나온 array가 였다면 , 바나나가 아닌 Apple이 출력 되겠죠?

const Fruits = [{  
    Fruit: 'Apple',  
    Count: 12  
}, {  
    Fruit: 'Banana',  
    Count: 10
}, {  
    Fruit: 'Strawberry',  
    Count: 5  
}, {  
    Fruit: 'Pineapple',  
    Count: 2  
}]; 

const findUse = Fruits.find( fruit => fruit.Count >= 10)
console.log(findUse)

output :