JavaScript Array Methods Part 4- filter method

Hi awesome devs, I believe you are having great time learning. Continuing with JavaScript Array callback functions, we yet have another method called 'FILTER' that expects you to pass in a callback. According to 'Mozila Developer Network documentation, Filter method allows us to create a new array with all elements that pass the test (condition) implemented by the provided function. Well according to a JavaScript Instructor I love and respect, COLT STEEL he defines filter as a method which allows us to filter out subsets of an array by basically passing in a function which returns true or false (a test function) and if an element passes that function, it will be added into the returned result of the new array. Filter array method doesn't update or mutate the original array, it just creates a copy of a specific targeted information or elements. I hope the definition did't lost you in the wind?

FILTER METHOD SYNTAX

Using anynomous function statement

arr.filter(function (parameter) {
  //... conditions or test functions
   return parameter;
})

Using anynomous arrow function

arr.filter( parameter => {
  //... conditions or test functions
   return parameter
})

So who's up for some examples.

Example 1: Let's create an array of numbers, filter the array and create a new array of even numbers.

const randNums = [1, 2, 3, 4, 7, 9, 15, 13, 16, 21, 64, 12];

const evenNums = randNums.filter(num => {
    const nums = num % 2 === 0; // test condition
    /* if nums returns true, num is added to the filter array */
    return nums;
});
console.log(evenNums);

OUTPUT

Array(5) [ 2, 4, 16, 64, 12 ]

Example 2: Using the same array in example 1, lets return a new array of numbers greater than 11.

const randNums = [1, 2, 3, 4, 7, 9, 15, 13, 16, 21, 64, 12];

const greaterNums = randNums.filter(num => {
    const bigNums = num >= 11; // test condition
    /* if bigNums returns true, num is added to the filter array */
    return bigNums;
});

console.log(greaterNums);

OUTPUT

Array(6) [ 15, 13, 16, 21, 64, 12 ]

let's do some examples that might be considered complex or hard. Example 3: let's loop through the array below and filter books with rating > 4.15

const books = [{
       title: 'The standout developer',
       author: ['Randall Kanna'],
       rating: 4.11
    },
    {
       title: 'Hashnode Teams',
       author: ['Edidiong Asikpo', 'Bolaji Ayodeji'],
       rating: 4.36
    },
    {
       title: 'She inspires',
       author: ['Bolaji Ayodeji', 'Edidiong Asikpo', 'Ada Unduka'],
       rating: 4.15    
    },
    {
       title: 'javascript Grammer',
       author: ['javascript Teacher'],
       rating: 4.91
    }
];

const ratedBooks = books.filter(book => book.rating > 4.15 );
console.log(ratedBooks)

Yea just one line of code got the job done.

OUTPUT

(2) […]

0: {…}

author: Array [ "Edidiong Asikpo", "Bolaji Ayodeji" ]

rating: 4.36

title: "Hashnode Teams"

1: {…}

author: Array [ "javascript Teacher" ]

rating: 4.91

title: "javascript Grammer"

length: 2

We can also loop through the array of objects and get new arrays that includes 'Bolaji'.

const bookIncludes = books.filter(book => ( // implicit return
    book.author.includes('Bolaji Ayodeji')
));

console.log(bookIncludes)

OUTPUT

(2) […]

0: {…}

author: Array [ "Edidiong Asikpo", "Bolaji Ayodeji" ]

rating: 4.36

title: "Hashnode Teams"


1: {…}

author: Array(3) [ "Bolaji Ayodeji", "Edidiong Asikpo", "Ada Unduka" ]

rating: 4.15

title: "She inspires"

length: 2

I hope you find this article useful. Share with friends and learning community.

Alhassan Joshua Abel

Alhassan Joshua Abel

JavaScript Array Methods Part 4- filter method

FILTER METHOD SYNTAX