자바스크립트 배열 필터링 핵심 정리

프론트엔드 개발에서 자바스크립트를 다룬다면, 데이터를 효율적으로 가공하는 방법은 꼭 익혀야 합니다. 그중에서도 배열 필터링은 데이터를 선별해 원하는 값만 뽑아낼 수 있는 핵심 기술입니다. 이 글에서는 자바스크립트 배열 필터링의 기초부터 응용까지 실제 예제 중심으로 설명드리겠습니다.

1. 필터링이란? 배열에서 데이터를 걸러내는 기술

필터링(filtering)은 말 그대로 데이터를 ‘걸러내는’ 작업입니다. 배열(array)에 여러 개의 데이터가 있을 때, 특정 조건에 맞는 항목만 뽑아내는 방식이죠. 예를 들어, 숫자 배열 중 짝수만, 사용자 목록 중 나이가 20대인 사용자만 골라내는 등의 작업이 여기에 해당합니다. 자바스크립트에서는 filter() 메서드를 활용하여 손쉽게 구현할 수 있습니다.

2. filter() 메서드 기본 문법

const result = array.filter(callback);

여기서 callback은 각 요소에 대해 실행되는 함수로, true를 반환한 요소만 결과 배열에 포함됩니다.

예를 들어, 짝수만 필터링하려면 아래와 같이 작성합니다.

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

3. 조건별 필터링 예제 살펴보기

문자열 필터링

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

객체 배열에서 조건 필터링

const users = [
  { name: 'John', age: 28 },
  { name: 'Jane', age: 22 },
  { name: 'Tom', age: 19 }
];
const adults = users.filter(user => user.age >= 21);
console.log(adults); // John, Jane

이처럼 자바스크립트 배열 필터링은 다양한 조건에 따라 유연하게 적용할 수 있습니다.

4. 복잡한 조건 필터링도 가능할까?

네, 가능합니다. && 또는 || 조건을 함께 사용하면 다중 조건 필터링이 가능합니다.

const filtered = users.filter(user => user.age >= 20 && user.name.startsWith('J'));

이 코드의 결과는 John, Jane처럼 이름이 J로 시작하고, 나이가 20세 이상인 사용자만 추출합니다.

5. 배열 필터링 시 주의할 점

원본 배열은 변경되지 않습니다. filter()는 항상 새로운 배열을 반환합니다.
조건 반환이 불명확하면 undefined가 아닌 빈 배열을 리턴합니다.
배열이 비어 있으면 filter()는 어떤 것도 반환하지 않습니다.

✅ 마무리

자바스크립트 배열 필터링은 데이터를 다루는 데 있어 매우 강력한 도구입니다. 간단한 조건부터 복잡한 필터링까지 다양하게 활용할 수 있어, 실무에서도 자주 사용됩니다. filter() 메서드를 이해하고 적재적소에 활용한다면 코드의 가독성과 유지보수성 모두 향상될 것입니다.

기록기록