[JavaScript-62] 배열 filter, find

오늘은, 배열에 사용할 수 있는 filter와 find메소드에 대해 알아봅시다.

결론부터 말하면

 

(1) filter, find의 공통점: 배열을 순회하면서 특정 값을 필터링 할 수 있음

(2) filter, find의 차이점: filter는 리턴하는 값이 배열, find는 처음 발견된 값 하나만 리턴하고 종료

 

자 이제, 코드로 살펴봅시다.

const cars = [
    {brand: 'benz', model: 'E220'},
    {brand: 'benz', model: 'S400'},
    {brand: 'audi', model: 'A6'},
    {brand: 'bmw', model: '320i'},
    {brand: 'audi', model: 'RS5'},
    {brand: 'benz', model: 'E220'},
    {brand: 'benz', model: 'E350'},
    {brand: 'benz', model: 'A200'},
    {brand: 'bmw', model: '535i'}
    ]
    
const audi = cars.filter((item) => {return item.brand === 'audi'};
console.log(audi);

자 우선, cars라는 배열은 객체를 요소로 갖는 배열입니다. 

그러고 나서, audi라는 새로운 변수를 생성해주고 있는데요!

 

audi변수는 cars배열에 filter를 적용한 것을 값으로 할당받습니다.

미리 말하면, 배열에 filter를 적용한 결과는 여전히 배열이기에, audi는 배열이 됩니다.

 

자, filter함수는,

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

const 변수 = 배열.filter(function(요소를 받아올 변수이름, 인덱스) {

    return 조건식;

};

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

의 형태로 사용합니다!

당연히 arrow function으로도 표현은 가능합니다!

앞서 살펴본 forEach, map과 구조가 비슷하죠?

차이점은, 함수 동작 부분은 return키워드 뒤에 true나 false로 평가될 수 있는 조건식이 온다는 것입니다.

 

그래서, 배열의 각 요소를 하나씩 돌면서, return뒤의 조건을 만족시키는 요소들만을 담은 배열을 반환하는 것이죠.

 

find는 filter와 기능도 같고, 사용법도 완전 같아서 그냥 filter자리를 find로 바꿔주기만 하면 됩니다!

다만, 조건을 만족시키는 모든 요소들을 묶어서 배열로 반환하는 filter와는 달리,

find함수는, 조건을 만족하는 첫 요소를 배열이 아닌 값으로 반환하고 그 이후는 탐색하지 않고 종료됩니다.

 

const cars = [
    {brand: 'benz', model: 'E220'},
    {brand: 'benz', model: 'S400'},
    {brand: 'audi', model: 'A6'},
    {brand: 'bmw', model: '320i'},
    {brand: 'audi', model: 'RS5'},
    {brand: 'benz', model: 'E220'},
    {brand: 'benz', model: 'E350'},
    {brand: 'benz', model: 'A200'},
    {brand: 'bmw', model: '535i'}
    ]
    
const audi = cars.filter((item) => {return item.brand === 'audi'};
console.log(audi);

자, 이 코드를 다시 살펴보면, cars라는 배열의 요소들을 하나씩 돌면서, return뒤의 조건을 만족하는 요소들만을 담은 배열이 audi라는 변수에 할당되겠죠?

const cars = [
    {brand: 'benz', model: 'E220'},
    {brand: 'benz', model: 'S400'},
    {brand: 'audi', model: 'A6'},
    {brand: 'bmw', model: '320i'},
    {brand: 'audi', model: 'RS5'},
    {brand: 'benz', model: 'E220'},
    {brand: 'benz', model: 'E350'},
    {brand: 'benz', model: 'A200'},
    {brand: 'bmw', model: '535i'}
    ]
    
const audi = cars.find((item) => {return item.brand === 'audi'};
console.log(audi);

만약, filter를 find로 바꿔준다면, 첫 요소만 반환하고 함수는 종료되겠네요.