Circular dependencies in JavaScript occur when two or more modules depend on each other in a way that creates a loop. In simpler terms, it happens when Module A depends on Module B, and Module B depends on Module A, forming a cycle.

This can lead to various issues in your codebase, such as difficulties in debugging, reduced maintainability, and even performance problems.

All in all, circular dependencies are something developers should be aware of and avoid.

Example of Circular Dependency

Let's consider a real-world example of a web application.

Imaging you're developing an app, and you have two modules: User and Order.

Module User (user.js):

const Order = require('./order');

class User {
  constructor(name) {
    this.name = name;
  }

  placeOrder(orderDetails) {
    const order = new Order(this, orderDetails);
    // Logic to place the order
  }
}

module.exports = User;

Module Order (order.js):

const User = require('./user');

class Order {
  constructor(user, orderDetails) {
    this.user = user;
    this.orderDetails = orderDetails;
  }

  // Logic related to the order
}

module.exports = Order;

In this scenario:

• The User module depends on the Order module because a user can place an order.

• The Order module depends on the User module because it needs to reference the user who placed the order.

This creates a circular dependency between User and Order, which can make the code harder to understand and maintain. For instance, if you try to create a new User object within the Order module or vice versa, you'll run into issues.

Circular dependencies like this can often be resolved by reorganizing the code or by using design patterns to break the cycle, making the application more maintainable and easier to work with in the long run.

The Downsides of Circular Dependencies

• Discuss the impact on code maintainability.

  • Difficulty in debugging and tracing errors.

  • Reduced code readability.

• Explain how circular dependencies can hinder performance.

  • Increased load times.

  • Reduced runtime efficiency.

• Mention the potential for unintended side effects.

  • Inconsistent module states.

  • Unpredictable behavior.

Detecting Circular Dependencies

To detect circular dependencies in my projects, I use cherrypush.com, which provides a super simple to use CLI. All you need are three short steps.

1. Globally install the CLI:

npm i -g cherrypush

1. Init cherry at the root of your project with:

cherry init

1. Activate the jsCircularDependencies plugin:

module.exports = {
    project_name: 'cherrypush/cherrypush.com',
    plugins: { 
        jsCircularDependencies: { include: 'app/javascript/**' } 
    },
}

Just make sure to use the correct folder on the include prop above.

Try it out

To make sure it works, run the CLI with:

cherry run --metric="JS circular dependencies"

This should output a list of all your circular dependencies:

$ cherry run --metric='JS circular dependencies'                    
  ✓ Running plugin
    ✓ jsCircularDependencies
👉 queries/user/dashboards.ts > queries/user/charts.ts
Total occurrences: 1

If you also want to keep track of your circular dependencies over time, you can use the cherrypush.com SaaS dashboard. All you need is one last command:

cherry push --api-key=YOUR_API_KEY

The API key is available at cherrypush.com/user/settings

Removing Circular Dependencies

To fix the circular dependency issue in the example where the User module depends on the Order module and vice versa, you can reorganize your code and utilize dependency injection to break the cycle. Here's a modified version of the code:

Module User (user.js):

class User {
  constructor(name) {
    this.name = name;
  }

  placeOrder(orderDetails) {
    const order = new Order(this, orderDetails); // Dependency injection
    // Logic to place the order
  }
}

module.exports = User;

Module Order (order.js):

class Order {
  constructor(user, orderDetails) {
    this.user = user;
    this.orderDetails = orderDetails;
  }

  // Logic related to the order
}

module.exports = Order;

In this modified code:

• We removed the require('./order') statement from the user.js module, eliminating the direct circular dependency.

• Instead of requiring the Order module at the top of user.js, we pass the Order constructor as a parameter when creating a new order in the placeOrder method. This is known as dependency injection. It allows us to create an Order instance without importing the Order module at the top of the file, thus breaking the circular dependency.

By applying this change, you maintain the functionality of the code while eliminating the circular dependency issue. This makes the codebase more maintainable and easier to reason about.

Conclusion

Cherry makes it super simple to keep track and prevent new occurrences of circular dependencies. It shows you everything in a simple dashboard that you can share with your Engineering team, helping everyone keep the codebase clean.

Try it our for free at cherrypush.com and let me know what you think!