Local variable created somehow regardless there's the global one

Question

var construct = function() {
  var self = this;

  var view = {
    name: "self"
  };

  self.vm = {
    attached: attached,
    view: view
  }

  function attached() {
    alert('view.name: ' + view.name);
    view = {
      name: "attached"
    };
    alert('view.name(after attached): ' + view.name);
    alert('self.vm.view.name: ' + self.vm.view.name);
    alert('this.view.name: ' + this.view.name);
  }

  self.vm.attached();

  return self.vm;
}()

As you can see, we have a variable 'view' in a global (related to selv.vm object) context. view is passed by reference to the self.vm object.

Knowing this we can assume that 'attached' method will change the global variable and as a result self.vm.view will point to a new object.

A new local variable will be created regardeless there's the global with the same name.

A kinda unexpected behavior isn't it? Any ideas why so?

*"...and as a result self.vm.view will point to a new object."* that's incorrect. — Yoshi, Oct 27 '17 at 10:04

score 2 · Answer 1 · answered Oct 27 '17 at 10:02

To boil this down to a bare bones example:

var a = {name: 'one'};
var b = {view: a};

// See what b.view holds
console.log(b.view);

// Change a and look again
a = {name: 'two'};
console.log(b.view);

We have changed the object which the reference a points to. But b.view still holds a reference to the original object (which a pointed to before it was reassigned)

score 2 · Accepted Answer · answered Oct 27 '17 at 10:03

Inside the function attached(), You are basically reassigning your view variable to a newly created object. You are not changing the existing object, the object is still there. And since self.vm.view holds the reference to the initial value of the view, you'll see those value when you do a self.vm.view.name.

If you want the change the value in original object you've to do a

view.name = "attached";

score 1 · Answer 3 · answered Oct 27 '17 at 10:07

It's because view is a pointer.

var construct = function() {
  var self = this;

  // this create a new object, with the property name being "self"
  // and "view" as a pointer to that object
  var view = {
    name: "self"
  };

  self.vm = {
    attached: attached,
    // here the property "view" of the "vm" object points to the variable "view", which itself points to the original object (the one with name="self")
    view: view
  }

  function attached() {
    // the pseudo-global "view" object is called, it reaches out to the object it points to and gives us the name: "self"
    alert('view.name: ' + view.name);
    // now we are changing "view" to point to a NEW object, with the property name="attached"
    view = {
      name: "attached"
    };
    // view points to the new object, it's name is "attached"
    alert('view.name(after attached): ' + view.name);
    // the "view" property of self.vm still points to the original object, the one with the name "self"
    alert('self.vm.view.name: ' + self.vm.view.name);
    alert('this.view.name: ' + this.view.name);
  }

  self.vm.attached();

  return self.vm;
}()

Take a look at this question too: Javascript by reference vs. by value. Maybe it can explain things better than I do.

It's a tricky subject.

Local variable created somehow regardless there's the global one

3 Answers3