Stepping into Refactoring Code

Welcome to our captivating session on refactoring, a powerful tool for tidying up code, much like you would organize a messy toy box or find a faster route to school. Each line of code is as essential as a brick in a building; clumsy code may result in an unstable structure. Today, we'll focus on enhancing the readability, maintainability, and performance of our code through refactoring.

Recapping Crucial Concepts

Let's briefly revisit a few key concepts: Code Smells : Indicators that our code needs refactoring, akin to clutter calling for cleanup. Refactoring Techniques : We've familiarized ourselves with Extract Method, Rename Method, and Substitute Algorithm techniques in earlier lessons. OOP in Refactoring : We've learned how to leverage Object-Oriented Programming principles to enhance our code's structure. Code Decoupling and Modularization : Methods to make code easier to manage by minimizing dependencies. We'll use these concepts as guiding stars as we traverse the cosmos of refactoring.

Practice Problem 1: Taming a Complex Function

We'll start with rewriting a complex game score computation function. Let's look at it: JavaScript function computeScore(player, monsters) {let score = 0; for (let monster of monsters) {if (player.power > monster) {score += player.power - monster;} else {score -= player.power - monster;}} return score;} The parts player.power > monster and player.power - monster recur in this function, indicating room for refactoring. We'll apply the Extract Method and Rename Method to untangle this: We'll extract the scoring logic into a separate function, scoreChange . We'll rename the original function to computeGameScore . With these adjustments, our improved code might look something like this: JavaScript // New function to calculate score changes. function scoreChange(power, monster) {if (power > monster) {return power - monster;} else {return monster - power;}} // Refactored function to calculate the game score. function computeGameScore(player, monsters) {let score = 0; for (let monster of monsters) {score += scoreChange(player.power, monster);} return score;} This refactoring has simplified the function and made it easier to modify in the future.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Practice Problem 2: Refactoring with OOP and Code Decoupling

Let's consider another example where the game has multiple types of monsters. Each monster type behaves differently when encountered by a player.

JavaScript

function monsterReaction(monsterType, player) {
    if (monsterType === 'ghost') {
        if (player.power > 5) {
            console.log("The ghost flees in terror!");
        } else {
            console.log("The ghost grumbles and attacks!");
        }
    } else if (monsterType === 'goblin') {
        if (player.power > 3) {
            console.log("The goblin groans and retreats!");
        } else {
            console.log("The goblin hacks with its sword!");
        }
    }
    // more monster types...
}

function monsterReaction(monsterType, player) {
    if (monsterType === 'ghost') {
        if (player.power > 5) {
            console.log("The ghost flees in terror!");
        } else {
            console.log("The ghost grumbles and attacks!");
        }
    } else if (monsterType === 'goblin') {
        if (player.power > 3) {
            console.log("The goblin groans and retreats!");
        } else {
            console.log("The goblin hacks with its sword!");
        }
    }
    // more monster types...
}

This scenario could also benefit from refactoring using OOP and Code Decoupling:

First, we'll introduce a class Monster with a method reaction that could be overridden by each type of monster.
Then, we'll create child classes Ghost and Goblin that inherit from Monster and implement their own reaction methods.

Under the revised structure, our game code would look like this:

JavaScript

class Monster {
    reaction(player) {
        throw new Error('This method should be overridden');
    }
}

class Ghost extends Monster {
    reaction(player) {
        if (player.power > 5) {
            console.log("The ghost flees in terror!");
        } else {
            console.log("The ghost grumbles and attacks!");
        }
    }
}

class Goblin extends Monster {
    reaction(player) {
        if (player.power > 3) {
            console.log("The goblin groans and retreats!");
        } else {
            console.log("The goblin hacks with its sword!");
        }
    }
}

let monsters = [new Ghost(), new Goblin(), new Ghost(), new Goblin()];
for (let monster of monsters) {
    monster.reaction(player);
}

class Monster {
    reaction(player) {
        throw new Error('This method should be overridden');
    }
}

class Ghost extends Monster {
    reaction(player) {
        if (player.power > 5) {
            console.log("The ghost flees in terror!");
        } else {
            console.log("The ghost grumbles and attacks!");
        }
    }
}

class Goblin extends Monster {
    reaction(player) {
        if (player.power > 3) {
            console.log("The goblin groans and retreats!");
        } else {
            console.log("The goblin hacks with its sword!");
        }
    }
}

let monsters = [new Ghost(), new Goblin(), new Ghost(), new Goblin()];
for (let monster of monsters) {
    monster.reaction(player);
}

Now, our code dealing with multiple monsters is easier to manage and can be extended to accommodate more types of monsters.

Stepping into Refactoring Code