Refactoring 024 – Replace Global Variables with Dependency Injection | HackerNoon

Break Hidden Dependencies for Cleaner Code

TL;DR: Replace global variables with dependency injection to improve testability and reduce coupling. 💉

Problems Addressed 😔

https://hackernoon.com/how-to-find-the-stinky-parts-of-your-code-part-vii-8dk31x0

https://hackernoon.com/how-to-find-the-stinky-parts-of-your-code-part-xiv

https://hackernoon.com/how-to-find-the-stinky-parts-of-your-code-part-xxii

Steps 🛠️

1. Identify global variables used across your codebase.
2. Create a real-world abstraction to encapsulate these variables.
3. Pass dependencies explicitly via function parameters or constructors.
4. Refactor existing code to use the new dependency-injected structure.
5. Remove the original global variable declarations.

Sample Code 💻

Before ❌

// This global variable holds the API configuration  
const globalConfig = { apiUrl: "https://api.severance.com" };  

function fetchOuties() {  
  return fetch(`${globalConfig.apiUrl}/outies`);  
  // globalConfig is NOT passed as parameter
}

After 👉

function fetchOuties(parameterConfig) {  
  return fetch(`${parameterConfig.apiUrl}/outies`);  
  // 1. Identify global variables
  // used across your codebase.
  // 4. Refactor the existing code 
  // to use the new dependency-injected structure. 
}  

const applicationConfig = { apiUrl: "https://api.severance.com" };  
// 2. Create a real-world abstraction
// to encapsulate these variables.

fetchOuties(applicationConfig); 
// 3. Pass dependencies explicitly 
// via function parameters or constructors.

//  const globalConfig = { apiUrl: "https://api.severance.com" };  
// 5. Remove the original 
// global variable declarations.

// Why Is 'config' a Dependency?
// Because:
// outies() depends on knowing the API URL to work
// Without this information, 
// The function can't perform its core task
// The dependency is 
// explicitly declared in the function signature

A Step Beyond: API Reification

class ApiService {
  constructor(parameterConfig) {
    this.variableConfig = parameterConfig;
  }
  
  // parameterConfig, variableConfig
  // and applicationConfig
  // are very bad names. 
  // They are here to emphasize the change

  fetchOuties() {
    return fetch(`${this.variableConfig.apiUrl}/outies`);
  }
}

const apiService = 
  new ApiService({ apiUrl: "https://api.severance.com" });
apiService.fetchOuties();

Type 📝

Safety 🛡️

This refactoring is safe if you audit all global variable references and thoroughly test the code after injection.

Why is the Code Better? 🌱

Testability: Dependencies can be replaced (not mocked) for unit tests.

Explicit Contracts: Functions declare what they need.

Scalability: Configuration changes don’t require code edits.

Coupling: Code is less coupled.

How Does it Improve the Bijection? 🗺️

By making dependencies explicit, the code mirrors real-world interactions where components rely on declared inputs, not hidden state.

You also reduce Coupling which is usually the more important problem you must solve.

Limitations ⚠️

Over-injection can lead to parameter bloat.

Common Misconceptions

“But it’s just a parameter!”

• Exactly! Passing dependencies via parameters is Dependency Injection. Frameworks often obscure this basic principle.

“This is too simple to be DI!”

• Dependency Injection doesn’t require complex frameworks. This is a pure, framework-less injection.

“Dependency Injection vs Dependency Inversion”

• Inversion is the principle (why). It tells you to depend on abstractions to reduce coupling.
• Injection is the practice (how). It’s one way (there are many others) to apply the principle by passing dependencies from outside instead of creating them inside a class.

Refactor with AI 🤖

You can use AI tools to analyze your codebase and identify global variables.

The AI can suggest where to implement dependency injection and help generate the necessary interfaces or classes for your dependencies.

Try Them! 🛠

Remember: AI Assistants make lots of mistakes

Suggested Prompt: 1. Identify global variables used across your codebase.2. Create a real-world abstraction to encapsulate these variables. 3. Pass dependencies explicitly via function parameters or constructors. 4. Refactor existing code to use the new dependency-injected structure. 5. Remove the original global variable declarations.

Level 🔋

See also 🔍

Credits 🙏

Image by Petra on Pixabay

This article is part of the Refactoring Series.