Sitemap

How to solve circular dependecy in Javascript?

2 min readSep 20, 2024

--

To solve circular references in JavaScript, especially when serializing objects (like when using JSON.stringify), you can follow these strategies:

1. Using a Custom replacer function in JSON.stringify

You can use a custom replacer function to handle circular references. Here’s an example:

const cache = new Set();

const jsonString = JSON.stringify(yourObject, (key, value) => {
if (typeof value === 'object' && value !== null) {
// If the object has already been seen, return undefined
// to avoid circular reference
if (cache.has(value)) {
return; // Remove circular reference
}
// Store the object in the cache
cache.add(value);
}
return value;
});

cache.clear(); // Clear the cache after serialization

This replacer function checks if an object has already been seen (stored in the Set). If it has, the function returns undefined, which removes the circular reference during serialization.

2. Using circular-json or flatted Libraries

If you prefer not to write custom logic, you can use external libraries designed to handle circular references, like circular-json or flatted:

Install the library:

npm install flatted
const { stringify, parse } = require('flatted');

const jsonString = stringify(yourObject); // Serializes with circular reference handling
const parsedObject = parse(jsonString); // Deserializes back to the object

3. Manually Break Circular References

In some cases, you can manually restructure your data to avoid circular references. For example, instead of having objects that refer back to each other directly, you could store unique references (like IDs) that you can resolve separately.

Example:

const parent = { name: 'parent' };
const child = { name: 'child', parent: parent };
parent.child = child; // Circular reference

// Solution: Break the circular reference manually
delete parent.child;

--

--

Aditya Yadav
Aditya Yadav

Written by Aditya Yadav

Software Engineer who talks about tech concepts in web development https://www.linkedin.com/in/aditya-yadav-01/