Can a JavaScript object's child reference itself?

Question

I have a JavaScript object Team and a Score which represent points and some other functions. I want to know if it's safe to store the team in the score at the same time as storing the score in the team.

var Score = function(team){
    this.team = team;
    this.points = 0;
    ...
}

var team = {
    name : 'Team 1',
}
team.score = new Score(team);

The result of this is that if I log team.score.team.score.team.score.team.score.team.score.points = 0. This is perfect for what I am programming, however does it represent a dangerous setup that may crash older browsers or cause any other issues? It looks exactly like an infinite loop however Chrome seems to be handling it fine.

Are there any reasons why I shouldn't do this?

Answer 1

Good question by the way.

This is called circular referencing.

Meaning the you are creating the nested reference of the same object.

Garbage collection in browsers: The main function of the garbage collector in the browser is to free the memory if the memory occupied by the object is no longer in use. But in the case of circular reference

An object is said to reference another object if the former has an access to the latter (either implicitly or explicitly). For instance, a JavaScript object has a reference to its prototype (implicit reference) and to its properties values (explicit reference)

(Source MDN)

---

This is forcing the garbage collecting algorithm to prevent the object from being garbage collected, which in turn is a memory leak.

As per the MDN Mark and sweep algorithm is been improved in such circumstance of circular referencing which is intelligent enough to remove the object of this type.

Circular referencing was a problem in IE < 8 which caused the IE browsers to go hay wire on this. Read this link and this one

---

IBM link

This article sheds light on JavaScript circular referencing memory leak with example and clarity on the subject.

---

Final Verdict: Better to avoid circular referenced objects, only use when its highly needed at programmers discretion. As modern browsers today are quite efficiently built though but its not a good practice as a developer to write code that causes unwanted memory consumption and leaks.

Answer 2

Diagrammatic Represation For Circular Referencing

Consider the code snippet below:

const obj = {
  id: 1
};
obj.cirRef = obj;

console.log(obj.cirRef === obj); // true
console.log(obj.cirRef.cirRef === obj); // true
console.log(obj.cirRef.cirRef.cirRef.cirRef.id); // 1

Here's a diagrammatic representation for the same:

Now using the diagram above, follow the wires and try to answer what this expression obj.cirRef.cirRef.id evaluates to, the answer is 1.

Answer 3

var Score = function(team,point){
    this.team = team;
    this.points = 0;
    ...
}

var team = {
    name : 'Team 1',
   point : 'point'
}
team.score = new Score(team);
team.score = new Score(point);

Try this, maybe it can help you