Skip to content

Filtering elements: `filter()`

Filtering elements: filter()

With the arrays, you have the filter() method to filter the elements of the array with a specific condition. For example with an array of numbers, you want to retrieve only the element greater than 50. The filter() doesn’t change the original array. It returns a new array with the elements that satisfy the condition.

const numbers = [3, 75, 42, 13, 69]
const resultNumbers = numbers.filter(
number => number >= 50
)
console.dir(resultNumbers)
// output: Array [ 75, 69 ]

If the element is an object you can filter for the attribute of the object. For example, if you have objects like this one:

{ product: 'Desk', price: 200, active: true }

and you have an array of elements, and you want to filter and retrieve the object with a price greater (or equal) than 150:

const elements = [
{ product: 'Desk', price: 200, active: true },
{ product: 'Chair', price: 100, active: true },
{ product: 'Door', price: 300, active: false },
{ product: 'Bookcase', price: 150, active: true },
{ product: 'Door', price: 100, active: true }
]
const resultElements = elements.filter(
element => element.price >= 150
)
console.dir(resultElements)

the result is:

Array [
{ product: 'Desk', price: 200, active: true },
{ product: 'Door', price: 300, active: false },
{ product: 'Bookcase', price: 150, active: true }
]

you can create a more complex conditions like:

const resultActiveElements = elements.filter(
element =>
(element.active && element.price >= 150)
)

where the result is:

Array [
{ product: 'Desk', price: 200, active: true },
{ product: 'Bookcase', price: 150, active: true }
]