Javascript Map with Filter

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

Comments

[Shubham Tiwari]

Yeah it returned undefined after the output but when using in react i used the JSX inside it so it worked fine there

[Ferry Kranenburg]

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.

[Shubham Tiwari]

So filtering and mapping should be done separately not in a chaining ?

[Tracy Gilmore]

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.

[Shubham Tiwari]

Yes that's what I was thinking

[Rodrigo Mata]

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 it

[Shubham Tiwari]

I also used it in my project for searching the dataset and it works fine

[Jon Randy 🎖️]

Not entirely sure why you'd want to filter an array, then map all the filtered values to undefined 🤔

[Shubham Tiwari]

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

[Jon Randy 🎖️]

I think you misread my comment. I didn't say the filtered values were undefined, I said you are mapping the filtered values to undefined since your function inside map isn't returning anything. You seem to be using map incorrectly here - forEach would be the correct thing to use as @lukeshiru points out.

Also, if you are going to filter then map - you could also consider doing all of this inside one reduce - which would be more efficient.

[Shubham Tiwari]

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

[Jon Randy 🎖️]

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.

I'm not sure why you would want to use map without manipulating the values? The whole purpose of map is to 'map' one set of values to another set of values using a function.