Filter Method In Javascript for Beginners.

Hey There Awesome Developers !!!

In this blogpost we will learn about a higher order function in javascript called - filter method.

Lets first understand, what it does and how it is helpful. 

Then we will see two basic examples.

What is Javascript filter method?

JavaScript's filter() method is a powerful tool that allows you to create a new array containing elements from an existing array that meet specific criteria or a certain condition.

It's commonly used for filtering data based on conditions, making it a valuable asset in various programming tasks. let's see a basic example  :


function getNumbersLargerThanFive(numbers) {
let newNumbers = numbers.filter(function (number) {
return number > 5;
});

return newNumbers;
}

console.log(
getNumbersLargerThanFive([88, 2, 4, 5, 8, 99, 66, 56, 21, 39, 213])
);

Lets understand this example. Here we have an array numbers that has several numbers in it. we want to filter out numbers that are larger than 5 so first, we iterated over the entire array by chaining filter method on the array i.e numbers. Now this filter method takes a callback function whose job is to scan elements one by one and see if that number is larger than 5? first it checks the number 88, is it larger than 5? Yes it is so it returns that number and that number is stored in newNumbers array. Now it checks for number 2, is it larger than 5 ? NO , not at all, so it skips that,

Next is 4, larger than 5? NO, skips it,

5? larger than 5? NO, skips it 8? larger than 5? YES, return it and store it in newNumbers array,

99? larger than 5? YES, return it and store it in newNumbers array,

it scans the entire array like this, and gives us a new array with the filtered numbers according to the condition provided. In this case the condition is number > 5.


Now let's see an intermediate example, where we will be dealing with an array of objects.


let students = [
{
id: "01",
name: "amit",
city: "delhi",
},
{
id: "02",
name: "nitin",
city: "newyork",
},
{
id: "03",
name: "John",
city: "tokyo",
},
{
id: "04",
name: "Vipin",
city: "delhi",
},
{
id: "05",
name: "Dinesh",
city: "chennai",
},
];
function getNumbersLargerThanFive(students) {
let newStudents = students.filter(function (student) {
return student.city === "delhi";
});

return newStudents;
}

console.log(getNumbersLargerThanFive(students));


Now let's break this code. students is an array of objects, that can several objects, with id, name and city properties. we want to filter only those students who are from delhi. In this case filter method is very helpful. Here we are looping over the input array i.e students and passing a callback function that will scan each object and try to match the condition for each object. In each object it will check that if the city key has value "delhi", if it has then it will put that into the new array.

Hence, returning us a new array with only two objects. Because there are only two users that belong to delhi.


So , i hope you understood the how filter method works in javascript.








Comments

Post a Comment

Popular posts from this blog

How to make a todo app in react native with CRUD

Hey There awesome developers.  source code is attached at the end of this article  1. Initializing Local States In the TodoScreen.js file, you'll notice that we initialize local states using the useState hook. These states include todo, todoList, and editedTodo. This allows us to manage and update the app's data dynamically.  2. Adding a Todo Item The handleAddTodo function is responsible for adding a new todo item to the list. It checks if the input is empty and, if not, adds a new todo with a unique ID generated using Date.now().toString().  3. Deleting a Todo Item To remove a todo item , we use the handleDeleteTodo function. It filters out the todo with the specified ID from the list, effectively deleting it.  4. Editing a Todo Item The handleEditTodo function enables editing of a todo item. It sets the editedTodo state and populates the input field with the selected todo item's title.  5. Updating a Todo Item When you're done editing, the handleUpda...
Read more