[JavaScript] 배열 필터링 (filter)

1️⃣ 기본 문법

array.filter(callbackFn(element, index, array), thisArg?)

callbackFn

• element : 현재 요소 값
• index : 현재 인덱스
• array : 원본 배열
• 반환값이 true : 그 요소는 결과 배열에 포함
• 반환값이 false : 그 요소는 결과 배열에 제외

thisArg (선택) : callback 실행 시 this로 쓸 값
원본 배열은 변경하지 않고, 조건을 만족하는 새로운 배열을 반환

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

2️⃣ 특징

• 새로운 배열 반환 (원본 유지)
• 조건에 맞지 않으면 빈 배열 반환 가능
• break, continue 같은 흐름 제어 불가능 (무조건 끝까지 순회함)
• 배열 요소가 걸리지는 기능에 특화 (forEach와 다르게 return 값이 의미 있음)

3️⃣ 예시

(1) 짝수만 걸러내기

배열의 요소가 2로 나눴을 때 나누어 떨어지는 것(짝수)인 경우 evens 변수에 저장

const nums = [1, 2, 3, 4, 5];
const evens = nums.filter(n => n % 2 === 0);
console.log(event);

[2, 4]

(2) 문자열 길이 조건

배열의 요소가 길이가 5 이상인 경우 longWords 변수에 저장

const words = ["apple", "kiwi", "banana", "fig"];
const longWords = words.filter(w => w.length >= 5);
console.log(longWords);

["apple", "banana"]

(3) 객체 배열 조건 검색

배열의 요소가 객체 내 age가 20 이상인 경우 adults 변수에 저장

const users = [
  { name: "Kim", age: 24 },
  { name: "Lee", age: 19 },
  { name: "Park", age: 30 }
];

const adults = users.filter(u => u.age >= 20);
console.log(adults);

[
  { name: "Kim", age: 24 },
  { name: "Park", age: 30 }
]

(4) falsy 값 제거

배열의 요소가 falsy가 아닌 truthly인 경우 cleaned 변수에 저장

const arr = [0, 1, false, 2, "", 3, null, "hello"];
const cleaned = arr.filter(Boolean);
console.log(cleaned);

[1, 2, 3, "hello"]

Boolean 생성자를 그대로 넣으면 truthly 값만 넘김