JavaScript treats functions as First class citizens.

When functions are treated as first-class citizens, these are some operations that can be performed on them.

1. Assign them to a variable.

2. Store them in arrays.

3. Set them as object properties.

4. It can be passed as an argument to another function.

higher-order functions are only possible because functions are considered first-class citizens in JS.

Higher-order functions are functions that make use of functions as either their argument or their return value.

These are the inbuilt higher-order functions in JS as follows:

• map()= loops and returns an array

• filter()= loops and returns an array with the matching conditions

• reduce()= loops and gives you back an accumulator.

Let's see these in detail.

1) map()

For example, we have an array of numbers, and we want to create a new array that will contain every element in the first array multiplied by ten. Let’s solve the problem with and without a higher-order function.

Using a Normal Function

Here’s how we can solve the problem using a normal function.

const num = [10, 20, 30];
const num10 = [];
for(let i = 0; i < num.length; i++) {
  num10.push(num[i] * 10);
}
// prints [ 100, 200, 300 ]
console.log(num10);

With a higher-order function, the code is shorter; here’s the code below.

const num = [10, 20, 30];
const num10 = num.map(i => i * 10);
console.log(num10);
//same output as above

you can see that we can achieve the same output with less code.

2) filter()

let’s say we have an array containing objects with students offering a course and the status if they attended the class or not, and we need to filter the array to get all students that attended.

Here’s how we can solve the problem using a normal function.

const students = [
  { name: 'John James', status: true},
  { name: 'Micheal Obi', status: false },
  { name: 'Bola Ade', status: true },
  { name: 'Emmanuel', status: false },
  { name: 'Faithfulness Alamu',status: true },
];
const presentStudent= [];
for(let i = 0; i < student.length; i++) {
  if(students[i].status >= true) {
    presentStudent.push(students[i].name);
  }
}
console.log(presentStudent);
//Output = [ 'John James', 'Bola Ade', 'Faithfulness Alamu' ]

Here’s the same problem solved using a higher-order function.

const students = [
  { name: 'John James', status: true},
  { name: 'Micheal Obi', status: false },
  { name: 'Bola Ade', status: true },
  { name: 'Emmanuel', status: false },
  { name: 'Faithfulness Alamu', status: true },
];
const presentStudent =students.filter(student => student.status == true);
console.log(presentStudent);

3) reduce()

Reduce() is usually used when you have to sum up things.

Here’s an example, when we want to add up all the elements in an array.

By using normal function.

const numbers = [10, 29, 11, 43, 37];
let subtract = 0;
for(let i = 0; i < arr.length; i++) {
  subtract = subtract + numbers[i];
}
console.log(subtract); // Output=110

By using reduce().

const numbers = [10, 29, 11, 43, 37];
const subtract = numbers.reduce(function(acc, value) {
  return acc + value;
});
console.log(subtract); // Output=  110

These are some of the Higher Order functions in js. For a more detailed explanation do refer to https://www.youtube.com/watch?v=lI1ae4REbFM&t=7645s

Feel free to add comments, give your valuable feedback, and don't forget to connect on Twitter.