Hello Guys today i want to show you how to use map method with filter in javascript.
Lets get started...
- filter() - This method is used to filter the array based on a given condition.It return only those elements which matches the condition.
- map() - This method is used to map the values of array with or without manipulating the values in some way like multiplying all the values with some number and then map it.
How to use map() and filter() together?
Code -
const webDev = [
{
name:"HTML",
category:"Frontend"
},
{
name:"CSS",
category:"Frontend"
},
{
name:"JAVASCRIPT",
category:"Frontend"
},
{
name:"REACT JS",
category:"Frontend"
},
{
name:"NODE JS",
category:"Backend"
},
{
name:"MONGO DB",
category:"Backend"
},
{
name:"EXPRESS JS",
category:"Backend"
},
{
name:"MERN",
category:"FullStack"
},
{
name:"MEVN",
category:"FullStack"
},
{
name:"MEAN",
category:"FullStack"
},
]
const filteredMap = (arr) => {
arr.filter(
item => item.category === "Frontend"
).map(item => {
console.log(`Name: ${item.name}, Category: ${item.category}`)
})
}
filteredMap(webDev)
- First we have created an array of objects named "webDev". This array contains objects each with two fields "name" and "category"
- After that we have created an arrow function named "filteredMap" and it has one parameter "arr" which is the array we will perform our filter and map method together.
- Inside the function, we have used arr.filter() and filtered the array based on category and then attached a map() method with it like chaining. The map() method will map the filtered items only.
Output
Name: HTML, Category: Frontend
Name: CSS, Category: Frontend
Name: JAVASCRIPT, Category: Frontend
Name: REACT JS, Category: Frontend
- As you can see only those items are printed which have the category "Frontend"
*If we change the filter condition to "Backend", then the output will be
Name: NODE JS, Category: Backend
Name: MONGO DB, Category: Backend
Name: EXPRESS JS, Category: Backend
- As you can see now only those items are printed which have the category "Backend"
*If we change the filter condition to "Fullstack", then the output will be
Name: MERN, Category: FullStack
Name: MEVN, Category: FullStack
Name: MEAN, Category: FullStack
As you can see now only those items are printed which have the category "FullStack"
So, that's how you can use the filter() method with map() in javascript.it's Pretty cool and usefull isn't it?
Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
https://dev.to/shubhamtiwari909/higher-order-function-in-javascript-1i5h
https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk
https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
Top comments (12)
Yeah it returned undefined after the output but when using in react i used the JSX inside it so it worked fine there
Please add a warning for newbies to first filter the data and then map it. Mapping data that will be filtered out next is considered bad practice. It results in faster computation.
So filtering and mapping should be done separately not in a chaining ?
That is not what I think Ferry is referring to here. Just the Filter then Map is better than Map then Filter.
Map then Filter is a 2N process. Filter the Map is only a 2N operation in the worse case, otherwise it would be an N+(N-filtered items).
If for some reason you have to Map then Filter it might be better to consider using a Reduce operation to combine the predicate and mapping functions into the reducer function.
Yes that's what I was thinking
Also if you map and then filter, you can get rid of null values with something like
arr.filter(x => x), it may depend on the code but still is 2N so you shouldn't worry about itI also used it in my project for searching the dataset and it works fine
Not entirely sure why you'd want to filter an array, then map all the filtered values to
undefined🤔The filtered values are not undefined they are the values we get after filtering the array with a given condition
It can be used to create a search bar without button event
I used it in my project for filtering the data for the user's using an input HTML tag
I think you misread my comment. I didn't say the filtered values were
undefined, I said you are mapping the filtered values toundefinedsince your function insidemapisn't returning anything. You seem to be usingmapincorrectly here -forEachwould be the correct thing to use as @lukeshiru points out.Also, if you are going to
filterthenmap- you could also consider doing all of this inside onereduce- which would be more efficient.I console logged just to see the output but i have used it in react and used the JSX inside the map function which filters the data and then show the remaining data on the screen,It worked fine in react and map() is popular in React for mapping the value to our HTML template without writing the same html again and again for all the values
I'm not sure why you would want to use
mapwithout manipulating the values? The whole purpose ofmapis to 'map' one set of values to another set of values using a function.