Refactoring Techniques with TypeScript | CodeSignal Learn

Refactoring Techniques with TypeScript | CodeSignal Learn

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: TypeScript // 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!

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

Clear method names make it easy to understand our code, much like straightforward street names make navigating a city easier. Let's have a look at renaming a method: // Before refactoring function fx(x: number): number {return 3.14 * (x ** 2); // Calculates a value that is pi times the square of x} // After refactoring function calculateCircleArea(radius: number): number {return 3.14 * (radius ** 2); // Calculates the area of a circle with a given radius} Renaming the function fx to calculateCircleArea makes it easier to understand its purpose.

Discovering Substitute Algorithm

The Substitute Algorithm involves replacing an algorithm with a simpler one, analogous to discovering a faster route to school. Here's an example: // Before refactoring function findSmallest(numbers: number[]): number | null {let smallest: number | null = null; for (let num of numbers) {// Assigns the first value as the smallest one, then checks the following ones if (smallest === null || num < smallest) {smallest = num;}} return smallest;} // After refactoring function findSmallest(numbers: number[]): number {return Math.min(...numbers); // Returns the smallest number from 'numbers'} Just like the Math.min function, it performs the same job as our previous function but with less code.

TypeScript

// Before refactoring
function fx(x: number): number {
    return 3.14 * (x ** 2); // Calculates a value that is pi times the square of x
}

// After refactoring
function calculateCircleArea(radius: number): number {
    return 3.14 * (radius ** 2); // Calculates the area of a circle with a given radius
}

TypeScript

// Before refactoring
function findSmallest(numbers: number[]): number | null {
    let smallest: number | null = null;
    for (let num of numbers) {
        // Assigns the first value as the smallest one, then checks the following ones
        if (smallest === null || num < smallest) {
            smallest = num;
        }
    }
    return smallest;
}

// After refactoring
function findSmallest(numbers: number[]): number {
    return Math.min(...numbers); // Returns the smallest number from 'numbers'
}