Mengatur class ke dalam module

Termasuk bagian Pemrograman Berorientasi Objek dalam perjalanan JavaScript di Coddy. Pelajaran 30 dari 56.

Saat proyekmu berkembang, menyimpan semua class dalam satu file membuat kode menjadi berantakan. Bayangkan ada 10 class dalam satu file, kode jadi sulit ditemukan dan dipelihara.

Kita sudah mempelajari cara mengatur kode dengan module, yaitu mengekspor dan mengimpor fungsi dan variabel. Dengan class, logika dan sintaksnya sama! Kamu bisa mengekspor class dari satu file dan mengimpornya ke file lain, seperti yang kita lakukan dengan fungsi.

Mari berlatih mengatur class ke dalam module agar kodemu tetap rapi dan mudah dikelola.

Contohnya:

Cara Kerjanya:

File 1: furniture-base.js (Ekspor class dasar)

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

File 2: chair.js (Impor dan perluas)

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 (Gunakan semuanya bersama-sama)

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"

Tantangan

Kamu memiliki sistem toko elektronik yang diatur ke dalam beberapa module. Class Laptop dan Smartphone dibuat dalam file terpisah, tetapi harus tersedia untuk file lain.

Tugasmu:

Ekspor class (gunakan named export, bukan default):
- Di laptop.js: Tambahkan export agar class Laptop tersedia
- Di smartphone.js: Tambahkan export agar class Smartphone tersedia
Impor class di main.js:
- Impor class Laptop dari laptop.js
- Impor class Smartphone dari smartphone.js

Coba sendiri

// TODO: Impor class Laptop dari laptop.js

// TODO: Impor class Smartphone dari smartphone.js


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

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