JavaScript Array Methods: filter

In this blog, we'll explore a powerful array method in JavaScript: filter. This method provides an elegant way to iterate over and manipulate arrays. Let's dive into how they work and see some practical examples.

filter, map, and reduce are higher-order functions that are methods of arrays in JavaScript. These methods are widely used for functional programming techniques to transform, filter, and reduce arrays.

Before diving into "filter", let's see one example of for-each

The forEach method is used to execute a provided function once for each array element. It doesn't return a new array; instead, it simply iterates over the array and performs operations specified in the callback function.

const coding = ["js", "ruby", "java", "python", "cpp"];
const values = coding.forEach((item) => {
    console.log(item);
    return item; // it won't return even if we write this statement
});
console.log(values); // forEach does not return anything, therefore it will print undefined

//output:
js
ruby
java
python
cpp
undefined //because for-each does not return any value, it always return undefined

In this example, we use forEach to log each element of the coding array. Note that forEach doesn't return anything, so the values variable will be undefined.

filter Method

The filter method creates a new array with all elements that pass the test implemented by the provided function. This method is handy when you need to filter out elements based on certain criteria.

Example with filter

const myNums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const newNums = myNums.filter((num) => num > 4); // implicit return

//using explicit return
const newNums = myNums.filter((num) => {
    return num > 4; // explicit return
    num > 4; // this will only work in implicit return, if we try to write like this, then output will be []
});

// doing the same using forEach
 const newNums = [];
 myNums.forEach((num) => {
     if(num > 4){
         newNums.push(num);
     }
 });

console.log(newNums);

output:
[ 5, 6, 7, 8, 9, 10 ]

In this example, filter creates a new array containing numbers greater than 4. Both implicit and explicit return forms are shown.

Practical Use Case

Consider a list of books: (array of objects)

const books = [
    { title: "Book One", genre: "Fiction", publish: 1981, edition: 2004 },
    { title: "Book Two", genre: "Non-Fiction", publish: 1992, edition: 2008 },
    { title: "Book Three", genre: "History", publish: 1999, edition: 2007 },
    { title: "Book Four", genre: "Non-Fiction", publish: 1989, edition: 2010 },
    { title: "Book Five", genre: "Science", publish: 2009, edition: 2014 },
    { title: "Book Six", genre: "Fiction", publish: 1987, edition: 2010 },
    { title: "Book Seven", genre: "History", publish: 1986, edition: 1996 },
    { title: "Book Eight", genre: "Science", publish: 2011, edition: 2016 },
    { title: "Book Nine", genre: "Non-Fiction", publish: 1981, edition: 1989 },
];

// FINDING BOOKS WITH GENRE AS HISTORY
 let userBooks = books.filter((bk) => {
     bk.genre === "History";
 });

 userBooks = books.filter((bk) => bk.genre === "History"); // implicit return
 console.log(userBooks);

//outputs: 
[
  {
    title: 'Book Three',
    genre: 'History',
    publish: 1999,
    edition: 2007
  },
  {
    title: 'Book Seven',
    genre: 'History',
    publish: 1986,
    edition: 1996
  }
]

Let's consider another case:

// FINDING BOOKS WITH PUBLISH YEAR GREATER THAN OR EQUAL TO 1995
userBooks = books.filter((bk) => {
    return bk.publish >= 1995;
});

console.log(userBooks);

//outputs:
[
  {
    title: 'Book Three',
    genre: 'History',
    publish: 1999,
    edition: 2007
  },
  {
    title: 'Book Five',
    genre: 'Science',
    publish: 2009,
    edition: 2014
  },
  {
    title: 'Book Eight',
    genre: 'Science',
    publish: 2011,
    edition: 2016
  }
]

FINDING BOOKS WITH PUBLISH YEAR GREATER THAN OR EQUAL TO 2000

userBooks = books.filter((bk) => bk.publish >= 2000); // implicit return
userBooks = books.filter((bk) => { return bk.publish >= 2000 }); // explicit return
//both will provide the same output, difference is only about implicit and explicit return

console.log(userBooks);

//outputs: 
[
  {
    title: 'Book Five',
    genre: 'Science',
    publish: 2009,
    edition: 2014
  },
  {
    title: 'Book Eight',
    genre: 'Science',
    publish: 2011,
    edition: 2016
  }
]

So here is the last case of the blog:

/ NOW IF WE WANT TO PRINT BOOKS WHICH WERE PUBLISHED AFTER 1995 AND BELONG TO HISTORY GENRE
userBooks = books.filter((bk) => {
    return bk.publish >= 1995 && bk.genre === "History";
});

console.log(userBooks);

//outputs:
[
  {
    title: 'Book Three',
    genre: 'History',
    publish: 1999,
    edition: 2007
  }
]