Example of a Circular Reference in JavaScript

Circular referencing is an idea when an object directly or indirectly refers to itself back. It creates a closed loop. Like other programming languages, javascript also faces this problem of circular referencing. In this article, we shall cover a few examples of different circular referencing modes in javascript.

Direct Circular Referencing

In direct circular referencing the object is pointing itself by using the self pointer. In this example, we can expand the user object infinitely (in practice up to a certain limit) and all are pointing to the same object. Let us see the following code and the output console result for a better understanding.

Example

var user = {
   first_name: 'Suman'
};

user.self = user;

console.log("The user:", user);
console.log("The user using self pointer:", user.self);
console.log("The user using double self pointer:", user.self.self);

Indirect Circular Referencing

It is an extension of the previous case. In this example, the user is pointed by the user property of the details object. This is indirect referencing, but the user itself points itself so making a circular state here also.

Example

var user = {
   first_name: 'Suman'
};

user.self = user

var details = {
   user: user,
   user_id: 'u01'
};
console.log(details);

Class and Object Types

In this section, there are two examples one by using a class and another by an object created from a function. In both cases, a circular referencing is there and we can check this using a series of self pointers from the objects.

Example (Using Class)

class Person {
   constructor( name ) {
      this.name = name;
      this.self = this;
   }
}
var person = new Person( 'Asim' );
console.log( "Name of the person from multiple self pointers:",
person.self.self.self.self.name );

Example (Using an Object From Function)

function Person( name ) {
   this.name = name;
   this.self = this;
}

var person = new Person( 'Asim' );
console.log( "Name of the person from multiple self pointers:",
person.self.self.self.self.name );

Closure

A closure object is being created, where when an argument is given it simply prints the argument, otherwise calling the same object by passing an error message. Thus the closure is working. The following code shows this phenomenon.

Example

var myObject;
myObject = function( arg ) {
   if ( arg )
      console.log( arg );
   else
      myObject( 'please provide an argument' );
   }
myObject( 'Any string or value' );
myObject();

Conclusion

Circular referencing is the word used to describe an object that is pointing back to itself. Different types of this circular referencing could be direct or indirect. When one piece of code needs the output of another, and the referenced code needs the output of the original code, this is known as a circular reference, and it can occur in a production program. This can make the application unusable because none of them can provide any relevant data at all, or it could introduce tiny, unnoticeable memory leaks that pop up sometimes, especially in earlier JavaScript engines.