[자바스크립트(js)] 필터(Filter) 함수

필터(Filter) 함수

필터 함수는 주어진 배열의 각 요소에 대해 주어진 함수를 테스트하고, 결과가 true인 모든 요소를 배열로 반환하는 자바스크립트 함수입니다. 만약 요소가 false라면 배열에 포함되지 않습니다.

개요

필터 함수는 자바스크립트 내장 함수로서 배열의 요소 중 특정 조건에 맞는 데이터를 걸러내어 배열로 반환합니다. 기본적으로 배열의 요소는 자료형이 있고, 필터 함수는 이를 걸러내기 위한 기능을 가지고 있습니다.

예시

아래 예시는 자바스크립트 내장 함수인 filter 함수를 사용하여 배열의 요소 중 3의 배수인 요소만 추출합니다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

let newArr = arr.filter(function(item) {
    return (item % 3 === 0);
});

console.log(newArr); // [3, 6, 9]

활용방법

배열의 요소를 걸러낼 때 필터 함수는 자바스크립트 개발자들에게 매우 유용합니다. 위의 예시는 배열의 요소 중 3의 배수만 추출하는 것이었지만, 필터 함수는 다양한 조건에 맞는 요소만 추출할 수 있습니다.

예를 들어 배열의 요소 중 숫자인 것만 추출하고 싶다면 다음과 같이 할 수 있습니다.

let arr = [1, 'a', 2, 'b', 3, 'c'];

let newArr = arr.filter(function(item) {
    return typeof item === 'number';
});

console.log(newArr); // [1, 2, 3]

필터 함수는 다양한 조건에 맞는 요소만 배열로 반환할 때 유용합니다. 예를 들어 배열의 요소 중 길이가 5이하인 단어만 추출하는 것은 다음과 같이 할 수 있습니다.

let arr = ['apple', 'banana', 'pineapple', 'kiwi'];

let newArr = arr.filter(function(item) {
    return item.length <= 5;
});

console.log(newArr); // ['apple', 'kiwi']

필터 함수를 사용하면 배열의 요소 중 특정 조건에 맞는 요소만을 추출하는 것 외에도, 배열 내에 주어진 요소가 특정 조건을 만족하는지 여부를 확인하는 데도 사용할 수 있습니다. 예를 들어 배열의 요소 중에 숫자가 포함되어 있는지 확인하는 것은 다음과 같이 할 수 있습니다.

let arr = [1, 'a', 2, 'b', 3, 'c'];

let result = arr.filter(function(item) {
    return typeof item === 'number';
}).length > 0;

console.log(result); // true

또한 필터 함수는 중첩된 배열에 대해도 사용할 수 있습니다. 예를 들어 다음과 같은 배열이 있다고 합시다.

let arr = [[1,2], [3,4], [5,6]];

이 배열에서 짝수만 추출하고 싶다면 다음과 같이 할 수 있습니다.

let newArr = arr.filter(function(item) {
    return item.every(function(item) {
        return item % 2 === 0;
    });
});

console.log(newArr); // [[2], [4], [6]]

결론

필터 함수는 자바스크립트 내장 함수로 배열의 요소 중 특정 조건에 맞는 데이터를 걸러내어 배열로 반환하는 기능을 가지고 있습니다. 또한 배열 내에 주어진 요소가 특정 조건을 만족하는지 여부를 확인하거나 중첩된 배열에 대해도 사용할 수 있습니다. 따라서 필터 함수는 자바스크립트 개발자들에게 매우 유용하며 다양한 상황에서 배열의 요소를 걸러낼 때 사용할 수 있습니다.