자바스크립트 filter 함수

배열에서 원하는 값만 걸러내기

 

배열에서 filter() 함수는 콜백 함수를 사용하여 배열의 요소를 필터링합니다.

이 함수를 사용하면 쉽게 배열의 요소 중 원하는 값만 남기도록 필터링할 수 있습니다.
조건을 콜백 함수로 작성하면, 조건에 만족하는 요소만 새로운 배열로 반환합니다.

 

이 글은 코딩에브리바디(codingeverybody.kr)의 내용을 참조해 작성했습니다.

 

구문

arr.filter(callbackFn)
arr.filter(callbackFn, thisArg)

 

특징

• 필터링할 조건은 콜백 함수에서 적용합니다.
  - 조건을 만족하면 true를, 그렇지 않으면 false를 반환하도록 작성해야 합니다.
• 원본 배열은 그대로 두고, 조건을 만족하는 요소로만 이루어진 새 배열을 반환합니다.

기본 예제

// 필터링할 배열
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() 함수에서 사용하는 콜백 함수의 구조

/**
 * 콜백 함수
 *
 * @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]]) {
    // 필터링할 로직: 필터링된 결과를 반환해야 합니다.
});

 

활용

배열의 중복 요소 제거하기

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]

 

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

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

 

https://coding.courses/javascript-array-filter-function/

JavaScript Array filter() Function – Filter Elements with a Callback - codingCourses

 

https://codingeverybody.jp/javascript-array-filter-function/

JavaScript 配列 filter()関数：配列から必要な値だけを抽出する - codingEverybody