Calling a nested anonymous function (javascript)

Question

I"m new to Javascript and programming in general and came upon this block of code from a book called Javascript Enlightenment (p.88):

var parentFunction = function() {
    var foo = 'foo';
    return function() { // anonymous function being returned
        console.log(foo); // logs 'foo'
    }
}
// nestedFunction refers to the nested function returned from parentFunction

var nestedFunction = parentFunction();

nestedFunction(); /* logs foo because the returned function accesses foo
via the scope chain */

Why does setting var nestedFunction = parentFunction(); enable nestedFunction(); to invoke the nested anonymous function and log "foo" to the console whereas using just parentFunction(); logs nothing at all?

And why foo can be accessed even though it should be out of scope is because JS uses somehing called closures: developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures — HMR
– HMR, Commented Jun 28, 2013 at 0:19

Paul S. · Accepted Answer · 2013-06-28 00:06:16Z

5

Invoking parentFunction returns the anonymous function without calling it.

nestedFunction gets set as the return of parentFunction, the anonymous function.

Invoking nestedFunction hence invokes the anonymous function.

The anonymous function uses console.log so you see "foo".

answered Jun 28, 2013 at 0:06

Paul S.

66.6k9 gold badges129 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Halcyon · Accepted Answer · 2013-06-28 00:10:51Z

3

Basically you're doing:

parentFunction()(); // double parenthesis

Parenthesis mean that you execute the function, which will return a value. If that value is a function you can then execute it.

If you call it only once, well, you just get the function so nothing gets console.logged

edited Jun 28, 2013 at 0:10

answered Jun 28, 2013 at 0:05

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

1 Comment

edubba Over a year ago

Aha! This makes sense. Thank you for your clear and concise explanation and thanks also to everyone else who answered.

Mulan · Accepted Answer · 2013-06-29 03:00:53Z

1

An alternative to your code is this

var parentFunction = function() {
  var foo = "foo";
  return console.log.bind(console);
}

parentFunction()();
// => "foo"

Inevitably, you'll want to do something with scope at some point, so you'd do it like this

var parentFunction = function() {
  this.foo = "foo";
  this.something = function(){
    console.log(this.foo);
  }
  return this.something.bind(this);
}

parentFunction()();
// => "foo"

edited Jun 29, 2013 at 3:00

answered Jun 28, 2013 at 0:28

Mulan

136k35 gold badges240 silver badges276 bronze badges

Comments

ranjani · Accepted Answer · 2014-08-19 12:33:27Z

function add (x) {
    return function (y) {
        return x + y;
    };
}
var add5 = add(5);
 add5(3);

Explained:

When the add function is called, it returns a function. That function closes the context and remembers what the parameter x was at exactly that time (i.e. 5 in the code above) When the result of calling the add function is assigned to the variable add5, it will always know what x was when it was initially created. The add5 variable above refers to a function which will always add the value 5 to what is being sent in. That means when add5 is called with a value of 3, it will add 5 together with 3, and return

Please refer this link...

http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/

user20416 · Accepted Answer · 2013-06-28 00:06:22Z

0

Because parentFunction is returning the nested function, which needs to be invoked in order to run.

var a = nestedFunction;

doesn't log anything, because it hasn't been executed, until you do this:

a();

answered Jun 28, 2013 at 0:06

user20416

15.5k9 gold badges76 silver badges149 bronze badges

Comments

c-smile · Accepted Answer · 2013-06-28 00:21:28Z

0

Rewrite that code as this:

var nestedFunction = null;

var parentFunction = function() {
    var foo = 'foo';
    nestedFunction = function() { // anonymous function being returned
        console.log(foo); // logs 'foo'
    }
}

parentFunction(); 
// outputs nothing
// but initializes nestedFunction by its local function

nestedFunction(); /* logs foo because that local function has access to local 'foo' of
the parent function */

As you see parent function outputs nothing but initializes nestedFunction variable by function reference. And that function reference can be called as any other function.

answered Jun 28, 2013 at 0:21

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Collectives™ on Stack Overflow

Calling a nested anonymous function (javascript)

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related