JavaScript: Array#Filter()

Lemuel Uhuru
Apr 25, 2018 · 3 min read
Image for post
Image for post

Method Definition:

The filter() method loops over an existing array and applies a callback function to each element, evaluating it against a conditional, if the element is ‘truthy’ then it is returned within a new array.

Method Parameters:

The filter() method accepts a required callback function as its first parameter and an optional ‘this’ value as its second.

The callback function accepts the current element, index, and existing array, as the first, second, and third parameters respectively.

For Example:

function(currentElement, index, array) {} //callback func signature

Method Return Value:

The filter () method returns a new array containing elements that fulfill the conditional criteria used for evaluation within the callback.

Example Data

Let’s populate an array with movie objects, containing three types of properties, title, genre, and year_released. In a real world application, you would likely be using the filter method on an array of objects, e.g, you might want to filter a selection of movies to view titles that were released most recently or perhaps to view movies from a specific genre.

Using the sample data below, we’ll do just that.

const movies = [{ title: "it", genre: "horror", year_released: 2017  },{ title: "the exorcist", genre: "horror", year_released: 1973 },{ title: "get out", genre: "horror", year_released: 2017 },{ title: "the blair witch project", genre: "horror", year_released: 1999 },{ title: "the conjuring", genre: "horror", year_released: 2013  },{ title: "the godfather", genre: "drama", year_released: 1972 },{ title: "pulp fiction", genre: "drama", year_released: 1994 },{ title: "heat", genre: "drama", year_released: 1994 },{ title: "the predator", genre: "action", year_released: 2018 },{ title: "iron fist", genre: "action", year_released: 2017 },];

Example Problem 1:

Using our sample movie data, we’ll create a function that accepts a year, and returns a new array containing movie objects that correspond to that year.

// ES5
function filterMoviesByYear(year) {
return movies.filter(function(movie) {
return movie.year_released === year;
});
}
// ES2015
function filterMoviesByYear(year) {
return movies.filter(movie => movie.year_released === year);
}
console.log(filterMoviesByYear(2017));> [ { title: 'it', genre: 'horror', year_released: 2017 },
{ title: 'get out', genre: 'horror', year_released: 2017 },
{ title: 'iron fist', genre: 'action', year_released: 2017 } ]

As you can see, we used both an anonymous function from ES5 and an arrow function from ES2015. They both function the same in this example, however, with the exception being that the arrow function’s return statement is implicit in the absence of code blocks.

Example Problem 2:

Lets take a look at another example, this time filtering based on the movie object’s genre property.

// ES5
function filterMoviesByGenre(year) {
return movies.filter(function(movie) {
return movie.genre === genre;
});
}// ES2015
function filterMoviesByGenre(genre) {
return movies.filter(movie => movie.genre === genre);
}
console.log(filterMoviesGenre('horror');> [ { title: 'it', genre: 'horror', year_released: 2017 },
{ title: 'the exorcist', genre: 'horror', year_released: 1973 },
{ title: 'get out', genre: 'horror', year_released: 2017 },
{ title: 'the blair witch project',
genre: 'horror',
year_released: 1999 },
{ title: 'the conjuring', genre: 'horror',year_released: 2013 } ]

The functions are essentially the same as those used in the first example, we just substituted year_released and year for genre.

Conclusion:

I hope you have gained a better understanding of how to use the filter method through a potential real world application. If you enjoyed this tutorial, please feel free to clap a few times and check out some of my other articles. Until next time, be well : ).

DevGenie

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store