본문 바로가기
javascript

[JS] filter() 완벽 가이드: 배열 필터링의 모든 것"

by 100kg_취준생 2025. 1. 20.
반응형

 

 

filter() 메서드

처음에 js로 코딩테스트 문제를 풀다 다른 사람들의 코드를 보면 filter라는 메서드를 상당히 자주 쓰는 것을 볼 수 있다.

그래서 오늘은 filter 메서드가 어떻게 작동하고 활용되는지에 대해서 알아보려고 한다.

 

 

 

 

 

기본 개념

filter()는 JavaScript 배열 메서드로, 배열의 각 요소를 순회하며 조건에 맞는 요소들만 추출하여 새로운 배열을 반환합니다.원본 배열은 변경되지 않으며, 조건에 부합하는 요소들만 포함된 새로운 배열이 반환됩니다.데이터를 정제하거나 특정 조건을 만족하는 데이터를 선택할 때 유용합니다.

 

array.filter(callback(element, index, array), thisArg);

 

  • element: 현재 처리 중인 요소.
  • index: 현재 요소의 인덱스(선택적).
  • array: filter()를 호출한 원본 배열(선택적)

 

 

예제

1. 숫자 배열에서 짝수만 필터링하기

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

 

2. 문자열 배열에서 특정 문자로 시작하는 요소 추출

const fruits = ['apple', 'banana', 'cherry', 'avocado'];
const aFruits = fruits.filter(fruit => fruit.startsWith('a'));
console.log(aFruits); // ['apple', 'avocado']

 

 

3. 객체 배열에서 조건에 맞는 객체만 추출

const users = [
  { name: 'John', active: true },
  { name: 'Jane', active: false },
  { name: 'Mike', active: true },
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// [{ name: 'John', active: true }, { name: 'Mike', active: true }]

 

 

 

 

이상으로 프스팅을 마치겠습니다.