Hey everyone! It’s time for another edition of Boring JavaScript. This time we try to keep awake while looking at the Array.filter() method.

This Will Not Filter Your Coffee

The filter() method does exactly what it says it does – filters an array and creates a new array based upon that filter.

Suppose you had a collection of Legos^tm. All colors, all shapes. You are then asked to extract all the yellow bricks and put them into another pile. You examine each brink, and you determine if the brick is either yellow or not. When you find a yellow brick, you place it in another pile. When done, you now have two piles – one of only yellow bricks and another of the original collection (minus the yellow bricks).

Array.filter() does the exact same thing – with one difference. It takes an array, goes through each of the elements and applies a function you supply to them. That function returns either a truthy or falsy value. If true, Array.filter() adds that element to a new array – but does not move that element from the original array.

The result? You will have two arrays – the original array and the array with the filtered elements. The important thing to remember is that the original array still contains the elements that are in the filtered array – they are not removed.

Enough Talk! Give Me an Example!

Let’s take a look a the following code:

const animals = [
	"Cat", "Dog", "Horse", "Cow", "Coyote", "Road Runner", "Dolphin", "Whale", "Lizard"
];
const AnimalsThatStartWithC = animals.filter( animal => animal.startsWith("C") );

console.log(`\nOriginal List:`);
console.log(animals);
console.log(`\nNew List:`);
console.log(AnimalsThatStartWithC);

We start with our original array of nine animals (Lines 1 through 3). Line 4 is our Array.filter() example. It takes two arguments – a function that is applied to each element in the array and the value of the ‘this’ variable within the function. In our example, we are only using the first argument.

The function itself is applied to each element in the original array (animals, in this case). It takes three arguments:

1. The current value. This current value is the element in the array being examined.
2. The index. This is optional, and is the index of the current value in the array.
3. The array. This is optional, and is the array on which the function is being applied.

In our example, we are only looking at the current value, or the element in the array. Let’s look at that function again:

const AnimalsThatStartWithC = animals.filter(animal => animal.startsWIth("C"));

To effecitively use Array.filter(), your function needs to return a truthy or falsey value. If true, then that element is copied into the the new array created by Array.filter(). In our case, we are testing if the first letter starts with an uppercase “C”. The String.startsWith() method always returns either true or false, so we are certain that our elements will be copied correctly.

Our result is:

Original List:
[
  'Cat',     'Dog',
  'Horse',   'Cow',
  'Coyote',  'Road Runner',
  'Dolphin', 'Whale',
  'Lizard'
]

New List:
[ 'Cat', 'Cow', 'Coyote' ]

As you can see, our original array was not changed. But a new array was created with all animals that started with the uppercase “C”.

And that’s all there is to the Array.filter() method!

The Video

Here is the video we’ve made on Array.filter(). Make sure you subscribe to our YouTube channel.

Categories: Boring JavaScript Javascript

Tagged as: #array.filter #filter #javascript

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com