Javascript : Higher Order function

Function As First Class Citizen:

In Javascript we can pass function as parameter or return function

as parameter that is why function are called first class citizen.

Higher Order Function:

Function which take another function as parameter or return function

as return value is called higher order function.

Consider following code snippet

Code:

function HowAreYou() {

console.log("How are you ?");

}

function WhatsUp() {

console.log("What's up buddy ?");

}

function greet(relation, HowAreYou, WhatsUp) {

if (relation === "friend") {

WhatsUp();

} else if (relation === "familiar") {

HowAreYou();

}

}

// prints 'What's up?'

greet('familiar', HowAreYou, WhatsUp);

Output:

How are you ?

Note:

Here function greet takes function as its parameter so it is higher

border functions.

Native Higher Order function:

map,reduce,sort & filter are functions related to array in javascript

These are a higher order functions as they take take other functions

as parameter.

map() Example:

Code:

let objArr = [

{ name: "sangram", city: "kankavali" },

{ name: "sagar", city: "kolhapur" },

{ name: "sachin", city: "ratnagiri" },

{ name: "sandesh", city: "pune" },

{ name: "swapnil", city: "numbai" },

];

let nameArr = objArr.map((elt) => {

return elt.name;

});

console.log(nameArr);

Output:

[ 'sangram', 'sagar', 'sachin', 'sandesh', 'swapnil' ]

Reduce Example:

Code:

let objArr = [

{ name: "sangram", city: "kankavali", mark: 57 },

{ name: "sagar", city: "kolhapur", mark: 67 },

{ name: "sachin", city: "ratnagiri", mark: 78 },

{ name: "sandesh", city: "pune", mark: 89 },

{ name: "swapnil", city: "numbai", mark: 94 },

];

let sum = objArr.reduce((sum, elt) => {

return (sum += elt.mark);

}, 0);

console.log(sum);

Output:

385

FILTER Example:

Code:

let objArr = [

{ name: "sangram", city: "kankavali", mark: 57 },

{ name: "sagar", city: "kolhapur", mark: 67 },

{ name: "sachin", city: "ratnagiri", mark: 78 },

{ name: "sandesh", city: "pune", mark: 89 },

{ name: "swapnil", city: "numbai", mark: 94 },

];

let sixtyorAbove = objArr.filter((elt) => {

return elt.mark > 60;

});

console.log(sixtyorAbove);

Output:

[

{ name: 'sagar', city: 'kolhapur', mark: 67 },

{ name: 'sachin', city: 'ratnagiri', mark: 78 },

{ name: 'sandesh', city: 'pune', mark: 89 },

{ name: 'swapnil', city: 'numbai', mark: 94 }

]

SORT Example:

Code:

let objArr = [

{ name: "sangram", city: "kankavali", mark: 57 },

{ name: "sagar", city: "kolhapur", mark: 67 },

{ name: "sachin", city: "ratnagiri", mark: 78 },

{ name: "sandesh", city: "pune", mark: 89 },

{ name: "swapnil", city: "numbai", mark: 94 },

];

let sortedArray = objArr.sort((a, b) => {

return a.mark > b.mark;

});

console.log(sortedArray);

Output:

[

{ name: 'sangram', city: 'kankavali', mark: 57 },

{ name: 'sagar', city: 'kolhapur', mark: 67 },

{ name: 'sachin', city: 'ratnagiri', mark: 78 },

{ name: 'sandesh', city: 'pune', mark: 89 },

{ name: 'swapnil', city: 'numbai', mark: 94 }

]

Function Returning another function:

Code:

function Apple(type) {

this.type = type;

this.color = "red";

this.getInfo = function () {

let msg = this.color + " " + this.type + " apple";

return function () {

console.log(msg);

};

};

}

let app = new Apple("himachal");

let getInfoFunc = app.getInfo();//getInfoFunc is a function

getInfoFunc()

Output:

red himachal apple

Explanation:

Here function getInfo return another anonymous function.

Note:

let app = new Apple("himachal");

This statement creates a new object instance of the Apple constructor

with the type property set to "himachal",color property ro "red"

and assigns it to the variable app.

On contratory

let app = Apple("himachal");

This statement calls the Apple constructor function but does not create a

new object instance because the new keyword is missing. As a result, app

will be undefined because the constructor function does not return anything

explicitly.

The new keyword is technically optional when calling a constructor function

in JavaScript. When you call a function using new, it creates a new object

and sets the function's prototype (i.e., this) to that object, which is the

typical behavior for a constructor function.

However, if you omit new when calling a constructor function, the function

still executes, but it behaves more like a regular function rather than a

constructor. It does not create a new object, and it does not implicitly

return this. Therefore, if your constructor function relies on this to set

properties or behaviors of the new object, omitting new will not work as

expected.