DEV Community

Prerna Sharma
Prerna Sharma

Posted on

JavaScript Higher Order Methods

METHODS :-

  1. forEach()
  2. filter()
  3. sort()
  4. map()
  5. reduce()

Consider an example:-

const product = [
  {id: 1,category: "IPhone",name: "Iphone11Pro", start:2007, price:100000},
  {id: 2,category: "MI",name: "Note8", start:2008, price:90000},
  {id: 3,category: "Samsung",name: "GalaxyS45", start:2009, price:80000},
  {id: 4,category: "OnePlus",name: "Nokia24", start:2010, price:50000},
  {id: 5,category: "Nokia",name: "Iphone11Pro", start:2011, price:60000},
  {id: 6,category: "Iphone",name: "Iphone14pro", start:2012, price:120000}
]
Enter fullscreen mode Exit fullscreen mode

1. FOREACH

Foreach loop (or for each loop) is a control flow statement for traversing items in a collection.


//for loop
for(let i=0;i<product.length;i++){
   console.log("[Product]", product[i]);
}

//forEach loop
product.forEach((input) => {
   console.log("[Product]",input);
})
Enter fullscreen mode Exit fullscreen mode

Output:-

[Product] {id: 1, category: 'IPhone', name: 'Iphone11Pro', start: 2007, price: 100000}
VM70:2 [Product] {id: 2, category: 'MI', name: 'Note8', start: 2008, price: 90000}
VM70:2 [Product] {id: 3, category: 'Samsung', name: 'GalaxyS45', start: 2009, price: 80000}
VM70:2 [Product] {id: 4, category: 'OnePlus', name: 'Nokia24', start: 2010, price: 50000}
VM70:2 [Product] {id: 5, category: 'Nokia', name: 'Iphone11Pro', start: 2011, price: 60000}
VM70:2 [Product] {id: 6, category: 'Iphone', name: 'Iphone14pro', start: 2012, price: 120000}

2. FILTER

The filter() method creates a new array with all the elements that pass the test implemented by the callback() function.

//for loop
let filter_product = [];
for(let i=0;i<product.length;i++){
  if(product[i].category === 'MI'){
     filter_product.push(product[i]);
  }
}
console.log(filter_product);

//filter
let filter_product = product.filter(
  input => input.category === 'MI'
);
console.log(filter_product);
Enter fullscreen mode Exit fullscreen mode

Output:-

0:{id: 2, category: 'MI', name: 'Note8', start: 2008, price: 90000}
length:1
[[Prototype]]: Array(0)

3. MAP

The map() method creates a new array with the results of calling a function for every array elements.
The map() method calls the provided function once for each element in an array.

//map
//Create array of product name
const product_name = product.map((input) => input.name);
console.log(product_name);

Enter fullscreen mode Exit fullscreen mode

Output:-

(6) ['Iphone11Pro', 'Note8', 'GalaxyS45', 'Nokia24', 'Iphone11Pro', 'Iphone14pro']

4.SORT

The sort() method is used to sorts the items of an array. It takes two arguments to compare and sort it accordingly.

//sort
const sort_product = product.sort((input1,input2) => (
  input1.price > input2.price ? 1 : -1)
);
console.log(sortProduct);
Enter fullscreen mode Exit fullscreen mode

Output:-

0: {id: 4, category: 'OnePlus', name: 'Nokia24', start: 2010, price: 50000}
1:{id: 5, category: 'Nokia', name: 'Iphone11Pro', start: 2011, price: 60000}
2:{id: 3, category: 'Samsung', name: 'GalaxyS45', start: 2009, price: 80000}
3:{id: 2, category: 'MI', name: 'Note8', start: 2008, price: 90000}
4:{id: 1, category: 'IPhone', name: 'Iphone11Pro', start: 2007, price: 100000}
5:{id: 6, category: 'Iphone', name: 'Iphone14pro', start: 2012, price: 120000}
length: 6
[[Prototype]]: Array(0)

5. REDUCE

The reduce() method iterates through an array and returns a single value.

const product_ids = [1, 2, 3, 4];
const reduce_product_ids = product_ids.reduce((previous, current) => {  
  return previous + current;
});
console.log(reduce_product_ids);

Enter fullscreen mode Exit fullscreen mode

Output:-

10

Follow for more.

Done

Top comments (0)