Code Decoupling and Modularization in JavaScript | CodeSignal Learn

Code Decoupling and Modularization in JavaScript | CodeSignal Learn

Introduction

A hearty welcome awaits you! Today, we delve into the heart of writing maintainable and scalable software through Code Decoupling and Modularization . We will explore techniques to minimize dependencies, making our code more modular, manageable, and easier to maintain.

What are Code Decoupling and Modularization?

Decoupling ensures our code components are independent by reducing the connections between them, resembling the process of rearranging pictures with a bunch of puzzles. Here's a JavaScript example: // Coupled code function calculateArea(length, width, shape) {if (shape === "rectangle") {return length * width; // calculate area for rectangle} else if (shape === "triangle") {return (length * width) / 2; // calculate area for triangle}} // Decoupled code function calculateRectangleArea(length, width) {return length * width; // function to calculate rectangle area} function calculateTriangleArea(length, width) {return (length * width) / 2; // function to calculate triangle area} In the coupled code, calculateArea performs many operations — it calculates areas for different shapes. In the decoupled code, we split these operations into different, independent functions, leading to clean and neat code. On the other hand, Modularization breaks down a program into smaller, manageable units or modules.

Understanding Code Dependencies and Why They Matter

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

JavaScript

// Coupled code
function calculateArea(length, width, shape) {
    if (shape === "rectangle") {
        return length * width; // calculate area for rectangle
    } else if (shape === "triangle") {
        return (length * width) / 2; // calculate area for triangle
    }
}

// Decoupled code
function calculateRectangleArea(length, width) {
    return length * width; // function to calculate rectangle area
}

function calculateTriangleArea(length, width) {
    return (length * width) / 2; // function to calculate triangle area
}

Code dependencies occur when one part of the code relies on another part to function. In tightly coupled code, these dependencies are numerous and complex, making the management and maintenance of the codebase difficult. By embracing decoupling and modularization strategies, we can significantly reduce these dependencies, leading to cleaner, more organized code.

Consider the following scenario in an e-commerce application:

JavaScript

// Monolithic code with high dependencies
class Order {
    constructor(items, prices, discountRate, taxRate) {
        this.items = items;
        this.prices = prices;
        this.discountRate = discountRate;
        this.taxRate = taxRate;
    }

    calculateTotal() {
        let total = this.prices.reduce((sum, price) => sum + price, 0);
        total -= total * this.discountRate;
        total += total * this.taxRate;
        return total;
    }
    
    printOrderSummary() {
        const total = this.calculateTotal();
        console.log(`Order Summary: Items: ${this.items}, Total after tax and discount: $${total.toFixed(2)}`);
    }
}

In the example with high dependencies, the Order class is performing multiple tasks: it calculates the total cost by applying discounts and taxes, and then prints an order summary. This design makes the Order class complex and harder to maintain.

In the modularized code example below, we decoupled the responsibilities by creating separate DiscountCalculator and TaxCalculator classes. Each class has a single responsibility: one calculates the discount, and the other calculates the tax. The Order class simply uses these calculators. This change reduces dependencies and increases the modularity of the code, making each class easier to understand, test, and maintain.

JavaScript

// Decoupled and modularized code
class DiscountCalculator {
    static applyDiscount(price, discountRate) {
        return price - (price * discountRate);
    }
}

class TaxCalculator {
    static applyTax(price, taxRate) {
        return price + (price * taxRate);
    }
}

class Order {
    constructor(items, prices, discountRate, taxRate) {
        this.items = items;
        this.prices = prices;
        this.discountRate = discountRate;
        this.taxRate = taxRate;
    }

    calculateTotal() {
        let total = this.prices.reduce((sum, price) => sum + price, 0);
        total = DiscountCalculator.applyDiscount(total, this.discountRate);
        total = TaxCalculator.applyTax(total, this.taxRate);
        return total;
    }
    
    printOrderSummary() {
        const total = this.calculateTotal();
        console.log(`Order Summary: Items: ${this.items}, Total after tax and discount: $${total.toFixed(2)}`);
    }
}

Brick by Brick: Building a Codebase with Modules

Just like arranging books on different shelves, creating modules helps structure our code in a neat and efficient manner. In JavaScript, each file can act as a module: // The content of shapes.js export function calculateRectangleArea(length, width) {return length * width;} export function calculateTriangleArea(base, height) {return 0.5 * base * height;} Using the content of shapes.js in another file: // Importing the functions from shapes.js import { calculateRectangleArea, calculateTriangleArea } from './shapes.js'; const rectangleArea = calculateRectangleArea(5, 4); // calculates rectangle area const triangleArea = calculateTriangleArea(3, 4); // calculates triangle area console.log(`Rectangle Area: ${rectangleArea}`); // Output: Rectangle Area: 20 console.log(`Triangle Area: ${triangleArea}`); // Output: Triangle Area: 6 The functions for calculating the areas of different shapes are defined in a separate file — a module in JavaScript. In another file, we import and use these functions.

The principle of Separation of Concerns (SoC) allows us to focus on a single aspect of our program at one time.

JavaScript

// Code not following SoC
function getFullInfo(name, age, city, job) {
    console.log(`${name} is ${age} years old.`);
    console.log(`${name} lives in ${city}.`);
    console.log(`${name} works as a ${job}.`);
}

// Code following SoC  
function printAge(name, age) {
    console.log(`${name} is ${age} years old.`); // prints age
}

function printCity(name, city) {
    console.log(`${name} lives in ${city}.`); // prints city
}

function printJob(name, job) {
    console.log(`${name} works as a ${job}.`); // prints job
}

function getFullInfo(name, age, city, job) {
    printAge(name, age); // sends name and age to `printAge`
    printCity(name, city); // sends name and city to `printCity`
    printJob(name, job); // sends name and job to `printJob`
}

By applying SoC, we broke down the getFullInfo function into separate functions, each dealing with a different concern: age, city, and job.

JavaScript

// The content of shapes.js
export function calculateRectangleArea(length, width) {
    return length * width;
}

export function calculateTriangleArea(base, height) {
    return 0.5 * base * height;
}

JavaScript

// Importing the functions from shapes.js
import { calculateRectangleArea, calculateTriangleArea } from './shapes.js';

const rectangleArea = calculateRectangleArea(5, 4); // calculates rectangle area
const triangleArea = calculateTriangleArea(3, 4); // calculates triangle area

console.log(`Rectangle Area: ${rectangleArea}`); // Output: Rectangle Area: 20
console.log(`Triangle Area: ${triangleArea}`); // Output: Triangle Area: 6