map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi

map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi

map filter reduce in hindi | JavaScript Tutorial in Hindi | higher order function in hindi .

Map, filter & reduce Array functions are the most popular Higher-Order Functions in JavaScript In this article you will learn everything about map filter reduce sort and forEach Between Regular Functions and Arrow Functions basic + advanced javascript in hindi.

In this article I cover everything you need to know about the higher order function in Regular Functions and Arrow Functions .

Concepts Covered:
1. forEach
2. Filter
3. map
4. sort
5. reduce
now let's create two variable and used to both variable in HOF (higher order function)

const peopleData = [
{name:'Mobile', category:'Gadget', age:5, price:25000},
{name:'TV', category:'Appliances', age:10, price:35000},
{name:'Washing Machine', category:'Appliances', age:15, price:42000},
{name:'HeadFone', category:'Gadget', age:3, price:12000},
{name:'Microwaves', category:'Appliances', age:5, price:13500},
{name:'Mixer', category:'Appliances', age:10, price:9000}
]

const ageData = [12,7,11,23,18,22,17,9,22,32,45,28,6,4,13]

1.forEach (let's used to forEach method in peopleData variable)
used to first normal loop

for(let i =0; i< peopleData.length; i++){
console.log(i,'__', peopleData[i])
}

now in this code we do the normal loop with peopleData length and console log print to every item with index no.

now let's write to this in ES5 Regular function with forEach

peopleData.forEach(function(item, index){
return console.log(index, '_', item)
})

in this above code you can see to we pass to call back function in forEach HOF and log to object with index no.


now let's write to this in ES6 with fat arrow

peopleData.forEach((item, index)=>{
return console.log(index, '_', item)
})

now you can write to this in a single line code

peopleData.forEach(item=>{console.log(item)})

2. filter in javascript means you can filter something in array of collection.
now let's check the code and how to used filter method in javascript and if we have no filer then used to normal for loop .

const filterData = []
for(let i=0; i< peopleData.length; i++){
if(peopleData[i].category === 'Gadget'){
filterData.push(peopleData[i])
}
}
console.log(filterData);

in this above code we used to normal loop in javascript and filter to data base on category.

let's we used to filter method and check to result.

const filterData = peopleData.filter(function(item){
return item.category === 'Gadget'
})

console.log('filterData', filterData);

now here we can used to ES5 Regular function and result is coming same.
Now if we used to ES6 fat arrow function then let's check .

const filterDataArrowFun = peopleData.filter(item=>item.category === 'Gadget')

console.log('filterDataArrowFun', filterDataArrowFun)

now you can see to same result print in console and we used to here fat arrow function with in single line for filter method.

3. map method used to javascript map method you can manipulate the data base on the requirements.
like this if we required a node extra with dicountPrice in total price of 10% then we used to map method and we also used to normal loop.
let's check with normal loop / ES5 function and ES6 fat arrow function in below code

const updatedData = []
for(let i=0; i < peopleData.length; i++){
peopleData[i].discountPrice = peopleData[i].price / 100 *10;
updatedData.push(peopleData[i]);
}
console.log('updatedData', updatedData);

do with in ES5 Regular function.

const updatedData = peopleData.map(function(item){
item.dicountPrice = item.price / 100 * 10
return item
})

do with in ES6 fat arrow function.

const updatedData = peopleData.map((item)=>{
item.dicountPrice = item.price / 100 * 10
return item
})

console.log('updatedData es6 function ', updatedData)

now you can see above code we get same result of if we used normal loop / ES5 Regular function and ES6 fat arrow function.

4. sort method is used to sorting data base on two element .
now let's check the code of sort method .

const sortItem = peopleData.sort(function(a,b){
return b.age - a.age
})
console.log('sortItem', sortItem)
const sortItem_2 = peopleData.sort((a,b)=> a.price - b.price)
console.log('sortItem_2', sortItem_2)

we used to first Descending order the data in base on age we apply to age sorting in ES5 Regular function.
and in second method we used to ES6 function and sorting the data base on price in Ascending order in single line code.


5. Reduce method now check this method in javascript . now check first we used to normal loop in javascript.

let ageDataTotal =0
for(let i= 0; i < ageData.length; i++){
ageDataTotal = ageDataTotal + ageData[i]
}
console.log('ageDataTotal', ageDataTotal); // ageDataTotal 269


now check with Reduce method in ES6 fat arrow function and get the total sum of age in the below code.



const ageTotalSum = ageData.reduce((totalSumofAge, current)=>totalSumofAge + current, 0)

console.log('ageTotalSum', ageTotalSum); // ageTotalSum 269

now check with Reduce method in ES6 fat arrow function and get the total sum of productData price in the below code.

const prodctTotalValue = peopleData.reduce((totalSum, current)=>totalSum + current.price, 0)

console.log('prodctTotalValue', prodctTotalValue) // productTotalValue 136500

if you get more internist thing learn in javascript then go to my youtube channel and check to some more interesting video:- https://www.youtube.com/c/AzadMalikRohit