JavaScript filter() 메서드 완벽 가이드 – 배열 필터링 실전 활용법
JavaScript의 filter() 메서드는 배열에서 조건을 만족하는 요소만 추출하여 새로운 배열을 생성할 때 사용됩니다. ES5 이후 모든 브라우저에서 지원되며, 코드의 가독성과 유지보수성을 높이는 데 매우 유용한 함수형 메서드입니다. 이 글에서는 filter()의 기본 개념부터 다양한 실무 예제까지 정리합니다.
1. filter() 메서드란?
filter()는 배열의 각 요소에 콜백 함수를 적용한 뒤, 조건이 true인 요소만을 포함하는 새로운 배열을 반환합니다. 원본 배열은 변경되지 않습니다.
문법
array.filter(callback(element, index, array), thisArg);callback: 각 요소에 대해 실행할 함수element: 현재 처리 중인 요소index: 현재 요소의 인덱스array: filter가 호출된 배열thisArg: 콜백 내부에서 사용할 this 값 (선택)
2. 기본 예제 – 짝수만 필터링
const numbers = [1, 2, 3, 4, 5, 6];
const even = numbers.filter(num => num % 2 === 0);
console.log(even); // [2, 4, 6]3. 객체 배열 필터링 예제
실무에서는 객체 배열을 필터링하는 경우가 많습니다. 예를 들어, 특정 조건의 사용자 목록을 추출할 수 있습니다.
const users = [
{ id: 1, name: 'Alice', active: true },
{ id: 2, name: 'Bob', active: false },
{ id: 3, name: 'Charlie', active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// [{ id: 1, name: 'Alice', active: true }, { id: 3, name: 'Charlie', active: true }]4. 문자열 필터링 예제
const fruits = ['apple', 'banana', 'grape', 'avocado'];
const aFruits = fruits.filter(fruit => fruit.startsWith('a'));
console.log(aFruits); // ['apple', 'avocado']5. 인덱스를 활용한 필터링
index를 활용해 짝수 위치의 요소만 필터링할 수 있습니다.
const data = ['a', 'b', 'c', 'd'];
const evenIndex = data.filter((_, index) => index % 2 === 0);
console.log(evenIndex); // ['a', 'c']6. thisArg 사용 예 (특정 객체 기준 필터링)
const threshold = {
limit: 10
};
const numbers = [5, 12, 8, 20];
const filtered = numbers.filter(function (num) {
return num > this.limit;
}, threshold);
console.log(filtered); // [12, 20]7. 주의할 점
filter()는 항상 새로운 배열을 반환하며, 원본은 변경되지 않음- 조건이
false일 경우 해당 요소는 포함되지 않음 undefined를 반환해도 요소는 제거되지 않음 → 반드시true/false반환
8. 결론
filter()는 JavaScript에서 조건 기반의 배열 가공을 빠르고 쉽게 처리할 수 있는 함수입니다. 조건 분기, 검색 필터, 정렬 전처리 등 다양한 상황에서 활용되며, 객체 배열 처리에서도 강력한 기능을 제공합니다. 자주 사용하는 패턴을 익혀두면 생산성과 코드 가독성이 크게 향상됩니다.
