Javascript Objects and Nesting

Question

I clearly don't understand something about JS objects.

function baseObject () {
    var self = this;

    self.value = "value";
    self.nestedObject = function () {
        var nest = this;

        nest.value = self.value;
        nest.deepNest = function() {
            var deep = this;

            deep.value = nest.value;
            deep.selfValue = self.value;
        };
    };
    self.nestedObject2 = {
        value: self.value,
        deepNest: {
            value: this.value,
            selfValue: self.value
        }
    };
}

I'll break down the fiddle and try to make my question clear.

My understanding about JS objects is that, while passed by value, when one object is set equal to another, they both should point to the same value, so that when the original object is updated, then the object that was set equal to it would update.

See: Javascript pointer/reference craziness. Can someone explain this?

First, I'm not seeing that happen (and that is what I want to happen). But even stranger I'm seeing the values actually turn NULL when I change the base object if they're nested deeply enough. Help, please. I'm clearly missing something.

Just in case your JS engine does something different from mine, heres' what the results look like on my computer (Windows 7 run in Chrome).

All Deeply Nested Values turn to Null, and the Original value is the only value that changes

You can play with Object playground: objectplayground.com

Akhil Sekharan
– Akhil Sekharan

2013-08-02 06:05:26 +00:00
Commented Aug 2, 2013 at 6:05 — Akhil Sekharan
– Akhil Sekharan, Commented Aug 2, 2013 at 6:05

Qtax · Accepted Answer · 2013-08-01 21:21:15Z

2

Your presentation code/markup is wrong.

You can simply use console.log(object) to see the objects structure at any time that you want. (The first level, when you expand the object you will see the structure at the time of expansion.)

For example:

Console

answered Aug 1, 2013 at 21:21

Qtax

34k9 gold badges92 silver badges127 bronze badges

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

2 Comments

deltree Over a year ago

This is not useful to me. I know how to use console.log, I was building a concise example.

Qtax Over a year ago

@deltree, this points out the error in your question and shows what's really going on. A tip: keep the question and code as minimal as possible to reproduce the problem you are having. What exactly is it that you expect the result to be after the change? And objects are passed by reference.

Bart · Accepted Answer · 2013-08-02 05:59:40Z

1

My understanding about JS objects is that, while passed by value, when one object is set equal to another, they both should point to the same value, so that when the original object is updated, then the object that was set equal to it would update.

Javascript copies the reference by value. In your example all the variables hold a copied reference to the original self.value. When you assign a new value to self.value only that variable will hold the reference to that new value. All others will still point to the old reference.

The only way you can make your scenario work is to create an object for self.value and read a property. When this property is changed no reference to the original object is lost.

http://jsfiddle.net/q3SCF/13/

function baseObject () {
    var self = this;

    self.value = {p:"value"};
    self.nestedObject = function () {
        var nest = this;

        nest.value = self.value;
        nest.deepNest = function() {
            var deep = this;

            deep.value = nest.value;
            deep.selfValue = self.value;
        };
    };
    self.nestedObject2 = {
        value: self.value,
        deepNest: {
            value: this.value,
            selfValue: self.value
        }
    };
}

edited Aug 2, 2013 at 5:59

answered Aug 1, 2013 at 21:23

Bart

17.4k5 gold badges63 silver badges81 bronze badges

3 Comments

deltree Over a year ago

wow, good catch, thanks. Still doesn't explain why the nested object doesn't change when the other object does, but it explains the nulls.

Bart Over a year ago

Updated my answer to be an actual answer :)

deltree Over a year ago

spectacular. Thanks very much.

Collectives™ on Stack Overflow

Javascript Objects and Nesting

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related