Cookbooks
JavaScript
Chapter 5. Good Coding Practices
Refactoring

JavaScript:
Refactoring

How to:

Let’s look at a simple example where refactoring can make your code more concise and readable. Here, we refactor a function that calculates the sum of an array of numbers.

Before:

function calculateSum(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    sum += arr[i];
  }
  return sum;
}

console.log(calculateSum([1, 2, 3, 4])); // Output: 10

After:

function calculateSum(arr) {
  return arr.reduce((sum, num) => sum + num, 0);
}

console.log(calculateSum([1, 2, 3, 4])); // Output: 10

See how the reduce method reduces the size of the function while keeping the functionality intact? That’s refactoring for you.

Deep Dive

Refactoring didn’t emerge as a formal practice until the publication of Martin Fowler’s book “Refactoring: Improving the Design of Existing Code” in 1999. This book, together with the rise of agile software development, helped push refactoring into the mainstream.

Describing refactoring as an aspect of software development is like explaining why you’d tidy up a workshop: you do it so the next time you have to fix something (in this case, code), you’ll spend less time dealing with the mess and more on the actual problem.

When we talk about alternatives to refactoring, we tread into a broader discussion about software maintenance strategies. One could opt for a full rewrite, for example, but that’s often more costly and risky. Refactor incrementally, and you reap ongoing benefits without sinking the ship from a sudden overhaul.

Refactoring has been aided by the development of integrated development environments (IDEs) and tools like JSHint, ESLint, and Prettier in the JavaScript ecosystem, which automate code quality checks and highlight opportunities for refactoring.

It’s all about clean, expressive, and maintainable code. Sophisticated algorithms, data structure optimizations, or even architectural changes like switching from procedural to functional programming styles might be part of a refactoring process.

Refactoring must be done carefully; it’s essential to have a robust set of tests to ensure that your changes haven’t altered the software’s behavior unexpectedly—another reason why Test-Driven Development (TDD) dovetails nicely with refactoring since it provides that safety net by default.

See Also

Organizing code into functions