[JAVASCRIPT] 자바스크립트 filter() 함수 완벽 가이드

자바스크립트 filter() 함수 완벽 가이드

목차

1. 개요
2. 기본 문법
3. 주요 특징
4. 실용적인 예제
5. 성능과 주의사항
6. 실전 활용 팁

개요

filter() 메서드는 배열의 각 요소에 대해 주어진 조건(콜백 함수)을 실행하고, 그 조건을 통과하는 요소들로만 이루어진 새로운 배열을 생성합니다.

기본 문법

array.filter(callback(element[, index[, array]])[, thisArg])

매개변수 설명

• callback: 각 요소를 시험할 함수. true를 반환하면 요소를 유지하고, false를 반환하면 버립니다.
  • element: 처리할 현재 요소
  • index: 처리할 현재 요소의 인덱스 (선택적)
  • array: filter를 호출한 배열 (선택적)
• thisArg: callback을 실행할 때 this로 사용하는 값 (선택적)

기본 예제

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

// 짝수만 필터링
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]

// 5보다 큰 수 필터링
const overFive = numbers.filter(num => num > 5);
console.log(overFive); // [6, 7, 8, 9, 10]

주요 특징

1. 새로운 배열 반환

const original = [1, 2, 3];
const filtered = original.filter(num => num > 1);

console.log(original); // [1, 2, 3]
console.log(filtered); // [2, 3]
console.log(original === filtered); // false

2. 원본 배열 유지

const numbers = [1, 2, 3, 4, 5];
numbers.filter(num => num > 3);
console.log(numbers); // [1, 2, 3, 4, 5] - 원본 배열은 변경되지 않음

3. 희소 배열 처리

const sparse = [1, , 3, , 5];
const cleaned = sparse.filter(item => item !== undefined);
console.log(cleaned); // [1, 3, 5]

실용적인 예제

객체 배열 필터링

const users = [
    { name: '김철수', age: 25, active: true },
    { name: '이영희', age: 30, active: false },
    { name: '박지성', age: 28, active: true }
];

// 활성 사용자만 필터링
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);

// 25세 이상인 사용자만 필터링
const adultsOver25 = users.filter(user => user.age >= 25);
console.log(adultsOver25);

중복 제거

const numbers = [1, 2, 2, 3, 3, 4, 5, 5];
const unique = numbers.filter((value, index, self) => 
    self.indexOf(value) === index
);
console.log(unique); // [1, 2, 3, 4, 5]

문자열 필터링

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction'];

// 길이가 6자 이상인 단어 필터링
const longWords = words.filter(word => word.length > 6);
console.log(longWords); // ['exuberant', 'destruction']

성능과 주의사항

성능 고려사항

1. 큰 배열에서의 사용

const hugeArray = Array.from({ length: 1000000 }, (_, i) => i);

// 성능이 중요한 경우 for 루프 사용을 고려
const filtered = [];
for (let i = 0; i < hugeArray.length; i++) {
    if (hugeArray[i] % 2 === 0) {
        filtered.push(hugeArray[i]);
    }
}

주의사항

1. 빈 요소 처리

const arrayWithEmpty = [1, , 3, , 5];
// filter는 빈 요소를 무시합니다
console.log(arrayWithEmpty.filter(() => true)); // [1, 3, 5]

2. 콜백 함수의 반환값

// 의도하지 않은 필터링을 피하기 위해 명시적으로 boolean 값을 반환
const numbers = [0, 1, 2, 3];
const filtered = numbers.filter(num => Boolean(num));
console.log(filtered); // [1, 2, 3]

728x90

실전 활용 팁

체이닝과 함께 사용

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

const result = numbers
    .filter(num => num % 2 === 0)  // 짝수만 필터링
    .map(num => num * 2)           // 각 숫자를 2배로
    .reduce((acc, curr) => acc + curr, 0);  // 합계 계산

console.log(result);

조건부 필터링

const products = [
    { id: 1, name: '노트북', price: 1000000, inStock: true },
    { id: 2, name: '마우스', price: 50000, inStock: false },
    { id: 3, name: '키보드', price: 150000, inStock: true }
];

function filterProducts(options = {}) {
    return products.filter(product => {
        let pass = true;

        if (options.onlyInStock) {
            pass = pass && product.inStock;
        }

        if (options.maxPrice) {
            pass = pass && product.price <= options.maxPrice;
        }

        return pass;
    });
}

console.log(filterProducts({ onlyInStock: true, maxPrice: 200000 }));

에러 처리

const data = [1, 'two', 3, 'four', 5];

const numbers = data.filter(item => {
    try {
        return typeof item === 'number';
    } catch (error) {
        console.error('필터링 중 에러 발생:', error);
        return false;
    }
});

마치며

filter() 함수는 배열을 다룰 때 매우 유용한 도구입니다. 적절히 사용하면 코드의 가독성과 유지보수성을 크게 향상시킬 수 있습니다. 다른 배열 메서드들과 함께 사용하면 더욱 강력한 데이터 처리가 가능합니다.