JavaScript Modules and Classes

Day 9: JavaScript Modules and Classes

Date: December 16, 2024

Welcome to Day 9! Today, we explore Modules and Classes in JavaScript, two concepts that significantly enhance code organization, reusability, and readability. Understanding these topics will elevate your JavaScript skills, enabling you to structure your projects like a professional developer.

1. JavaScript Modules

Modules allow you to split your code into smaller, reusable pieces. Instead of having one large file, you can organize functionality into multiple files, making your codebase easier to manage and maintain.

Why Use Modules?

1. Separation of Concerns: Each module handles a specific responsibility.
2. Reusability: Code from one module can be reused in another.
3. Maintainability: Easier to debug and update.

Exporting and Importing in Modules

Exporting from a Module

You can export variables, functions, or classes from a module using export.

Named Export

// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

Default Export

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Importing a Module

Use the import keyword to bring in functionality from another module.

Example: Importing Named Exports

// main.js
import { add, subtract } from './utils.js';

console.log(add(5, 3)); // Output: 8
console.log(subtract(5, 3)); // Output: 2

Example: Importing a Default Export

// main.js
import greet from './greet.js';

console.log(greet("Alice")); // Output: Hello, Alice!

Dynamic Import

Dynamic imports load modules at runtime using import().

Example: Lazy Loading

const loadModule = async () => {
  const module = await import('./utils.js');
  console.log(module.add(5, 3)); // Output: 8
};

loadModule();

2. JavaScript Classes

Classes in JavaScript provide a blueprint for creating objects and encapsulating related data and methods. They are part of ES6 and are fundamental to object-oriented programming in JavaScript.

Defining a Class

A class is defined using the class keyword.

Example: Basic Class

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
  }
}

const person1 = new Person("John", 30);
console.log(person1.greet()); // Output: Hello, my name is John and I am 30 years old.

Class Inheritance

Inheritance allows a class to derive properties and methods from another class using the extends keyword.

Example: Inheritance

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog("Buddy");
dog.speak(); // Output: Buddy barks.

Static Methods

Static methods belong to the class itself, not the instance.

Example: Static Method

class MathUtil {
  static square(number) {
    return number * number;
  }
}

console.log(MathUtil.square(4)); // Output: 16

Private Fields and Methods

Private fields and methods are accessible only within the class and are denoted by a # prefix.

Example: Private Field

class BankAccount {
  #balance;

  constructor(initialBalance) {
    this.#balance = initialBalance;
  }

  getBalance() {
    return this.#balance;
  }
}

const account = new BankAccount(1000);
console.log(account.getBalance()); // Output: 1000
// console.log(account.#balance); // Error: Private field '#balance' must be declared in an enclosing class

Class vs. Object Literals

While object literals are quick and straightforward for simple data structures, classes offer:

• A clear blueprint for creating multiple similar objects.
• Support for inheritance and encapsulation.

3. Combining Modules and Classes

Modules and classes complement each other beautifully in modern JavaScript applications. You can define a class in one module and use it in another.

Example: Combining Modules and Classes

// car.js
export class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }

  display() {
    return `${this.brand} ${this.model}`;
  }
}

// main.js
import { Car } from './car.js';

const myCar = new Car("Tesla", "Model 3");
console.log(myCar.display()); // Output: Tesla Model 3

4. Real-World Example: Shopping Cart

Here’s a practical example combining both modules and classes.

File: cart.js

export class Cart {
  constructor() {
    this.items = [];
  }

  addItem(item) {
    this.items.push(item);
  }

  getTotalItems() {
    return this.items.length;
  }
}

File: main.js

import { Cart } from './cart.js';

const cart = new Cart();
cart.addItem("Apple");
cart.addItem("Banana");

console.log(`Total Items: ${cart.getTotalItems()}`); // Output: Total Items: 2

Key Takeaways

1. Modules: Help organize your code and promote reusability.
2. Classes: Provide a structured way to work with objects, offering features like inheritance and encapsulation.
3. Combined Usage: Use modules and classes together to build scalable and maintainable applications.

Practice Tasks

1. Create a module that exports functions for basic arithmetic operations.
2. Write a class for a Library system with methods to add and list books.
3. Combine modules and classes to simulate a basic e-commerce shopping cart.

What’s Next?

Tomorrow, on Day 10, we’ll delve into Event Loop and Asynchronous Programming, where you’ll learn how JavaScript handles concurrency, callbacks, promises, and the event loop. Stay tuned!