Picking Elements: filter()

In the lessons on loops and objects, you wrote many loops that go through an array: to pick some of its elements, to collect their names or to find one of them. Programs need this all the time, so arrays have methods that do it for you, each in a single line. Every method in this lesson replaces a loop you already know how to write.

Here is a loop that picks the temperatures above 20 degrees:

const temperatures = [18, 24, 27, 15, 21];

const warm = [];
for (const temperature of temperatures) {
    if (temperature > 20) {
        warm.push(temperature);
    }
}
console.log(warm);

[24, 27, 21]

The method filter() does the same in one line:

const warm = temperatures.filter((temperature) => temperature > 20);
console.log(warm);

[24, 27, 21]

The argument of filter() is a function, here the arrow function (temperature) => temperature > 20. filter() calls it once for each element of the array and passes it the element as its argument. When the function returns true, the element goes into a new array. When it returns false, the element is left out. So the function is the condition from the if in the loop. A function that you give to another function, which then calls it, is called a callback.

filter() doesn't change the original array: temperatures still holds all five numbers. It returns a new array, which you store in a variable. When no element meets the condition, the new array is empty: [].

In an array of objects, the callback gets one whole object at a time, just like the loop variable in for...of:

const animals = [
    { name: "Ella", species: "elephant", age: 12 },
    { name: "Leo", species: "lion", age: 6 },
    { name: "Gina", species: "giraffe", age: 4 },
    { name: "Pip", species: "penguin", age: 2 }
];

const young = animals.filter((animal) => animal.age < 5);
console.log(young);
console.log("Young animals:", young.length);

[{ name: "Gina", species: "giraffe", age: 4 }, { name: "Pip", species: "penguin", age: 2 }]
Young animals: 2

The length of the new array tells you how many elements met the condition. That's the counting pattern from the lesson on loops, in one line.

Typical mistakes:

• Not using the result. temperatures.filter((temperature) => temperature > 20); on a line of its own creates a new array and throws it away, and temperatures stays as it was. Store the result in a variable, or print it.
• Curly braces without return, as in the lesson on functions. (temperature) => { temperature > 20 } returns undefined, which counts as false, so the new array is always empty.