Is there an impact for maintaing a parent reference in js object?

Question

I suspect this has been asked and answered, but i couldn't find it. I'm new to js and am wondering if memory or performance hits occur when maintaining a parent reference in child objects? For instance, suppose this:

var phoneViewModel = function (number, parent) {
    var self = this;
    self.number = number;
    self.parent = parent;
    deleteNumber = function () {
        self.parent.phones.pop(this);
    }
}

var personViewModel = function (name) {
    var self = this;
    self.name = name;
    self.phones = [];
    self.addPhone = function (number) {
        self.phones.push(new phoneViewModel(number, self));
    };
}

If the person data comes out to 1mb, and they have 100 phone numbers, will I use up ~100mb (I suppose it would be an exponential number if this is true)? Or will it just be the ~1mb?

Another way to ask this is, is there any reason to avoid this practice?

Well, you could just try it and see :). Since I don't know of the performance characteristics, I won't answer, but I can tell you that circular references make it so that you can't serialize the object to JSON. — Heretic Monkey, Oct 08 '15 at 21:23
Storing a reference to `parent` may prevent it from being garbage collected. — Oriol, Oct 08 '15 at 21:31
@Oriol Is it wrong http://stackoverflow.com/questions/7347203/circular-references-in-javascript-garbage-collector ? I guess that now no one cares about IE6. — Orest Hera, Oct 08 '15 at 21:41

score 0 · Accepted Answer · answered Oct 08 '15 at 22:09

Primary reason to avoid it would be JSON serialization troubles.

For primitives like Strings, you are passing the value, otherwise you are passing reference.

Consider this:

var str1 = "Hello";
var str2 = "World";

var arr1 = [str1,str2];
var arr2 = [str1, str2];

console.log(arr1);
console.log(arr2);

str1 = "nullandvoid";
str2 = "nullandvoid";

arr1[1] = "Friends";

console.log(arr1);
console.log(arr2);

var obj1 = {arr: arr1};
var obj2 = {obj: obj1};

console.log(obj1);
console.log(obj2);

obj2.obj.myprecious = "value";
arr1[0] = "Hi";
arr1[1] = "Planet";

console.log(obj1);
console.log(obj2);

<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>

Jonathan · Answer 2 · 2015-10-08T22:32:32.720

In general you should be more worried about what code does than its memory usage.

I'm pretty sure phoneViewModel.deleteNumber doesn't do what you expect, it lets a phone delete all phones added after it.

You could write something like this which would be slightly more memory efficient (which comes way after writing decent and working code):

var PhoneViewModel = function (phoneNumber, owner) {
    this.phoneNumber = phoneNumber;
    this.owner = owner;
};

PhoneViewModel.prototype.voicemail = function () {
    return this.owner.name + " is not here.";
};

var PersonViewModel = function (name) {
    this.name = name;
    this.phones = {};
};

PersonViewModel.prototype.addPhone = function (phoneNumber) {
    this.phones[phoneNumber] = new PhoneViewModel(phoneNumber, this);
};

PersonViewModel.prototype.deletePhone = function (phoneNumber) {
    delete this.phones[phoneNumber];
};

About your actual question: it is as you suspected a reference, not a copy.

Is there an impact for maintaing a parent reference in js object?

2 Answers2