본문으로 건너뛰기

filter

Creates a new array with elements that pass the test implemented by the provided callback function. Iterates through each element of the source array and includes only those elements for which the callback function returns a truthy value. The callback receives the current element, its index, and the entire array as arguments.

Signature​

const filter: <Type>(array: Type[], callback: (item: Type, index: number, array: Type[]) => boolean) => Type[]

Parameters​

NameTypeDescription
array-Source array to filter
callback-Filtering function to test each element

Returns​

New filtered array containing only elements that pass the test

Examples​

Filter numbers by condition​

import { filter } from '@winglet/common-utils';

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = filter(numbers, num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

const greaterThanFive = filter(numbers, num => num > 5);
console.log(greaterThanFive); // [6, 7, 8, 9, 10]

Filter objects by property​

interface User {
id: number;
name: string;
age: number;
isActive: boolean;
}

const users: User[] = [
{ id: 1, name: 'Alice', age: 30, isActive: true },
{ id: 2, name: 'Bob', age: 25, isActive: false },
{ id: 3, name: 'Charlie', age: 35, isActive: true },
{ id: 4, name: 'Diana', age: 28, isActive: false }
];

const activeUsers = filter(users, user => user.isActive);
console.log(activeUsers); // [{ id: 1, name: 'Alice', ... }, { id: 3, name: 'Charlie', ... }]

const adultsOver30 = filter(users, user => user.age > 30);
console.log(adultsOver30); // [{ id: 3, name: 'Charlie', age: 35, ... }]

Using index and array parameters​

const items = ['a', 'b', 'c', 'd', 'e'];

// Filter by index (get every other element)
const everyOther = filter(items, (item, index) => index % 2 === 0);
console.log(everyOther); // ['a', 'c', 'e']

// Filter based on array context
const duplicatesRemoved = filter(items, (item, index, array) =>
array.indexOf(item) === index
);

Filter strings by criteria​

const words = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

// Filter by starting letter
const startsWithA = filter(words, word => word.startsWith('a'));
console.log(startsWithA); // ['apple', 'apricot', 'avocado']

// Filter by length
const longWords = filter(words, word => word.length > 5);
console.log(longWords); // ['banana', 'apricot', 'cherry', 'avocado']

Complex filtering with multiple conditions​

interface Product {
name: string;
price: number;
category: string;
inStock: boolean;
}

const products: Product[] = [
{ name: 'Laptop', price: 999, category: 'Electronics', inStock: true },
{ name: 'Book', price: 15, category: 'Education', inStock: true },
{ name: 'Phone', price: 699, category: 'Electronics', inStock: false },
{ name: 'Desk', price: 299, category: 'Furniture', inStock: true }
];

// Filter expensive electronics in stock
const expensiveElectronics = filter(products, product =>
product.category === 'Electronics' &&
product.price > 500 &&
product.inStock
);
console.log(expensiveElectronics); // [{ name: 'Laptop', ... }]

Working with nested objects​

const employees = [
{ name: 'John', skills: ['JavaScript', 'Python'], department: { name: 'Engineering' } },
{ name: 'Jane', skills: ['Java', 'C++'], department: { name: 'Engineering' } },
{ name: 'Bob', skills: ['Marketing', 'Sales'], department: { name: 'Sales' } }
];

// Filter engineers with JavaScript skills
const jsEngineers = filter(employees, emp =>
emp.department.name === 'Engineering' &&
emp.skills.includes('JavaScript')
);
console.log(jsEngineers); // [{ name: 'John', ... }]

Playground​

import { filter } from '@winglet/common-utils';

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evens = filter(numbers, num => num % 2 === 0);
console.log(evens); // [2, 4, 6, 8, 10]

const greaterThanFive = filter(numbers, num => num > 5);
console.log(greaterThanFive); // [6, 7, 8, 9, 10]

Notes​

Performance: Uses dynamic array growth with direct index assignment for optimal performance. Time complexity is O(n) where n is the array length.

Callback Parameters: The callback function receives three parameters:

  • item: The current element being processed
  • index: The index of the current element
  • array: The entire source array

Immutability: Does not modify the original array, returns a new filtered array.

Truthy Values: Elements are included if the callback returns any truthy value, not just boolean true.