자바스크립트 filter() 함수 – 개념 정리 및 사용 예제

`Array.prototype.filter()` 사용법

filter() 함수는
배열의 요소를 순회하면서 콜백 함수를 사용하여 원하는 조건에 따라 필터링하는 함수입니다.
필터링된 배열을 반환합니다.

이 함수는 각 요소를 순회하며, 콜백 함수에서 return으로 true를 반환한 요소들만을 (필터링하여) 모아 새로운 배열로 반환합니다.

이때, 콜백 함수는 각 요소에 대해 조건을 평가하여
요소를 필터링(유지)하려면 true를, 그렇지 않으면 false를 return으로 반환해야 합니다.

JavaScript filter() 함수를 사용해서 배열의 요소중에서 짝수만 필터링해서 필터링된 배열로 반환

// 필터링할 배열
const num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 개발자가 직접 작성한 콜백 함수
function isEven(value) {
    return value % 2 === 0; // 짝수인 경우 true 반환
}

// 배열의 요소를 순회하면서 필터링된 배열로 반환
const result = num.filter(isEven);
console.log(result); // 출력: [2, 4, 6, 8, 10]

filter() 함수는 배열의 각 요소들 중에서 원하는 조건에 맞는 요소들만으로 필터링된 배열을 생성하기 위해 사용됩니다.
새로 생성된 배열은 조건을 충족하는 요소들로만 구성됩니다.

filter() 함수의 사용 목적을 시각화하면 다음과 같습니다.

[a, B, c, D].filter(소문자) 👉 [a,c] // 원하는 조건의 요소들만 필터링하는게 목적

filter() 함수의 형식은 다음과 같습니다.

구문

arr은 filter() 함수를 적용할 배열입니다.

매개변수

filter() 함수의 매개변수 설명
`callbackFn`	배열의 각 요소를 처리하는 콜백 함수입니다. 콜백 함수는 배열의 요소를 전달 인자로 받고, 결과로 `true` 또는 `false`를 반환합니다. `true`를 반환하면 해당 요소가 필터링된 배열에 포함되고, `false`를 반환하면 해당 요소가 필터링된 배열에 포함되지 않습니다. 콜백 함수의 매개변수: `callbackFn(element[, index[, array]])` `element`: 현재 처리 중인 배열 요소 `index`: 옵션. 현재 처리 중인 배열 요소의 인덱스 `array`: 옵션. `filter()`를 호출한 배열 자체
`thisArg`	옵션. `callbackFn` 함수 내부에서 사용할 `this` 값으로 사용할 값입니다.

첫 번째 매개변수인 콜백 함수(callbackFn)과 관련되어 함수의 형태별 구문 형식은 다음과 같습니다.

JavaScript

// 화살표 함수
filter((element) => { /* … */ })
filter((element[, index]) => { /* … */ })
filter((element[, index[, array]]) => { /* … */ })

// 콜백 함수
filter(callbackFn)
filter(callbackFn[, thisArg])

// 인라인 콜백 함수
filter(function (element) { /* … */ })
filter(function (element[, index]) { /* … */ })
filter(function (element[, index[, array]]) { /* … */ })
filter(function (element[, index[, array]]) { /* … */ }[, thisArg])

반환 값

필터링된 배열입니다. 필터링된 요소가 없으면 빈 배열입니다.

콜백 함수의 작동 원리

filter() 함수는 주어진 배열의 요소를 개발자가 직접 작성한 콜백 함수를 사용하여 원하는 조건에 따라 필터링하고, 조건을 충족하는 요소만으로 이루어진 필터링된 배열로 반환하는 함수입니다.

filter() 함수의 콜백 함수는 배열을 필터링하는 데 사용됩니다. 이 콜백 함수는 주어진 배열의 각 요소에 대해 호출되며, 그 결과에 따라 요소가 필터링되거나 필터링되지 않습니다. 다음은 filter() 함수의 콜백 함수가 호출되는 과정을 진행 순서대로 설명한 것입니다.

JavaScript filter() 함수에서 사용하는 콜백 함수의 구조

/**
 * 콜백 함수
 *
 * @param {*} element 배열의 각 요소
 * @param {number} index 배열의 인덱스 (선택적)
 * @param {Array} array 원본 배열 (선택적)
 * @return {boolean} 필터링 조건을 충족하면 true, 그렇지 않으면 false 반환
 *
 * 콜백 함수는 기명 함수(사용자 정의 함수)나 익명 함수 등으로 사용할 수 있습니다.
 * (당연히) 모든 콜백 함수는 화살표 함수로 사용할 수 있습니다.
 */

/* 콜백 함수를 기명 함수를 사용할 경우 */
function callbackFn(element[, index[, array]]) { // 기명 함수 정의
	// 필터링할 로직: 필터링된 결과를 반환해야 합니다.
}

arr.filter(callbackFn); // 정의한 기명 함수명을 매개변수에 직접 전달

/* 콜백 함수를 익명 함수로 사용할 경우 */
arr.filter(function (element[, index[, array]]) {
    // 필터링할 로직: 필터링된 결과를 반환해야 합니다.
});

자바스크립트 화살표 함수의 이해와 사용법

filter() 함수의 작동 순서입니다.

