[filter()] 조건에 맞는 요소를 필터링하기

728x90

filter() 

자바스크립트에서 데이터를 다룰 때, 가장 많이 하는 작업 중 하나는 "필터링", 즉 조건에 맞는 요소만 골라내는 작업입니다.

• 나이가 30 이상인 사람만 뽑기
• 완료된 작업만 리스트에 보여주기
• 검색어와 일치하는 항목만 출력하기

이런 일을 할 때 가장 유용한 메서드가 바로 Array.prototype.filter() 입니다.

 

---

1.  filter() 메서드란?

filter() 는 배열에서 조건을 만족하는 요소만 추출하여 새 배열로 반환하는 메서드입니다.

 

const newArray = array.filter(callback);

• 기존 배열은 변경하지 않습니다.
• 조건을 만족하는 요소만 모은 새로운 배열을 반환합니다.

 

---

2.  기본 사용법

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

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

• num % 2 === 0 조건을 만족하는 값만 반환됩니다.
• 원본 numbers는 그대로 유지됩니다.

 

---

3.  콜백 함수 구조

array.filter((element, index, array) => {
  // 조건에 따라 true 또는 false 반환
});

매개변수	설명
element	현재 요소
index	현재 요소의 인덱스
array	원본 배열 전체

 

---

4.  다양한 실전 예제

a.  특정 조건의 객체 필터링

const users = [
  { name: "Alice", age: 28 },
  { name: "Bob", age: 17 },
  { name: "Charlie", age: 33 },
];

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

console.log(adults);
// 👉 [{ name: "Alice", age: 28 }, { name: "Charlie", age: 33 }]

b.  중복 제거 + 특정 항목 제외

const fruits = ["apple", "banana", "apple", "orange"];

const uniqueFruits = fruits.filter((fruit, index, arr) =>
  arr.indexOf(fruit) === index
);

console.log(uniqueFruits); // 👉 ["apple", "banana", "orange"]

c.  검색 필터 구현 (대소문자 무시)

const items = ["React", "Vue", "Angular", "Svelte"];
const keyword = "v";

const filtered = items.filter((item) =>
  item.toLowerCase().includes(keyword.toLowerCase())
);

console.log(filtered); // 👉 ["Vue"]

 

---

5.  자주 하는 실수

실수	설명
filter 안에서 return을 안 씀	한 줄로 쓰지 않으면 return 필요함
원본 배열이 바뀐다고 착각	filter()는 항상 새 배열 반환
조건을 if문만 쓰고 true/false를 반환 안 함	반드시 조건식이 true/false여야 함

잘못된 예

arr.filter((item) => {
  if (item > 3) {
    console.log(item); // ❌ return 없음
  }
});

 

---

6.  map(), filter(), reduce() 비교

메서드	역할	반환값
map()	배열 요소를 변형	모든 요소 포함한 새 배열
filter()	조건에 따라 선택	조건을 만족하는 새 배열
reduce()	누적 계산	하나의 결과값

 

---

7.  마무리

• filter() 는 조건을 만족하는 요소만 모은 새 배열을 반환합니다.
• 원본 배열은 변하지 않습니다.
• 실무에서 검색, 필터링, 조건 추출 등에 자주 사용합니다.
• map, reduce 와 함께 자바스크립트 배열 고차 함수의 핵심 중 하나입니다.

함께 보면 좋은 자료

외부 사이트 : 

• MDN Web Docs - Array.prototype.filter()

 

---

반응형