Introduction

Hello, explorer! Today is about refactoring. Consider it similar to organizing your favorite toys in the toybox. We're going to learn about the Extract Method, Rename Method, and Substitute Algorithm refactorings. Refactoring helps us make our code cleaner and neater while keeping the functionality the same!

Refactoring Overview

Imagine having a complex map. Refactoring transforms it into simpler directions. Our code gets rearranged to make it more readable and efficient without altering what it does. Let's consider a small code snippet before and after refactoring:

TypeScript
// Before refactoring
function calculate(total: number, quantity: number): number {
    let price: number = total / quantity;
    let tax: number = price * 0.2;
    return price + tax;
}

// After refactoring
function calculateTotalPrice(total: number, quantity: number): number {
    let price: number = calculatePrice(total, quantity);
    let tax: number = calculateTax(price);
    return price + tax;
}

function calculatePrice(total: number, quantity: number): number {
    return total / quantity;
}

function calculateTax(price: number): number {
    return price * 0.2;
}

Both versions of the code do the same thing, but the latter is simpler and easier to understand!

Understanding the Extract Method

Imagine a large recipe for a complete breakfast. The Extract Method technique is similar to having separate recipes for eggs, toast, coffee, etc., instead of one large recipe. Take a look at this code:

// Before refactoring
function greetUser(username: string): string {
    username = username.trim().toLowerCase(); // Prepare the username
    let message: string = `Hello, ${username}`; // Prepare the message
    return message; // Return the prepared message
}

// After refactoring
function cleanUsername(username: string): string {
    return username.trim().toLowerCase(); // Returns a cleaned version of the username
}

function greetUser(username: string): string {
    username = cleanUsername(username); // Clean the username
    let message: string = `Hello, ${username}`; // Prepare and return the message
    return message;
}

Here, we moved the username preparation from greetUser into its own function cleanUsername. Nice and tidy!

Using Rename Method
Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal