.filter

4 min readJun 14, 2016

Onward and upward in our “breaking down built-in JS methods” series. If you haven’t read my previous post, where I explain what exactly it is that I’m doing here, and also break down the .reverse method, go ahead and check it out now. I’ll wait.

Ready?

Cool, let’s press on.

.filter

p class=”p1">Today I want to look at the .filter method of JavaScript. Before I got into Eloquent Javascript, I knew this callback function as something that could take an array and return a new array with certain elements removed, according to whatever parameters I specified. It looks something like this:
[code language=”javascript”]
array.filter(function (element){
return whichever elements match the conditions I put here;
});
[/code]
Let’s take a closer look at the “filter” part of this. What’s actually happening when you call this function? It’s actually very simple:
[code language=”javascript”]
function filter(array, screen){
var filtered = []
for (var i = 0 ; i < array.length ; i ++){
if (screen(array[i])){
filtered.push(array[i]);
}
}
return filtered;
}
[/code]
We pass two arguments to the filter function — an array to be changed, and a screen (or test) that will determine which elements should be pushed into a new array. We define the new array variable inside the function (filtered), and then use a for loop to use the screen argument on each element in the array, pushing the ones that pass into filtered, and finally returning the filtered array. Here’s where it gets a bit tricky: as you can see, we call our screen argument as a function in our if statement. But…what is that function exactly?

Get Lizzie Shipton’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Well, in the example above, that screen function doesn’t actually exist. It doesn’t exist because we haven’t written it yet. .filter is a higher-order function, meaning it takes another function as a parameter and then calls that function at some point during its execution. In this case, all our filter function is actually doing is looping over array elements. The function that will actually be doing the filtering is the function we pass as the screen argument — once we write it.

Think of it this way: you’re really good at planning dinner parties, but you really suck at cooking. Maybe your boyfriend is the one who does the cooking (and maybe I’m giving away too much away about myself right now…) You decide to throw a dinner party, so you set everything up — invite the guests, set the table, assign the seats so that Rachel doesn’t have to sit next to Ross (because they’re ON A BREAK!) Then, on the night of the party, you call on your boyfriend to do the actual cooking (he likes it don’t worry.) In this example, you are like the filter function: facilitating the process of serving food to each of your guests, while your boyfriend is the screen argument: cooking the food you will serve. Together you make a great team! OMG you’re gonna be together foreverrrrrrrrrrr….!

p class=”p1">So at this point, we need to define our screen. Let’s say we have an array of numbers, and we want to filter for the number 13. We need to write a function that tests each element to see if it is the number 13:
[code language=”javascript”]
function test(element){
return element == 13;
}
[/code]
Easy enough. Now we just have to get our test function into our filter function. We can do that like so:
[code language=”javascript”]
console.log(filter([the array we want to test], test));
[/code]
Can you see how it works? We use console.log to call the filter function, and we pass it an array to be tested, and a function to do the testing. We’ve set up our filter function ahead of time with two placeholder parameters (array, screen), and now we are calling that function with the real parameters ([the array we want to test], test). The cool thing is, we can now define a bunch of different test functions to filter for different things, and simply pass them as arguments to the same filter function.

p class=”p1">First, let’s create an array to filter:
[code language=”javascript”]
var array = [1, 13, 275, 42, 3, 101]
function testAgain(element){
return element > 100;
}
function testYetAgain(element){
return element < 4;
}
console.log(filter(array, testAgain);
 //will output an array with only elements greater than 100
console.log(filter(array, testYetAgain);
 //will output an array with only elements less than 4
[/code]
We can also define the test function as we call the filter function, like so:
[code language=”javascript”]
console.log(filter(array, function(element){
return element == 13;
});
[/code]
And, finally, we can call filter as a built-in method on an array:
[code language=”javascript”]
array.filter(function(element){
return element === 13;
});
[/code]
Man! That was a lot of filtering. I think I’m ready to stop filtering things for a while and just accept the world with open arms. I hope this was helpful to any of you struggling with higher-order functions (as I have been for the past week…)