JavaScript: Array#Filter()

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 : ).