Lesson 2
Refactoring Essentials: Extract, Rename, and Substitute Techniques
Introduction

Hello, explorer! Today is about refactoring. Consider it like 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:

JavaScript
1// Before refactoring
2function calculate(total, quantity) {
3    let price = total / quantity;
4    let tax = price * 0.2;
5    return price + tax;
6}
7
8// After refactoring
9function calculateTotalPrice(total, quantity) {
10    let price = calculatePrice(total, quantity);
11    let tax = calculateTax(price);
12    return price + tax;
13}
14
15function calculatePrice(total, quantity) {
16    return total / quantity;
17}
18
19function calculateTax(price) {
20    return price * 0.2;
21}

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 like having separate recipes for eggs, toast, coffee, etc., instead of one large recipe. Take a look at this code:

JavaScript
1// Before refactoring
2function greetUser(username) {
3    username = username.trim().toLowerCase(); // Prepare the username
4    let message = `Hello, ${username}`; // Prepare the message
5    return message; // Return the prepared message
6}
7
8// After refactoring
9function cleanUsername(username) {
10    return username.trim().toLowerCase(); // Returns a cleaned version of the username
11}
12
13function greetUser(username) {
14    username = cleanUsername(username); // Clean the username
15    let message = `Hello, ${username}`; // Prepare and return the message
16    return message;
17}

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

Using Rename Method

Clear method names make it easy to understand our code, just as straightforward street names make navigating a city easier. Let's have a look at renaming a method:

JavaScript
1// Before refactoring
2function fx(x) {
3    return 3.14 * (x ** 2); // Calculates a value that is pi times the square of x
4}
5
6// After refactoring
7function calculateCircleArea(radius) {
8    return 3.14 * (radius ** 2); // Calculates the area of a circle with a given radius
9}

Renaming the function fx to calculateCircleArea makes it easier to understand its purpose.

Discovering Substitute Algorithm

Substitute Algorithm involves replacing a code (an algorithm) with a simpler one, analogous to discovering a faster route to school. Here's an example:

JavaScript
1// Before refactoring
2function findSmallest(numbers) {
3    let smallest = null;
4    for (let num of numbers) {
5        // Assigns the first value as the smallest one, then checks the following ones
6        if (smallest = null || num < smallest) {
7            smallest = num;
8        }
9    }
10    return smallest;
11}
12
13// After refactoring
14function findSmallest(numbers) {
15    return Math.min(...numbers); // Returns the smallest number from 'numbers'
16}

Just like the Math.min function in JavaScript, it performs the same job as our previous function but with less code.

Lesson Summary and Practice

Great work! We've learned how to use the Extract Method, Rename Method, and Substitute Algorithm techniques to keep our code clean and efficient. Now, it's time for some hands-on practice with real examples. Remember, practice makes perfect. Let's do some refactoring!

Enjoy this lesson? Now it's time to practice with Cosmo!
Practice is how you turn knowledge into actual skills.