Advanced JavaScript: A Deep Dive into the Core Concepts

JavaScript: Array Filter() Method

Board Infinity
Board Infinity
JavaScript: Array Filter() Method

    Javascript vs Typescript: What is the Difference?

    Understanding Array Slice() in JavaScript

    JavaScript: Array Filter() Method

    JavaScript array map() method

    Encoding and Decoding URL in JavaScript: How?

    JavaScript Fetch API Explanation

    A quick guide to Debounce in JavaScript

    Promise in JavaScript

    What is Promise.all in JavaScript?

    Javascript Async and Await Function

    A quick guide to async/await in Javascript

    10 Best JavaScript Frameworks to Use in 2023

    Trends and Tools of JavaScript in 2022

    JavaScript Interview Questions and Answers (2023)

Introduction

The arr.filter() method is used to create a new array from a given array consisting of only those elements from the given array which satisfy a condition set by the argument method. If no condition is specified, it applies no filtering and simply returns an array with all elements from the passed input array. The array filter() method is a  powerful and flexible way to slice and dice your data. It's useful for finding specific values in an array based on the criteria you specify. The  JavaScript array filter() method lets you filter an array of values based on a condition.

Points to Remember

The Array.filter() method returns a new array that contains all of the elements in the original array for which the specified condition is true,  discarding any elements for which the specified condition isn't true.

The filter() method creates a new array filled with elements that pass a test provided by a function.

Array filter() takes five parameters:

Index :(Optional) The index of the current value element in the array starting from 0.

Arr : (Optional) it holds the complete array on which Array. every is called.

Element: The parameter holds the value of the elements being processed currently.

thisValue : (Optional) Default undefined A value passed to the function as its this value.

Callback: This parameter holds the function to be called for each element of the array.

The callback function is called with element, index, arr, thisValue arguments: the value you want to return if the condition is true, or undefined if it isn't. The array argument contains your original array of values.

The syntax for using filter() looks like this:

[ obj1, obj2, ..., objN
].filter(callback(element, index, arr),  thisValue);

where obj1, obj2, ..., objN are your original values.

OR

array.filter(callback(element, index,  arr), thisValue);

Examples:

Example 1:

const BIStudents = ["Raj", "Aniket", "Rahul",  "Sarthik", "Shilpa", "Rashi", "Anurag", "Pranay"];
function searchFor(arr, query) {
function condition(element) {
return
element.toLowerCase().indexOf(query.toLowerCase())  !== -1;
}
return arr.filter(condition);
}
let newArr = searchFor(BIStudents, "ra"); console.log(newArr); // [ 'Raj', 'Rahul', 'Rashi' ] 

Output:

[ 'Raj', 'Rahul', 'Rashi' ] 

First element and query both are converted to lowercase and the indexOf() method is used to check if query is present inside element. Those elements that do not pass this condition are filtered out.

Example 2:

const values = [100, 200, null, 300, 500,  "Hundred", 50, 1000]
function checkvalues(element) {
return element > 200 && !Number.isNaN(element); }
let filteredvalues = values.filter(checkvalues); console.log(filteredvalues); // [ 300, 500, 1000 ]

Output:

[ 300, 500, 1000 ] 

write your code here: Coding Playground

The numbers less than 200, and all the non numeric values are filtered out.

Conclusion:

This method simply takes a function as an argument, runs it over each element of the array you wish to filter, and returns the resulting subset. The arr.filter() method creates a new array from scratch based on the filters you provide. The filter() method of an array is a way to remove items from the array based on a condition.