Higher Order Function in JS

Higher Order Function in JS


Here is a snippet I found online.

function makeAdjectifier(adjective){
	return function (string){
		return adjective + " " + string;

var coolifier = makeAdjectifier("cool");

I understand that this is a higher order function where you can return functions inside functions.

I understand makeAdjectifier("cool") is basically executing the makeAdjectifier function and subbed in an argument “cool”, so that now it will return: "cool ".
But the last line: coolifier("conference") got me confused.
How do you understand syntax like this?
“cool” is talking to makeAdjectifier, but how does “conference” knows who to talk to???

var coolifier = makeAdjectifier("cool");

translates to

var coolifier = function (string){
		return "cool" + " " + string;

coolifier is now a function returning a string , so calling


gives you

"cool conference"


I thought we have already assigned var coolifier a function: makeAdjectifier
How come we can assign another function to it?


makeAdjectifier("cool") calls the makeAdjectifier function itself and assigns the result to the variable coolifier. The result of the function call is itself a function (an anonymous inline function, anonymous as it has no name),

function (string){
		return "cool" + " " + string;

and that function is assigned to coolifier and can be called as coolifier("conference").


makeAdjectifier returns another function which gets assigned to coolifier. Like @parramorej stated, once this assignment is made, it is as if you created a function named coolifier that looks like:

function coolifier(string){
  return "cool" + " " + string;

So when you call coolifier, you are just calling the above function and passing “conference” as the string argument.


@RandellDawson @parramorej

can I understand it in this way:

there are obviously two functions in total, one is a outer one, the other one is the inner one.
makeAdjectifier(“cool”); is to submit argument into the outer function.
coolifier(“conference”) is to submit argument into the inner function.

and even though coolifier has a var in front of it, it itself is a function as well.


There is a var in front of coolifier, because it is a variable which references a function.

The following are two ways to create a function named coolifier.

function coolifier(string){
  return "cool" + " " + string;

var coolifier = function (string){
  return "cool" + " " + string;


thanks ! i get it now.


so when we write javascript, when should we use var something = function something()? when should we use function something(){} ?

is there a general rule on this??


On Stack Overflow,

var functionName = function() {} vs function functionName() {}

has a good write-up of the difference. The accepted answer has several links that should be of some assistance as well.


Thanks for the reply!


One time you would use a function expression instead of a function declaration is when creating a module, where you would need to use an IIFE (Immediate Invoked Function Expression).

For example, the following IIFE allows you to create a module which can be used throughout your program.

var myModule = (function () {
  function method1() {
    console.log('Method #1');

  function method2() {
    console.log('Method #2');

  return {

myModule.method1(); // displays 'Method #1'
myModule.method2(); // displays 'Method #2'

Another time you would use a function expression is when you need to bind a different this context to a function (like in an event handler’s in a React component).