Refactoring Examples for Dependent Requests and Complex If‑Else Logic in JavaScript

Refactoring Examples in Business Scenarios

The article demonstrates concrete refactoring cases that arise in real‑world business code, focusing on JavaScript both in the browser and Node.js.

Request Order Dependency

Four data‑fetching functions A, B, C, D are described, where C depends on B and D depends on the results of A, B, and C. The initial implementation uses nested callbacks, leading to callback hell, poor concurrency, and unreadable code.

Error Example (illustrated with an image) shows the deeply nested callbacks.

The evolution of asynchronous handling in JavaScript is briefly reviewed: callbacks → Promise → generator + co → async/await.

Correct Example replaces the callback chain with Promise.all combined with async/await, allowing A and B to run concurrently while preserving the required order for C and D. The resulting code is concise, avoids infinite nesting, and leverages language evolution for performance.

Torturous If‑Else

Common problems are identified: excessive nesting, redundant logic, and lack of defensive programming.

Error Example (image) depicts a sprawling if‑else block that is hard to read.

Two refactoring principles are proposed:

Extract logical units into separate functions.

Adopt an error‑first return strategy.

The Correct Example restructures the code into three dedicated functions, each handling a specific layer of logic, orchestrated by a main dispatcher. This improves clarity but still relies on global variables.

To achieve pure functions, the globals are turned into parameters, making the functions deterministic and easier to test.

Pure‑function conversion is illustrated with a code snippet that replaces a global variable reference with an explicit argument.

Other Potential Issues in Code

Logic coupling in the view layer, e.g.,

a === 'a' && b === 'b' && c === 'c' && d === 'd' ? <div>...</div> : null

.

Component and function reuse without proper encapsulation, leading to duplication.

Functions that handle multiple unrelated responsibilities.

Messy parameter lists and missing defensive error handling (API errors, timeouts, duplicate submissions, etc.).

Magic numbers and strings without documentation.

Poor data structures and naming conventions.

Thought Preparation for Optimizing Code

Reasons for code optimization include technical pursuit, company requirements, team collaboration, rapid iteration, and personal reputation.

Key requirements for well‑written code are:

Clear system architecture.

Understandable lifecycle and execution flow.

Transparent purpose of each function.

Explicit input‑output relationships between functions.

Meaningful variable and expression naming.

Ease of extension.

Ultimately, the goal is clean code that is easy to understand, modify, and test.

Some Suggestions

Deeply understand the business domain before coding.

Study open‑source projects and industry best practices to recognize good versus bad code.

Remember that code is ultimately read by humans, not just executed by machines.

Treat code quality as equally important as business logic.

Use code reviews as a learning tool, not just a formality.

Apply the error‑first principle so that failures are returned early.

Split logic into independent, single‑purpose functions with clear inputs and outputs.

For complex state handling, consider state tables or state‑machine patterns.

Learn design patterns and refactoring techniques.

Refactor continuously—if you see a problem, fix it now rather than postponing.

Conclusion

The article uses two concrete refactoring examples to illustrate how to improve business code, lists additional common pitfalls, and provides theoretical guidance and practical advice to help developers write cleaner, more maintainable JavaScript.