Recursive closure in JavaScript

Question

function buildList( list ) {
  var i      = 0;
  var first  = function () {
    console.log( "in" )
    console.log( i );
  }
  var Second = function () {
    console.log( "out" )
    first();
  }
  return Second;
}

var a = buildList( [1, 2, 3] )
console.dir( a );

a(); // Here closure is created which has function first ,Here first also has one closure of itself that means recursive closure

When i see my console in Chrome it has a closure which has function first which also has a closure of itself ie it has repetitive loop of its own function in closure, Does anyone knows whats happening here, I am very much confused, Why there is infinte closure loop

Is it really that hard to format and indent your code correctly? Anyway, please post a screenshot of the devtools display which is confusing you. — , Dec 23 '16 at 08:02
you just have references in both directions, there is no loop. :) — Davin Tryon, Dec 23 '16 at 09:28

score 2 · Accepted Answer · answered Dec 23 '16 at 09:25

2

A closureis a special kind of object that combines two things: a function, and the environment in which that function was created.

No need to be confused, the behavior is same as expected to this code. Here what happening is that when you do console.dir( a ); in your code it returns the Second function, i think it is clear for you.
Now when you will expand this function it will show you in Closure the parent function (environment function) of Second, which is buildList. In you code it is doing the same thing.
Now next thing is to expand this function buildList, what it will show you is the child objects of it, Which are var i = 0; and the function first. Your console is showing as expected.
Now again when you open first() it will show you in Closure the parent function(environment function) of first, which is buildList. (same it did in step 2).

Now it repeats the step 3 again and then step 4. and so onnn... May be you understand what is happening here.

answered Dec 23 '16 at 09:25

Manoj Lodhi

978
4
10

But i am not seeing any buildlist function in my closure?? – Parshuram Kalvikatte Dec 23 '16 at 09:35
@Parshuram, Are you executing same code you posted in question? – Manoj Lodhi Dec 23 '16 at 09:40
Ya sir but just it was list variable,,instead of i that does not make any difference see my screenshot now – Parshuram Kalvikatte Dec 23 '16 at 09:45
But still i am not seeing my parent function in closure – Parshuram Kalvikatte Dec 23 '16 at 09:48
Then it is showing right data. If you declare a local variable no matter it is 'i' or 'list', it will show you all variables and functions enclosed in environment except the function you returned. – Manoj Lodhi Dec 23 '16 at 09:49
Parshuram, can you tell me your exact requirement from these functions, may me i can help you more. :) – Manoj Lodhi Dec 23 '16 at 09:50
i am very much confused about this closure why this closure has its own closure reference, doesnt that increase javascript complexity – Parshuram Kalvikatte Dec 23 '16 at 09:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/131334/discussion-between-manoj-lodhi-and-parshuram). – Manoj Lodhi Dec 23 '16 at 10:01
1

@BenAston for you, i think you need to take a look here. https://developer.mozilla.org/en/docs/Web/JavaScript/Closures – Manoj Lodhi Dec 23 '16 at 15:49
@BenAston One more thing for you, http://stackoverflow.com/questions/19165021/everything-is-an-object – Manoj Lodhi Dec 23 '16 at 15:56
Please show me where any documentation says that closures are objects. – Ben Aston Dec 23 '16 at 16:08
@BenAston I already gave you the link, i think u still didn't real this, go through this once please. https://developer.mozilla.org/en/docs/Web/JavaScript/Closures – Manoj Lodhi Dec 23 '16 at 17:59
A closure is a mechanism that makes free variables available to inner functions. Does that make a closure an object - not IMO. Conceptually a closure is more abstract than an object. In the JS implementation the key components of a closure are a function, a ref to an outer lexical environment, the mechanism to configure that ref, a mechanism to navigate that ref and an implementation of a "lexical environment". So reified it is more than an object. Colloquially the important bit is the reference to the outer lexical environment. In no sense is a closure just a special object. – Ben Aston Dec 23 '16 at 22:14
@BenAston A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created. In this case, a() is a closure that incorporates both the first(), second() functions and the variable 'i' that existed when the closure was created. If you are not accepting mozilla documentation (https://developer.mozilla.org/en/docs/Web/JavaScript/Closures) then i think you don't want to accept. Best of luck :) – Manoj Lodhi Dec 24 '16 at 04:50
@Manoj i creates a closure having first and i in it ,, not second because second itself creates a closure,,, ya and closures are special object – Parshuram Kalvikatte Dec 24 '16 at 10:49

score 0 · Answer 2 · answered Dec 23 '16 at 09:10

The developer tools displays the variable a which is a variable that points to a anonymous function/closure.

In javascript a function is defined in a scope and also it can define a scope by its body block. A scope "knows" all variables inside the defining block and all variables that are defined outside of the function but in the hierachy of scopes the scope is defined in.

The tools show you the scope of the returned function (a in this case). The function first is defined in the scope of the function a.

The variable first is also known in the scope of the anonymous function you assigned to the variable first.

And that what what you get on your screen: first is a variable containing a function. In the scope of this function a variable first is known that points to a function. In the scope of this function ...

You see?

If you say first has also its own scope,,then why second is not having its own scope,,,??? it only has first and list scope?? — Parshuram Kalvikatte, Dec 23 '16 at 09:25
Yes, it seams that the chrome-debugger only shows variables in a scope, which are used in this scope. See the code-text in the 3rd line of your screenshot output. — Peter Paul Kiefer, Dec 23 '16 at 10:42

Recursive closure in JavaScript

2 Answers2