Javascript object child referencing

Question

I was just doing a small test to see how Javascript would respond to changing a child object's value within a parent object. I wanted to see if the parent referenced the child and would keep up to date with the new values, or if it would only keep the initial state of the child that it was instantiated with.

I have the little module coords.js

var NS = NS || {};
NS.Coords = function(){
 var __parentArray = {};
 var __childArray = {};
 addToParent = function(){
 __childArray['value'] = "Initial";
 __parentArray['child'] = __childArray;
 },
 showParent = function(){
 console.log("Parent: ",__parentArray);
 console.log("Child within parent: ",__parentArray['child']);
 },
 changeChild = function(){
 __childArray['value'] = "Changed";
 },
 showChild = function(){
 console.log("Child: ",__childArray]);
 };
 return {
 addToParent: addToParent,
 showParent: showParent,
 changeChild: changeChild,
 showChild: showChild
 };
}();

And in main.js

var NS = NS || {};
// @codekit-prepend "Coords.js"
console.log("=============================");
console.log("Startpoint point");
console.log("=============================");
var coords = NS.Coords;
coords.addToParent();
coords.showChild();
coords.showParent();
console.log("=============================");
console.log("Changed child value");
console.log("=============================");
coords.changeChild();
coords.showChild();
coords.showParent();

If you run this, you see in the console that when shown directly, the child shows the expected "Initial" and then "Changed" values.

The parent, however, always shows the "Changed" value of the child object it references. Even before changeChild() is called. No idea why. Without even changing the value it shows that it's been changed. Am I missing something super simple, or am I misunderstanding what's going on here?

• Dávid Szabó: You should always (well not always, but it is good to have a fiddle) setup a fiddle, so we can check the result too.
• Gurnzbot: I'm a n00b. Will do!

Answer 1

The first problem is you are probably using GOOGLE CHROME, i mean this isn't a problem, but don't forget that if you change a property, the console updates it AUTOMAGICALLY too. (Magical isn't it?)

If you change this console.log("Child within parent: ",__parentArray['child']); to console.log("Child within parent: ",__parentArray['child']['value']); then you can see that your script is working correctly.

Here is the fiddle: http://jsfiddle.net/M4Cd8/

• Gurnzbot: Yes... chrome. I was not aware of this. And the function showParent() does have a direct reference to the child when printing to the console, as well as logging just the parent itself. Even that (without refencing the value index itself), shows what I expected.
• Gurnzbot: Can you explain a bit about why the console changes the child object before I even call changeChild()? Maybe explain what "automagically" means? haha ;)
• Dávid Szabó: It doesn't change it before you call changeChild(), it changes AFTEr you call it, if you use setTimeout to delay it you can see. Google Chrome references the object (just like you) that's why the value changes in the console too.

Answer 2

There are some syntax errors in your code, but once those are fixed, the behavior you're describing does not occur. Some browsers' consoles provide an inline reference to objects, that is updated when the object changes. The answer is to observe the value string rather than the whole object:

console.log("Child within parent: ",__parentArray['child'].value);
console.log("Child: ",__childArray.value);

http://jsfiddle.net/pNtJJ/

But to clear up the question you were originally trying to figure out, yes, if you change an object that another object is referencing, then the change is refelcted no matter how you go about observing that, because a reference is precisely that - a link from one object to another.

As a side note, your variable names have the word "array" in them, but those are not arrays that you are working with, but objects. Arrays are typically created with square brackets [1, 2, 3, 4] and contain just values, not key-value pairs.

• Gurnzbot: I know, the array names are misleading. I apologize for not cleaning up my variable names. I use Codekit while working, which uses JSHint and doesn't report any syntax issues. Which syntax errors do you mean? Thx for the reply!
• JLRishe: Turns out there was only one syntax error here: console.log("Child: ",__childArray]);. You've got a stray square bracket. I think JSLint would complain about the lack of parentheses around your immediately invoked function expression, but that's not technically a syntax error.