Functional Programming in Javascript – filter()
Hi, maybe to start this post you can read the post Functional Programming in Javascript – forEach()
Nice, remember that “Using functional programming in your code means that we are solving problems with less or little code.”
Filtering an array is very common operation. To filter an array we can test every element of the array and if the elements pass the condition then we collect that bunch of elements in a new array, like this:
// This is an array of objects that have data about movies
const newReleases = [
{
"id": 70111470,
"title": "Die Hard",
"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 4.0,
"bookmark": []
},
{
"id": 654356453,
"title": "Bad Boys",
"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 5.0,
"bookmark": [{ id: 432534, time: 65876586 }]
},
{
"id": 65432445,
"title": "The Chamber",
"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 4.0,
"bookmark": []
},
{
"id": 675465,
"title": "Fracture",
"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 5.0,
"bookmark": [{ id: 432534, time: 65876586 }]
}
];
// New array to save all the videos that pass a condition
let videos = [];
// Function to go to every position in the array
function getVideos(myArray) {
// using a forEach method to go through every position of the array and passing a function in every element of the array
myArray.forEach((video) => {
// every element of the array will be evaluated with this condition
if (video.rating === 5.0) { // if the rating of every element is equal to 5.0 then pass
videos.push(video); // if the element pass the condition then add this element to the videos array (that is a new array)
}
});
// returning the videos array at the end
return videos;
}
// Executing the function getVideoIdAndTitle and passing the array of objects newReleases as a parameter
getVideos(newReleases);Result:
Nice, but we can implement the same result using again Functional programming method of Javascript and for this we can use the .filter() method and in that way we can delete the line of let videos = [];
.filter() will return all the matching elements in a new array!.
// This is an array of objects that have data about movies
const newReleases = [
{
"id": 70111470,
"title": "Die Hard",
"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 4.0,
"bookmark": []
},
{
"id": 654356453,
"title": "Bad Boys",
"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 5.0,
"bookmark": [{ id: 432534, time: 65876586 }]
},
{
"id": 65432445,
"title": "The Chamber",
"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 4.0,
"bookmark": []
},
{
"id": 675465,
"title": "Fracture",
"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 5.0,
"bookmark": [{ id: 432534, time: 65876586 }]
}
];
// Function to go to every position in the array
function getVideos(myArray) {
// using a filter() method to go through every position of the array and passing a function in every element of the array
// .filter() will return all the matching elements in a new array.
return myArray.filter((video) => {
// every element of the array will be evaluated with this condition
if (video.rating === 5.0) { // if the rating of every element is equal to 5.0 then pass
return video;
}
});
}
// Executing the function getVideoIdAndTitle and passing the array of objects newReleases as a parameter
getVideos(newReleases);Result:
Nice! other great thing of functional programming is that we can join more more methods to the main method.
For example, the last code we are getting the entire element but what about if we want just the video id of that element? well for this we can join the .map() method to the .filter() method, like this:
// This is an array of objects that have data about movies
const newReleases = [
{
"id": 70111470,
"title": "Die Hard",
"boxart": "http://cdn-0.nflximg.com/images/2891/DieHard.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 4.0,
"bookmark": []
},
{
"id": 654356453,
"title": "Bad Boys",
"boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 5.0,
"bookmark": [{ id: 432534, time: 65876586 }]
},
{
"id": 65432445,
"title": "The Chamber",
"boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 4.0,
"bookmark": []
},
{
"id": 675465,
"title": "Fracture",
"boxart": "http://cdn-0.nflximg.com/images/2891/Fracture.jpg",
"uri": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 5.0,
"bookmark": [{ id: 432534, time: 65876586 }]
}
];
// Function to go to every position in the array
function getVideos(myArray) {
// using a filter() method to go through every position of the array and passing a function in every element of the array
// .filter() will return all the matching elements in a new array.
return myArray.filter((video) => {
// every element of the array will be evaluated with this condition
if (video.rating === 5.0) { // if the rating of every element is equal to 5.0 then pass
return video;
}
}).map((video)=> video.id); // Joining .map() method to get just the id of the filtered elements
}
// Executing the function getVideoIdAndTitle and passing the array of objects newReleases as a parameter
getVideos(newReleases);Result:
And that’s why Functional programming is great! because “Using functional programming in your code means that we are solving problems with less or little code.”
By Cristina Rojas.
