Why I am getting different output when accessing inner function in JavaScript?

Here is my code

function first() {
  
  console.log("first")
  
  return function second() { return console.log("second") }
}

let foo = first() // It is outputing "first" once

foo() // Output is "second"
first()() // Output is "first" "second"

What I do not understand is why foo() is giving a different output comparing to first()(). If foo = first(), then I think it should have the same output.

The second question (and less important) is: how can I avoid the output when assigning the variable let foo = first() ?

Solution

It's because you are not assigning first to foo when you do first(), you are calling first. When first is called, it logs "first" to the console and then it returns the function second. So foo gets assigned the return value of first which is the function second.

Assigning first to foo

You can assign the function first to foo via normal assignment without calling it:

let foo = first; // now foo === first

Assigning the returned function second to foo

let foo = first(); // note the use of (); now foo === second

Immediately calling the returned function

In the last line, you are doing two things in one line. The first first() (no pun intended) returns the second function (and thereby executes the console.log statement) which is immediately called via () (and executes the other console.log statement). That's why you see it logging "first"and "second".

let foo = first()(); // note the doubled use of (); now, foo === undefined

Whatever are we doing here?

Although it might seem a bit strange at first, the technique of passing and/or returning a function to/from another function is very useful - so much that it has a name: Higher Order Function (or - as I like to call it - HOF). One pretty common example of a HOF is Array.prototype.map. When you pass a function to .map, it projects the function onto every element in the array and collects the resulting value of each projection into a new array which it finally returns.

A concrete example of a HOF besides .map: Suppose you have to call .split on different input strings that come from different sources but you always want to split the strings on the same character. Create a makeSplitter HOF:

function makeSplitter(splitOn) {      // <-- HOF
  return function (inputString) {     // <-- return value of HOF
    return inputString.split(splitOn);
  }
}

With this, you can create a general function that splits an input string, say, by slash:

const splitSlashes = makeSplitter(/\//g);

You can think of splitSlashes as if it had been written like so:

const splitSlashes = function (inputString) {
  return inputString.split(/\//g);
}

And now you can use that to split various strings that contain slashes into separate parts:

 console.log(splitSlashes('08/12/2022')); // logs ['08', '12', '2022']
 console.log(splitSlashes('www.example.com/path/to/x/')); // logs ['www.example.com', 'path', 'to', 'x']

If you need another function that - for example - splits a string on ., just use makeSplitter with another argument:

const splitDots = makeSplitter(/\./g);