Organize Classes into Modules

Part of the Object Oriented Programming section of Coddy's JavaScript journey — lesson 30 of 56.

When your project grows, having all classes in one file becomes messy. Imagine 10 classes in one file - it becomes hard to find and maintain code.

We already learned how to organize code with modules - exporting and importing functions and variables. With classes, it's the same logic and syntax! You can export classes from one file and import them into another, just like we did with functions.

Let's practice organizing classes into modules to keep our code clean and manageable.

For example:

How It Works:

File 1: furniture-base.js (Export the base class)

export class Furniture {
 constructor(material) {
   this.material = material;
 }
 
 describe() {
   return `${this.material} furniture`;
 }
}

File 2: chair.js (Import and extend)

import { Furniture } from './furniture-base.js';
export class Chair extends Furniture {
 constructor(material, legs) {
   super(material);
   this.legs = legs;
 }
 
 sit() {
   return "Sitting comfortably";
 }
}

File 3: main.js (Use everything together)

import { Chair } from './chair.js';
import { Table } from './table.js';
const myChair = new Chair("wood", 4);
const myTable = new Table("glass", "round");
console.log(myChair.describe());  // "wood furniture"
console.log(myTable.describe());  // "glass furniture"

Challenge

You have an electronics store system organized into modules. The Laptop and Smartphone classes are created in separate files but need to be made available to other files.

Your task:

Export the classes (use named exports - not default):
- In laptop.js: Add export to make the Laptop class available
- In smartphone.js: Add export to make the Smartphone class available
Import the classes in main.js:
- Import the Laptop class from laptop.js
- Import the Smartphone class from smartphone.js

Cheat sheet

Classes can be exported and imported between modules using the same syntax as functions and variables.

Exporting a class:

export class Furniture {
  constructor(material) {
    this.material = material;
  }
  
  describe() {
    return `${this.material} furniture`;
  }
}

Importing and extending a class:

import { Furniture } from './furniture-base.js';

export class Chair extends Furniture {
  constructor(material, legs) {
    super(material);
    this.legs = legs;
  }
  
  sit() {
    return "Sitting comfortably";
  }
}

Importing multiple classes:

import { Chair } from './chair.js';
import { Table } from './table.js';

const myChair = new Chair("wood", 4);
const myTable = new Table("glass", "round");

Try it yourself

// TODO: Import the Laptop class from laptop.js

// TODO: Import the Smartphone class from smartphone.js


const myLaptop = new Laptop();
const myPhone = new Smartphone();

console.log(myLaptop.type);      // Outputs: "laptop"
console.log(myPhone.type);       // Outputs: "smartphone"