scope of javascript variables within functions within function

Question

Can someone please explain the following code? Why don't the inner functions access the "inside" variable within the same parent function - yet they seem to share the same variable with peer functions? I know that I could use "this" from within the child functions to access the "inside" variable in the parent function, but I'm puzzled as to why this is needed.... Have I effectively been creating class instances when I probably want something more static? I've been using this pattern to wrap javascript functionality, but now I'm wondering if there is a better/easier pattern that avoids this challenge of variable encapsulation (something more static)? Thank you for your insights.

var wrap = function() {
  var inside = null;

  function showInside() {
    console.log(inside);
  }

  function changeInside() {
    console.log(inside);
    inside += 'test';
  }

  return {
    inside: inside,
    showInside: showInside,
    changeInside: changeInside
  };
}();

wrap.changeInside();
wrap.showInside();
wrap.changeInside();
wrap.showInside();
console.log(wrap.inside);

Your issue has nothing to do with functions at all. Here is a simplified version of what you are seeing: var foo = 42; var obj = {foo: foo}; foo = 21; console.log(obj.foo);. JavaScript is pass by value. {foo: foo} assigns a copy of the value of foo to the property foo. — Felix Kling
– Felix Kling, Commented Feb 6, 2017 at 17:45
I think speaking of pass by value in JavaScript is confusing because you can also pass references as value. If foo was an object, you would not assign a copy of the object but a copy of the reference to the object. — Hugo G
– Hugo G, Commented Feb 6, 2017 at 17:48
@HubertGrzeskowiak: Anything is confusing if one doesn't know about it. en.wikipedia.org/wiki/Evaluation_strategy is a good read. — Felix Kling
– Felix Kling, Commented Feb 6, 2017 at 17:53
@HubertGrzeskowiak No, JS is always pass-by-value. That you can pass reference values (objects) is just a part of that. — Bergi
– Bergi, Commented Feb 6, 2017 at 18:35

Quentin · Accepted Answer · 2017-02-06 17:44:24Z

6

Why don't the inner functions access the "inside" variable within the same parent function - yet they seem to share the same variable with peer functions?

They do.

You are confused because when you say:

  return {
    inside:inside,

You copy the value of the variable inside to the property inside on the new object. You do this at the time you create the object.

When you change the value of the variable later, it has no association with the property, so the property doesn't get updated.

You would need to use getter/setters to link the property to the variable.

var wrap = function() {
  var inside = null;

  function showInside() {
    console.log(inside);
  };

  function changeInside() {
    console.log(inside);
    inside += 'test';
  }

  return {
    get inside() {
      return inside;
    },
    set inside(value) {
      inside = value;
    },
    showInside: showInside,
    changeInside: changeInside
  };

}();

wrap.changeInside();
wrap.showInside();
wrap.changeInside();
wrap.showInside();
console.log(wrap.inside);

answered Feb 6, 2017 at 17:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

1 Comment

user6096790 Over a year ago

Thanks so much for your help in clearing my confusion! :-)

Gabriel · Accepted Answer · 2017-02-06 17:55:30Z

0

I think you have a conceptual problem. Let see:

var wrap = function(){
    ...
}();

That last () there means that you aren't assigning the function to wrap, you're calling the function and assigning its return value to wrap.

The return value is

return {
    inside:inside,  //The value of inside (null) 
    showInside:showInside, //The local function showInside
    changeInside:changeInside //The local function changeInside
};

See, you haven't the variable inside in wrap.inside, you just have the value when the function was invoked.

First, you might want to do the following:

var wrap = function() {
    ....      
    return this; //Return the object itself
}();

And then, variables and functions inside a function belong to the function's scope. Can't be accessed from outside that scope. So you might instead define properties.

var wrap = function() {      
    this.inside = 1; //property

    var insideVar = 2; //variable

    this.showInside=function() { //property (with a function assigned to it)
        console.log(insideVar);
        console.log(this.inside);   
    }; 

    this.changeInside=function() { //property
        insideVar+=2;
        this.inside+=1;
    };

    return this;
}();

And now:

console.log(wrap.inside); //-> 1
console.log(wrap.insideVar); //-> undefined
console.log(wrap.changeInside());
console.log(wrap.showInside); //-> 4 and 2
console.log(wrap.inside); //-> 2

Hope the difference is clear. Otherwise just ask for more explanation.

answered Feb 6, 2017 at 17:55

Gabriel

2,1801 gold badge17 silver badges20 bronze badges

1 Comment

user6096790 Over a year ago

Thanks anyway for your help! I think you found the same problem in my code and understanding, however the accepted answer was more clear and helpful for me. The main reason I use and like the pattern is the encapsulation and ability to selectively hide and expose functions and variables from the code I'm encapsulating inside the function. I started out using straight objects for encapsulation, but they were much messier and difficult to manage for me as there might be many needed functions and variables which were exposed yet were only useful and needed inside the object.... Thanks again.

Collectives™ on Stack Overflow

scope of javascript variables within functions within function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related