[JavaScript] filter()와 find() 함수

filter()와 find() 함수

---

이전 포스팅에서는 원본 배열에서 필요한 정보만 꺼내 새로운 배열을 생성했었다. 그럼 데이터의 형태는 유지하면서 배열의 일부만 필요할 경우엔 어떻게 할까? 예를 들어, 아래 배열을 살펴보자.

const team = [
    'Michelle B',
    'Dave L',
    'Dave C',
    'Courtney B',
    'Davina M'
];

 

이 배열에서 'Dav'가 포함된 문자열만 리턴해 보자. 가장 기본적인 방법은 for문을 사용하는 것이다.

const daves = [];
for (let i = 0; i < team.length; i++) {
    if (team[i].match(/Dav/)) {
        daves.push(team[i]);
    }
}

 

filter() 함수

---

이번엔 filter 함수를 사용해 보자. filter 함수는 배열의 항목을 하나씩 검사하면서, 반환값이 true일 때만 그 값을 유지하고,
원본 배열의 순서도 그대로 유지한다. 심지어 조건에 일치하는 값이 없을 경우에도 항상 배열을 반환한다.

아래는 filter 함수를 활용한 간단한 예제이.

const scores = [30, 82, 70, 45];

function getPerfectScores(scores) {
    const passing = scores.filter(score => score > 59);
    console.log(passing);
    return passing.length;
}

getPerfectScores(scores);

 

find() 함수

---

만약 조건과 일치하는 항목이 하나뿐이라면, filter 대신 find() 함수를 사용할 수도 있다. find() 함수는 조건에 맞는 첫 번째 항목만 반환한다. 그래서 반복문에서 break를 걸어야 하는 경우에 유용하다.

아래는 find를 활용한 예제이다.

const instructors = [
    {
        name: '짐',
        libraries: ['미디어교육정보 도서관']
    },
    {
        name: '새라',
        libraries: ['기념 도서관', '문헌정보학 도서관']
    },
    {
        name: '엘리엇',
        libraries: ['중앙 도서관']
    }
];

 

만약 '기념 도서관'이 포함된 사서를 찾고 싶다면, 전통적인 for문을 이렇게 사용할 것이다.

let memorialInstructor;
for (let i = 0; i < instructors.length; i++) {
    if (instructors[i].libraries.includes('기념 도서관')) {
        memorialInstructor = instructors[i];
        break;
    }
}

하지만 find() 메서드를 사용하면 훨씬 간단하게 해결할 수 있어.

const libraries = instructors.find(instructor => 
    instructor.libraries.includes('기념 도서관')
);