filter() 함수를 호출할 때, 필터링할 배열을 콜백 함수에 전달합니다.
filter() 함수는 필터링할 배열의 첫 번째 요소를 선택하고, 이 요소를 콜백 함수의 첫 번째 매개변수(element)로 전달합니다.
콜백 함수가 호출되고, 전달된 요소는 콜백 함수 내에서 사용할 수 있습니다. 이 콜백 함수 내에서 필요한 조건을 적용하고, return 키워드를 사용하여 해당 요소가 필터링 조건을 충족하는지 여부를 판단합니다.
콜백 함수가 true를 반환하면, 현재 요소는 필터링된 배열에 포함됩니다. false를 반환하면 현재 요소는 필터링된 배열에 포함되지 않습니다.
filter() 함수는 다음 배열 요소를 선택하고 이와 같은 과정을 반복합니다.
모든 배열 요소에 대한 콜백 함수 호출이 완료되면, filter() 함수는 필터링된 결과를 포함하는 새로운 배열을 반환합니다.
반환된 배열에는 콜백 함수에서 true를 반환한 요소들만 포함됩니다.

이러한 방식으로 filter() 함수의 콜백 함수는 주어진 배열을 필터링하고 필터링된 결과를 반환합니다.
콜백 함수는 개발자가 정의한 조건을 기반으로 필터링을 수행하므로, 다양한 필터링 작업을 수행할 수 있습니다.

filter() 함수와 map() 함수는 비슷한 구문을 사용하기 때문에 혼동하기 쉬운 점이 있습니다.
자바스크립트 map()과 filter() 함수의 차이점을 참고하세요.

`filter()` 함수의 다양한 활용 사례

filter() 함수는 다양한 배열 필터링 작업에 사용될 수 있으며, 다음은 그 중 일부 예제입니다.

배열의 중복 요소 제거하기

filter() 함수를 사용하여 배열의 중복 요소를 제거하려면 조금 복잡한 접근 방식이 필요합니다. 일반적으로 중복 요소를 제거하려면 두 가지 배열을 사용하여 중복을 확인하고 제거해야 합니다. 아래 예제는 filter() 함수를 사용하여 중복 요소를 제거하는 방법을 보여줍니다.

JavaScript filter() 함수로 배열의 중복 요소 제거하기

const numbers = [1, 2, 2, 3, 4, 4, 5];

const uniqueNumbers = numbers.filter((element, index, arr) => {
    // 현재 요소가 이전에 등장하지 않은 경우만 true를 반환
    return arr.indexOf(element) === index;
});

console.log(uniqueNumbers); // 출력: [1, 2, 3, 4, 5]

코드 부연설명
배열의 indexOf() 함수는 배열에서 인수로 전달된 요소를 찾아 첫 번째로 검색된(등장한) 요소의 인덱스를 반환합니다.

위 예제에서는 numbers 배열에 중복된 요소가 있는지 확인하기 위해 indexOf() 함수를 사용합니다. indexOf() 함수는 배열에서 특정 값이 처음으로 나타나는 인덱스를 반환합니다.

arr.indexOf(element) === index 조건은 해당 값이 처음으로 나타나는 인덱스와 현재 인덱스가 동일하면 true를 반환합니다.

filter() 함수는 콜백 함수를 사용하여 배열의 요소를 하나씩 순회하며 조건에 맞는 요소만을 반환합니다.

다중 조건으로 필터링

다중 조건을 사용하는 경우 filter() 함수 내의 콜백 함수에서 여러 조건을 결합하면 됩니다. 예를 들어, 숫자 배열에서 짝수이면서 5보다 작은 요소만 추출하는 다중 조건을 사용한 예제를 보여드리겠습니다.

JavaScript filter() 함수로 배열에서 짝수이면서 5보다 작은 요소만 추출

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const filteredNumbers = numbers.filter(element => {
    // 다중 조건을 결합하여 필터링
    return element % 2 === 0 && element < 5;
});

console.log(filteredNumbers); // 출력: [2, 4]

element % 2 === 0 && element < 5 조건은 짝수이면서 5보다 작은 요소일 경우 true를 반환합니다.

2차원 배열 필터링

이번에는 2차원 배열에서 특정 조건을 만족하는 요소를 필터링하는 간단한 예제를 보여드리겠습니다. 다음의 예제에서는 students라는 2차원 배열을 생성하고, 나이가 30 이상인 학생들만 필터링하기입니다.

JavaScript filter() 함수로 나이가 30 이상인 학생들만 필터링하기

// 2차원 배열 생성
const students = [
    ["Alice", 25],
    ["Bob", 30],
    ["Charlie", 22],
    ["David", 35]
];

// 나이가 30 이상인 학생들만 필터링
const filteredStudents = students.filter(student => {
    // student 배열의 두 번째 요소(나이)가 30 이상인 경우만 true 반환
    return student[1] >= 30;
  });

console.log(filteredStudents); // 출력: [["Bob", 30], ["David", 35]]

이 예제에서는 filter() 함수를 사용하여 students 배열을 순회하고, 각 하위 배열에 대해 두 번째 요소(나이)가 30 이상인 경우만 true를 반환하여 필터링합니다.

문자열 배열에서 길이가 5 이상인 문자열 필터링하기

JavaScript

const words = ["apple", "banana", "cherry", "date", "fig"];
const longWords = words.filter((word) => word.length >= 5);
console.log(longWords); // 출력: ["apple", "banana", "cherry"]

코드 부연설명
배열의 length 속성은 배열에 포함된 요소의 개수를 숫자로 반환합니다.

이러한 예제들은 filter() 함수를 다양한 상황에서 활용하는 방법을 보여줍니다. 필요에 따라 filter() 함수를 사용하여 배열을 원하는 방식으로 필터링할 수 있습니다.