Misunderstanding of JavaScript closures

Question

I'm new to JavaScript, and am having a problem understanding this code:

function addProperty(o) {
   var value;

   o["get"] = function()  { return value; }
   o["set"] = function(v) { value = v; }
}

var a = {};
addProperty(a);
var b = {};
addProperty(b);

a.set(4);
b.set(5);
print("a is " + a.get() + "; b is " + b.get());

This prints (in v8/d8) a is 4; b is 5. If I comment out the var value; line, I get a is 5; b is 5. Where is the 'value' object, and why are there two of them? Thanks.

Answer 1

The value variable is local to addProperty. The first time addProperty is called, a new value is created, over which both of the functions close. The second time addProperty is called, a second value is created over which two new functions close.

Removing var creates a global value on the window object that is shared by all of the functions.

Maybe you mean to do this:

function createPropertyMgr() {
    var value;
    return function(o) {
       o["get"] = function()  { return value; }
       o["set"] = function(v) { value = v; }
    }
}

var addProperty = createPropertyMgr();

This new addProperty function closes over one value no matter how many times it's called. I'm not sure I understand the use case, but that should demonstrate the difference.

Answer 2

When you don't explicitly declare a variable inside a function, its scope is assumed as global. i.e. in your second case, since you have not declared value explicitly as local to the function addProperty(), it gets treated as global.

But when you do declare it explicitly inside a function, it becomes local to the function. Every time the function is invoked a new copy of the function local variable is created on the stack (and importantly it stays there in the stack as long as there is a reference to it)