Javascript "saves" function data in memory?

Question

var myFunctArray=new Array();

for(var i=0; i<10; i++) {
    addValues(i);
}

function addValues(myPoint)
{
    myFunct=function () {
        var myVar="Line " + myPoint;
        console.log(myVar);
    }    

    myFunctArray.push(myFunct);        
}

myFunctArray[3]();

when I call the 4° function, how can it remembers the value of myPoint? In fact it is Line 3 the output, so myPoint value must be "stored" somewhere, for each function.

So, it stores 10 "definitions" of myFunct in the stack memory?

Hope it is clear what I mean.

ThiefMaster · Accepted Answer · 2012-10-29 12:01:05Z

4

It's called a closure. Any variables that are currently in scope when you create a new function are associated with that closure.

answered Oct 29, 2012 at 12:01

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

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

Comments

Thilo · Accepted Answer · 2012-10-29 12:01:05Z

1

So, it stores 10 "definitions" of myFunct in the stack memory?

Yes, it does.

Your array contains ten closures, each of which has captured its own version of myPoint.

answered Oct 29, 2012 at 12:01

Thilo

264k107 gold badges527 silver badges674 bronze badges

2 Comments

ThiefMaster Over a year ago

A good JS engine probably just stores the function once; there is little point in storing the function code multiple times - just the scope needs to differ each time.

Thilo Over a year ago

One would hope so. I did not intend to imply otherwise.

Elias Van Ootegem · Accepted Answer · 2012-10-29 12:30:22Z

Thiefmaster answered your question pretty much. Yes, this code will use more and more memory, depending on how many closures your array contains. It has to be said that most modern engines will assign a reference to the function assigned to the MyFunct variable and a specific "call object" that contains the closure vars. In other words, your array will look something along the lines of:

myFuncArray[0] = {call:
                     {myPoint:'Whatever value was passed to the addValues function the first time'},
                  valueOf: myFunct};
//the actual value is a reference to myFunct
//JS provides an implicit link to the call property, which is bound to this particular reference
myFuncArray[1] = {call:
                     {myPoint:'The value passed to addValues the second time'},
                 valueOf: myFunct};

You don't have access to the object as such, but this is just the way to think of how JS will keep things organized in memory.
Slightly off topic, but you're creating an implied global with your MyFunct variable:

function addValues(myPoint)
{
    var anotherClosureVar = 'This will be accessible, too: it\'s part of the closure';
    var myFunct = function()
    {//use var to declare in addValues scope, instead of using an implied global
        var myVar="Line " + myPoint;
        console.log(myVar);
        console.log(anotherClosureVar);//will work, too
    };
    myFunctArray.push(myFunct);
}

All in all, if this is your code, memory shouldn't be that big of an issue. Even if this code were to run on an old JScript engine, it'll take some time before you've used up a meaningful amount of memory.
Still, it's a good habit to think about stuff like this, and I do hope I made sense here, I'm not a native speaker, which makes explaining the more abstract aspects of JS somewhat tricky

Collectives™ on Stack Overflow

Javascript "saves" function data in memory?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related