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.

I don't understand the "why are there two of them" part of the question. Could you please clarify? — slinzerthegod
– slinzerthegod, Commented Jan 4, 2012 at 15:05
Object 'a' has a value associated with it, which holds integer '4', and object 'b' has a value associated with it, which holds integer '5'. — EML
– EML, Commented Jan 4, 2012 at 15:26

Wayne · Accepted Answer · 2012-01-04 15:14:09Z

12

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.

edited Jan 4, 2012 at 15:14

answered Jan 4, 2012 at 15:06

Wayne

60.5k15 gold badges135 silver badges129 bronze badges

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

5 Comments

pimvdb Over a year ago

+1 There is one value in source, but two in memory. This seems to be the confusion of the OP.

Tomas Narros Over a year ago

So, it creates a copy of value var on every addProperty call. But, how binds it to the argument object?

jAndy Over a year ago

@TomasNarros: the same way. Formal parameters, function declarations and variables declared with var are all part of the 'Activation Object' and that is, which is copied over to create a lexical closure.

Wayne Over a year ago

@TomasNarros - Each time addProperty is called a new pair of get/set functions are created for the object passed in that close over a new value.

EML Over a year ago

Ok, I get it - thanks. I'm just about to ask another question, which is what prompted this one, about encapsulation in general.

techfoobar · Accepted Answer · 2012-01-04 15:08:14Z

1

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)

answered Jan 4, 2012 at 15:08

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Collectives™ on Stack Overflow

Misunderstanding of JavaScript closures

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related