자바스크립트의 filter: 데이터를 깔끔하게 추려내는 요술사 ✨

filter 톺아보기! ✨

filter는 자바스크립트 배열 메서드 중에서도 필수 중의 필수로 꼽히는 도구입니다. 배열에서 원하는 조건을 만족하는 요소만 골라내 새로운 배열을 만들어 주죠. 코드를 깔끔하고 직관적으로 작성할 수 있어, 데이터를 다룰 때 없어선 안 될 친구랍니다. 이번 글에서는 filter의 사용법부터 실전 활용까지, 개발자라면 알아야 할 모든 것을 담아볼게요. 💡

---

filter란? 🤔

filter는 배열 메서드로, 주어진 조건을 만족하는 요소들만 추출해 새로운 배열을 반환합니다. 원본 배열은 그대로 유지되며, 배열을 “필터링”해 데이터를 정리하거나 분류할 때 사용되죠.

---

문법 📜

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

• callback: 각 배열 요소를 테스트할 조건을 정의하는 함수
• element: 현재 처리 중인 배열 요소
• index (선택) : 현재 요소의 인덱스
• array (선택) : filter를 호출한 원본 배열
• thisArg (선택) : callback 함수에서 사용할 this 값

---

기본 사용법 🌱

const numbers = [1, 2, 3, 4, 5];

// 짝수만 필터링
const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4]

---

filter의 특징과 주요 장점 🌟

1. 원본 배열은 변경되지 않는다

filter는 새로운 배열을 반환하며, 원본 배열은 손상되지 않습니다.

→ 불변성을 유지하면서 데이터 조작 가능

 

2. 조건이 없으면 빈 배열 반환

조건에 맞는 요소가 하나도 없으면 빈 배열이 반환됩니다.

→ 안전하게 결과 처리 가능

 

3. 함수형 프로그래밍의 핵심 도구

데이터를 직접 수정하지 않고, 새로운 결과를 만들어 내는 함수형 프로그래밍의 중요한 구성 요소입니다.

---

실전 예제와 활용법 🛠️

1. 숫자 필터링 🔢

const numbers = [10, 25, 30, 45, 60];

// 30 이상인 숫자만 필터링
const largeNumbers = numbers.filter((num) => num >= 30);

console.log(largeNumbers); // [30, 45, 60]

 

2. 문자열 필터링 ✉️

const words = ["apple", "banana", "cherry", "date", "elderberry"];

// 6자 이상인 단어만 필터링
const longWords = words.filter((word) => word.length >= 6);

console.log(longWords); // ["banana", "cherry", "elderberry"]

 

3. 객체 필터링 🧩

객체 배열에서 특정 조건을 만족하는 객체만 추출할 때도 filter는 매우 유용합니다.

const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 17 },
  { id: 3, name: "Charlie", age: 30 },
];

// 성인이 아닌 사용자만 필터링
const minors = users.filter((user) => user.age < 18);

console.log(minors);
// [{ id: 2, name: "Bob", age: 17 }]

 

4. 중복 제거와 중첩 필터링 🎯

배열을 중복 제거하거나 여러 조건으로 필터링도 가능합니다.

 

const mixedNumbers = [1, 2, 2, 3, 3, 4, 5, 5];

// 중복 제거
const uniqueNumbers = mixedNumbers.filter(
  (num, index, array) => array.indexOf(num) === index
);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

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

 

5. React에서의 활용 🚀

filter는 React 개발에서도 자주 사용됩니다. 예를 들어, 리스트 데이터를 조건에 따라 동적으로 렌더링할 때 유용하죠.

function UserList({ users }) {
  // 성인 사용자만 필터링
  const adults = users.filter((user) => user.age >= 18);
  return (
    <ul>
      {adults.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// Example usage
const users = [
  { id: 1, name: "Alice", age: 25 },
  { id: 2, name: "Bob", age: 17 },
  { id: 3, name: "Charlie", age: 30 },
];

<UserList users={users} />;

---

filter 사용 시 주의사항 🚨

1. 반드시 true/false를 반환해야 한다

filter의 콜백 함수는 요소를 포함할지(true) 제외할지(false) 결정합니다.

→ 값 반환이 아닌 조건을 명확히 작성하세요.

const result = [1, 2, 3].filter((num) => num > 1);
console.log(result); // [2, 3]

 

2. 빈 배열 반환 처리

조건을 만족하는 요소가 없으면 빈 배열을 반환합니다.

→ 이 점을 고려해 적절히 처리해야 해요.

 

3. 성능 고려

데이터가 많은 배열에서 복잡한 조건을 필터링할 경우 성능에 영향을 줄 수 있습니다.

→ 필요한 경우 결과를 캐싱하거나, 더 효율적인 조건을 작성하세요.

---

filter를 완벽히 이해하기 위한 실전 예제: Todo App 📝

실제 애플리케이션에서 filter를 사용하는 시나리오를 살펴봅시다. 아래는 간단한 Todo 앱의 예제입니다.

const todos = [
  { id: 1, title: "Learn JavaScript", completed: true },
  { id: 2, title: "Build a project", completed: false },
  { id: 3, title: "Master React", completed: false },
];

// 완료된 작업 필터링
const completedTodos = todos.filter((todo) => todo.completed);
console.log(completedTodos);
// [{ id: 1, title: "Learn JavaScript", completed: true }]


// 완료되지 않은 작업 필터링
const pendingTodos = todos.filter((todo) => !todo.completed);
console.log(pendingTodos);
// [
//   { id: 2, title: "Build a project", completed: false },
//   { id: 3, title: "Master React", completed: false },
// ]

 

이 데이터를 기반으로 React 컴포넌트에서 Todo 리스트를 나누어 렌더링할 수도 있겠죠.

---

요약: filter, 언제 어떻게 활용할까? 🤓

• 데이터 정리: 원하는 조건에 맞는 요소만 추출해 새 배열 생성
• React 개발: 조건에 따라 동적으로 리스트 렌더링
• 안전한 데이터 처리: 원본 배열을 변경하지 않으며, 불변성 유지

filter는 단순한 데이터 추출에서부터 동적 렌더링까지, 프론트엔드 개발에서 없어서는 안 될 도구입니다. 데이터를 깔끔하게 다듬고, 코드 가독성을 높이고 싶다면, 지금 바로 filter와 친해져 보세요!

 

🌷전설의 개발자가 되어봅시당! 🌷