JavaScript filter() 정리

JavaScript filter() 완벽 정리

filter() 메서드는 배열의 각 요소를 검사하여 조건에 맞는 요소만 모아 새로운 배열을 반환하는 메서드입니다.
원본 배열은 변경되지 않으며, 필터링된 결과만 반환합니다.

기본 문법

const newArray = array.filter(function(요소, 인덱스, 배열) {
  return 조건식;
});

매개변수 설명

• 요소(element): 현재 처리 중인 배열의 값
• 인덱스(index): 현재 요소의 인덱스
• 배열(array): filter()가 호출된 원본 배열
• 반환값: true인 요소만 새로운 배열에 포함됩니다.

간단한 예제

const numbers = [1, 2, 3, 4, 5];
const even = numbers.filter(num => num % 2 === 0);

console.log(even);

출력 결과

[2, 4]

num % 2 === 0인 요소(짝수)만 새로운 배열에 담깁니다.

문자열 배열 필터링

const fruits = ['사과', '바나나', '체리', '복숭아'];
const result = fruits.filter(fruit => fruit.includes('바'));

console.log(result);

출력 결과

["바나나"]

문자열 '바'가 포함된 요소만 필터링됩니다.

객체 배열 필터링

const users = [
  { name: '홍길동', age: 25 },
  { name: '이몽룡', age: 17 },
  { name: '성춘향', age: 20 }
];

const adults = users.filter(user => user.age >= 20);

console.log(adults);

출력 결과

[
  { name: '홍길동', age: 25 },
  { name: '성춘향', age: 20 }
]

나이가 20 이상인 사용자만 새로운 배열에 포함됩니다.

중첩 조건으로 필터링

const scores = [45, 82, 67, 90, 33, 76];
const passed = scores.filter(score => score >= 60 && score <= 90);

console.log(passed);

 

출력 결과

[82, 67, 90, 76]

두 조건(>= 60과 <= 90)을 동시에 만족하는 요소만 남습니다.

filter()와 함께 사용되는 메서드 예시

filter()는 종종 map()이나 forEach()와 함께 사용됩니다.

const products = [
  { name: '노트북', price: 1200 },
  { name: '마우스', price: 25 },
  { name: '키보드', price: 75 }
];

const expensiveNames = products
  .filter(p => p.price > 100)
  .map(p => p.name);

console.log(expensiveNames);

출력 결과

["노트북"]

100달러 초과인 상품만 걸러낸 뒤 이름만 추출했습니다.

주의할 점

1. 항상 새로운 배열을 반환합니다.
   조건에 맞는 요소가 하나도 없으면 [](빈 배열)을 반환합니다.
2. 원본 배열은 변경되지 않습니다.
   filter()는 기존 데이터를 유지하면서 새로운 결과를 만들어냅니다.
3. return이 꼭 필요합니다.
   조건식의 결과를 반환하지 않으면 undefined로 간주되어 필터링되지 않습니다.

요약

구분                                                     내용

메서드	array.filter(callback)
주요 매개변수	요소, 인덱스, 배열
반환값	조건에 맞는 요소들로 구성된 새 배열
원본 배열 변경	❌ 없음
조건 미일치 시	빈 배열 [] 반환

결론

filter()는 배열에서 원하는 조건에 맞는 데이터만 추출할 때 매우 유용한 메서드입니다.
특히 객체 배열을 다룰 때 자주 사용되며, map()과 함께 사용하면 데이터 변환과 필터링을 간결하게 처리할 수 있습니다.