functions returned from other functions in javascript

Question

I am new learner of Javascript and I got stuck in "functions returned from other functions". The code is as below.

var createScream = function(logger) { return function(message) {
            logger(message.toUpperCase() + "!!!")
        }
}

const scream = createScream(message => console.log(message))

scream('functions can be returned from other functions')
scream('createScream returns a function')
scream('scream invokes that returned function')

Console output:

"FUNCTIONS CAN BE RETURNED FROM OTHER FUNCTIONS!!!" "CREATESCREAM RETURNS A FUNCTION!!!" "SCREAM INVOKES THAT RETURNED FUNCTION!!!"

Question: why it will work this way? what is the process of executing? Does function scream have any parameter? how does it work?

This may be very easy, I searched but no clear explanation. Can someone please give me a hint or explain the whole execution process in details?

Thanks in advance!

Check out this thread https://stackoverflow.com/questions/7629891/functions-that-return-a-function — Mirza Sisic, Jun 23 '18 at 02:47
Possible duplicate of [Functions that return a function](https://stackoverflow.com/questions/7629891/functions-that-return-a-function) — Mirza Sisic, Jun 23 '18 at 02:47

kyle · Answer 1 · 2018-06-23T02:49:37.337

In JavaScript and other functional languages, you will hear the term that functions are "first-class citizens" meaning that functions can be passed around as values or referenced by other functions.

It's normal for this to take a bit of time to grok, but try to walk through your code step by step and you'll get it:

The createScream function accepts a function as input (logger)
The createScream function then returns another function that accepts its own input (message)
The returned function uses the original input function (logger) as well as the second input (message)

And consider the execution order in usage as well:

scream invokes createScream with a console.log function
now when you invoke scream with a message, that message will first be changed as per the definition in createScream
then once the message is changed, it is invoked by the logger function console.log

score 0 · Accepted Answer · edited Jun 23 '18 at 14:14

First, Higher order functions are not about functional languages. Functions that operate on other functions i.e. taking a function as an argument and returning another function, are called higher order functions.

Your snippet:

You created an anonymous function with argument logger, which returns another anonymous function and bind that to variable createScream.
Then you called createScream with a function as an argument. storing the returned value in const scream. At this time you are returned a function with argument logger being the fat arrow function you passed.
Now you called scream with strings. Remember scream is also a function because in the earlier step the function call returned another function. That function has access to logger argument passed to the outer function. This is an example of closure.
When you call scream with strings. The returned function is called which is logging the message in uppercase plus !!!.

It will take sometime to get what is happening here, If you have limited programming experience. Read about higher order functions, lexical scope, closure.

functions returned from other functions in javascript

2 Answers2