🧩 JavaScript filter() 사용 시점과 예시 정리

filter()는 배열에서 조건을 만족하는 요소만 남기고 새로운 배열을 반환하는 함수입니다.
즉, “필요한 데이터만 걸러낼 때” 사용합니다.

1️⃣ 숫자 조건으로 걸러낼 때

특정 조건(예: 짝수, 홀수, 양수 등)을 만족하는 값만 남기고 싶을 때 사용합니다.

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

// 짝수만 남기기
const even = numbers.filter(num => num % 2 === 0);

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

💡 filter()는 조건이 true인 요소만 남기며, 새 배열을 반환합니다.

2️⃣ 문자열 필터링 (검색 기능 등)

사용자 입력값에 따라 특정 문자열이 포함된 데이터를 걸러낼 수 있습니다.

const fruits = ["사과", "바나나", "포도", "딸기"];

const search = "바";
const result = fruits.filter(fruit => fruit.includes(search));

console.log(result); // ["바나나"]

💡 간단한 검색 기능을 구현할 때 매우 자주 사용됩니다.

3️⃣ 객체 배열에서 조건에 맞는 데이터만 남기기

객체 배열에서 특정 속성값 기준으로 데이터를 필터링할 수 있습니다.

const users = [
  { name: "Tom", age: 25 },
  { name: "Jane", age: 30 },
  { name: "Kim", age: 28 }
];

// 27세 이상만 남기기
const adults = users.filter(user => user.age >= 27);

console.log(adults);
// [{ name: "Jane", age: 30 }, { name: "Kim", age: 28 }]

💡 특정 조건(나이, 점수, 상태 등)에 맞는 객체만 추출할 때 사용합니다.

4️⃣ 배열 중복 제거 (조합 활용)

filter()와 indexOf()를 조합하면 중복 데이터를 제거할 수 있습니다.

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

const unique = numbers.filter((num, index, arr) => arr.indexOf(num) === index);

console.log(unique); // [1, 2, 3, 4, 5]

💡 간단한 중복 제거도 filter() 하나로 해결할 수 있습니다.

5️⃣ null, undefined, false 제거하기 (데이터 정제)

데이터 배열에서 빈 값이나 falsy 값을 한 번에 제거할 수 있습니다.

const data = [0, 1, null, 2, undefined, 3, false, 4, "", 5];

const cleaned = data.filter(Boolean);

console.log(cleaned); // [1, 2, 3, 4, 5]

💡 filter(Boolean) 패턴은 데이터 정제(clean-up) 시 매우 자주 등장합니다.

🧠 정리 — filter()를 써야 할 때

🔚 마무리

filter()는 배열에서 원하는 조건에 맞는 데이터만 걸러낼 때 사용합니다.
검색, 필터 기능, 조건부 렌더링, 데이터 정제 등 현실적인 개발 상황에서 가장 자주 쓰이는 배열 메서드 중 하나입니다 💡