filter() with map() in Javascript

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.

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