Jago JavaScript: Mini Project 1 - Kalkulator Pintar (Console Edition)

Kita akan membuat sebuah sistem kalkulator yang bisa menerima input, memprosesnya dengan simulasi delay, dan menampilkan hasilnya dengan gaya modern.

🧩 Apa yang Akan Dipelajari

• Menggabungkan fungsi matematika ke dalam satu Object.
• Menggunakan Async/Await untuk memberikan efek processing.
• Mempraktekkan Destructuring pada parameter fungsi.
• Menangani error sederhana.

🚀 Langkah-Langkah

1. Membuat Mesin Kalkulator (Object & Function)

Pertama, kita kumpulkan semua operasi matematika ke dalam sebuah Object bernama kalkulator.

const kalkulator = {
    tambah: (a, b) => a + b,
    kurang: (a, b) => a - b,
    kali: (a, b) => a * b,
    bagi: (a, b) => b !== 0 ? a / b : "Gak bisa bagi nol!",
};

2. Simulasi Proses (Promise)

Karena kita ingin kalkulator ini terasa "pintar", kita buat fungsi yang memberikan jeda waktu seolah-olah komputer lagi mikir.

const tungguDulu = (ms) => new Promise(resolve => setTimeout(resolve, ms));

3. Fungsi Utama (Async/Await & Destructuring)

Di sini keajaibannya terjadi. Kita buat fungsi hitung yang menerima satu object sebagai input.

async function jalankanKalkulasi({ angka1, angka2, operasi }) {
    try {
        console.log(`[LOG] Memulai perhitungan ${angka1} ${operasi} ${angka2}...`);
        
        // Simulasi loading 1.5 detik
        await tungguDulu(1500);

        let hasil;
        switch (operasi) {
            case "+": hasil = kalkulator.tambah(angka1, angka2); break;
            case "-": hasil = kalkulator.kurang(angka1, angka2); break;
            case "*": hasil = kalkulator.kali(angka1, angka2); break;
            case "/": hasil = kalkulator.bagi(angka1, angka2); break;
            default: throw new Error("Operasi gak dikenal!");
        }

        console.log(`[HASIL]: ${angka1} ${operasi} ${angka2} = ${hasil}`);
        return hasil;
    } catch (error) {
        console.error(`[ERROR]: ${error.message}`);
    }
}

4. Cara Menjalankan Project

Coba jalankan kode berikut di Console kamu:

// Data input dalam bentuk Object
const dataInput = {
    angka1: 10,
    angka2: 5,
    operasi: "*"
};

// Jalankan fungsi
jalankanKalkulasi(dataInput);

💡 Analisis Kode

• Destructuring: Di jalankanKalkulasi({ angka1, angka2, operasi }), kita langsung bongkar object dataInput.
• Async/Await: Membuat urutan log jadi rapi. "Memulai perhitungan" muncul dulu, baru 1.5 detik kemudian hasilnya muncul.
• Template Literals: Digunakan untuk membuat log pesan yang dinamis dan mudah dibaca.

❗ Tantangan Untukmu (Challenge)

Coba modifikasi kodenya:

1. Tambahkan operasi Pangkat (**) ke dalam object kalkulator.
2. Gunakan Default Parameter pada fungsi jalankanKalkulasi agar jika operasi kosong, otomatis melakukan penjumlahan.

🎯 Kesimpulan

Selamat! Kamu baru saja membuat aplikasi fungsional pertama kamu. Kamu sudah berhasil menjahit semua potongan ilmu yang kita pelajari dari materi #1 sampai #15 menjadi satu sistem yang bekerja.