"조건에 맞는 값만 골라보자! 자바스크립트 filter() 쉽게 이해하기"

filter() 

배열에서 조건에 맞는 값들만 골라서 새로운 배열로 반환해주는 명령어 👇

 

▶ 이 명령어가 뭐하는 건지

filter()는 배열에서 조건을 만족하는 요소들만 추려내어 새로운 배열을 만들어주는 메서드입니다.

• 원본 배열은 변하지 않아요
• 조건이 true인 요소만 남겨서 새 배열을 만들어줘요

▶ 명령어 문법

array.filter(function(요소, 인덱스, 원본배열) {
  return 조건식;
});

혹은 화살표 함수로 간단히 쓰면:

array.filter((요소) => 조건식);

 

▶ 파라미터 (매개변수)

 

▶ 주로 어떻게 쓰는지

 

• 특정 조건을 만족하는 항목만 골라낼 때
• 예: 성적이 80점 이상인 학생만 추리기
• 예: 체크된 항목만 가져오기

▶ 예시

숫자 배열에서 짝수만 필터링

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

const evenNumbers = numbers.filter(n => n % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

 

객체 배열에서 조건에 맞는 항목만 필터링

const users = [
  { name: "Kim", age: 22 },
  { name: "Lee", age: 31 },
  { name: "Park", age: 18 }
];

const adults = users.filter(user => user.age >= 20);
console.log(adults);
// [{ name: "Kim", age: 22 }, { name: "Lee", age: 31 }]

 

 

✅ 보너스 – 체크박스 선택된 것만 가져오기 (현업에서 자주 씀)

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
const checkedBoxes = Array.from(checkboxes).filter(cb => cb.checked);

 

 

🔍 const adults = users.filter(user => user.age >= 20); 에 대해 좀 더 풀어보자.

user => user.age >= 20 이 부분이 바로 **"조건을 검사하는 함수"** 임.

filter()는 **"이 함수의 조건을 만족하는 요소만 남기겠다"**라는 구조로 작동

 

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

 

• users는 객체들이 들어 있는 배열 (ex. 사람들 정보)
• .filter(...)는 그 배열을 조건에 따라 "걸러내겠다"는 메서드
• (user => user.age >= 20)은 조건을 정해주는 콜백 함수

🎯 핵심

user => user.age >= 20

 

이건 사실 아래와 같은 의미:

function(user) {
  return user.age >= 20;
}

즉, filter는 내부적으로 아래처럼 생각하기:

"users 배열 안에 있는 각 user 객체들을 하나씩 넣어서,
이 함수가 true를 반환하는 것만 남겨서 새 배열을 만들자."

 

🔁 예를 들어서 동작 순서를 보면:

users = [
  { name: "Kim", age: 22 },
  { name: "Lee", age: 17 },
  { name: "Park", age: 31 }
];

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

 

• 첫 번째 user: age 22 → true → 포함됨 ✅
• 두 번째 user: age 17 → false → 제외 ❌
• 세 번째 user: age 31 → true → 포함됨 ✅

결과:

[
  { name: "Kim", age: 22 },
  { name: "Park", age: 31 }
]

 

 

✨ 요약

 

• user => user.age >= 20 는 filter()가 "무엇을 기준으로 남길지"를 결정하는 판별 기준 함수.
• 없으면 filter()는 뭘 기준으로 걸러야 할지 모름.