✨ 자바스크립트 배열 메서드: filter()

📌 개요

filter()는 자바스크립트 **배열(Array)**의 내장 메서드(Built-in method) 중 하나로, 배열의 각 요소에 대해 **주어진 판별 함수(Callback function)**를 실행하고, 그 결과가 **참(true)**인 모든 요소를 모아 새로운 배열을 만들어 반환한다. 즉, 특정 조건을 만족하는 요소들만 걸러내는(Filtering) 역할을 한다.

⚙️ 구문 (Syntax)

array.filter(callbackFunction(element[, index[, array]])[, thisArg])

• callbackFunction: 각 요소에 대해 실행할 함수. 이 함수는 반드시 true 또는 false를 반환해야 한다. (정확히는 true/false로 평가될 수 있는 값)
  • element: 처리할 현재 요소.
  • index (선택 사항): 처리할 현재 요소의 인덱스(Index).
  • array (선택 사항): filter를 호출한 배열.
• thisArg (선택 사항): callbackFunction을 실행할 때 this로 사용할 값.

➡️ 반환 값 (Return Value)

filter() 메서드는 콜백 함수의 반환 값을 true로 만드는 요소들만 모아 구성된 새로운 배열을 반환한다. 만약 어떤 요소도 조건을 만족하지 못하면 빈 배열이 반환된다. 중요한 점은 원본 배열은 **변경되지 않는다(Non-mutating)**는 것이다.

💡 사용 목적 및 예시

filter()는 배열에서 특정 조건을 충족하는 데이터만 추출하고자 할 때 매우 유용하게 사용된다. 예를 들어, 사용자 목록에서 활성 사용자만 거르거나, 숫자 배열에서 짝수만 골라내는 등의 작업에 활용될 수 있다.

예시 1: 숫자 배열에서 짝수만 필터링

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 각 숫자가 짝수인지 확인하는 콜백 함수
const isEven = (number) => {
  return number % 2 === 0; // 나머지가 0이면 짝수 (true 반환)
};

// filter 메서드를 사용하여 짝수만 걸러낸 새 배열 생성
const evenNumbers = numbers.filter(isEven);

console.log(evenNumbers); // 출력: [2, 4, 6, 8, 10]
console.log(numbers);    // 출력: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] (원본 배열은 변경되지 않음)

예시 2: 사용자 객체 배열에서 특정 조건을 만족하는 사용자 필터링

const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true }
];

// isActive가 true인 사용자만 필터링
const activeUsers = users.filter(user => user.isActive === true);
// 화살표 함수(Arrow function)를 사용하여 간결하게 표현

console.log(activeUsers);
// 출력:
// [
//   { id: 1, name: 'Alice', isActive: true },
//   { id: 3, name: 'Charlie', isActive: true }
// ]

✅ 주요 특징 및 고려사항

• 비파괴적(Non-destructive): 원본 배열을 변경하지 않고, 항상 새로운 배열을 반환한다.
• 콜백 함수의 반환 값: 콜백 함수는 각 요소에 대해 true 또는 false (또는 truthy/falsy 값)를 반환해야 한다. 반환 값이 true로 평가되는 요소만 새 배열에 포함된다.
• 빈 배열: filter()를 빈 배열에 호출하면 콜백 함수는 실행되지 않고 항상 빈 배열이 반환된다.
• 요소 누락: filter()는 배열에 실제로 할당된 요소에 대해서만 콜백 함수를 호출한다. 삭제되었거나 할당된 적 없는 인덱스(Sparse array)는 건너뛴다.