Higher Order Function in JS

JavaScript
1

Here is a snippet I found online.

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

var coolifier = makeAdjectifier("cool");
coolifier("conference");

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???

2 
var coolifier = makeAdjectifier("cool");

translates to

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

coolifier is now a function returning a string , so calling

coolifier("conference");

gives you

"cool conference"
1 Like
3

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

4

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").

1 Like
5

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.

6

@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.

7

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;
};
1 Like
8

thanks ! i get it now.

9

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??

10

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.

2 Likes
11

Thanks for the reply!

12

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 {
    method1,
    method2
  };
}());

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).

2 Likes
13