JavaScript Runtime, Event Loop, Manipulasi DOM & Fetch Asinkron
Memahami Call Stack, Microtask Queue & Komunikasi Jaringan Tanpa Freeze UI
01. Target Pembelajar & Prasyarat
Developer yang ingin memahami model konkurensi JavaScript secara mendalam.
02. Kompetensi Konseptual (Level 1ā2)
- āMenjelaskan urutan eksekusi Call Stack vs Microtask Queue (Promise) vs Macrotask Queue (setTimeout).
03. Kompetensi Praktis & Artefak Nyata (Level 3ā4)
- āMembangun klien fetch dengan penanganan status loading, error, dan pembatalan request (AbortController).
04. Aplikasi Nyata & Verifikasi
Penerapan Industri: Logika komunikasi checkout formulir dan interaksi katalog di Z-Automation.
Metode Verifikasi: Menjalankan pengujian urutan log di konsol browser dan memverifikasi urutan eksekusi mikrotugas.
Mengapa Subjek Ini Krusial dalam Rekayasa Nyata?
Pelajari bagaimana JavaScript single-threaded mengelola tugas asinkron (Promise, async/await), menangani event delegation, dan mengambil data API.
Dalam lingkungan produksi, kegagalan memahami batas-batas arsitektur sistem sering kali menyebabkan bug yang sulit dilacak, pemborosan biaya komputasi, atau antarmuka yang lambat bagi pengguna.
Bagaimana Sistem Sebenarnya Bekerja di Tingkat Protokol
Bagaimana JavaScript Mengelola Asinkroni
JavaScript adalah bahasa single-threaded: ia hanya memiliki satu Call Stack untuk mengeksekusi instruksi. Namun mengapa ia bisa mengunduh file besar atau menunggu respons API tanpa membekukan tombol di layar? Jawabannya adalah Event Loop.
Alur Arsitektur Sistem Otonom & Runtime
Pesan bahasa alami diterima melalui antarmuka web atau webhook chat.
{
"input": "Berapa estimasi biaya pembuatan landing page bisnis?"
}Koreksi Asumsi Umum vs Realitas Rekayasa
āsetTimeout(fn, 0) berarti fungsi langsung dieksekusi secara instan.ā
setTimeout(fn, 0) hanya menjadwalkan fungsi masuk ke antrean Macrotask dan baru dijalankan setelah seluruh Call Stack dan Microtask kosong.
Implementasi Langkah-demi-Langkah
Hasil akhir yang diharapkan: Demonstrasi urutan Event Loop di konsol browser.
lab-b1-m4/ āāā event-loop.js
1Menguji Urutan Microtask vs Macrotask
Membuktikan prioritas Promise atas setTimeout.
| 1 | // event-loop.js |
| 2 | console.log('1. Sinkron Awal (Call Stack)'); |
| 3 | |
| 4 | setTimeout(() => { |
| 5 | console.log('4. Macrotask (setTimeout)'); |
| 6 | }, 0); |
| 7 | |
| 8 | Promise.resolve().then(() => { |
| 9 | console.log('3. Microtask (Promise)'); |
| 10 | }); |
| 11 | |
| 12 | console.log('2. Sinkron Akhir (Call Stack)'); |
1. Sinkron Awal 2. Sinkron Akhir 3. Microtask (Promise) 4. Macrotask (setTimeout)
Mengantisipasi Masalah Umum & Tantangan Ekstensi
Tambahkan queueMicrotask() dan bandingkan posisinya dengan Promise.then().
Uji Kompetensi Mandiri & Verifikasi Hasil
Standar kelulusan Z-Automation mewajibkan skor minimum 80 / 100 Poin dengan komponen Implementasi Praktis minimal 21 / 35 Poin (60%). Jawab soal diagnostik dan centang hasil pengujian praktis Anda.
BAGIAN A // PERTANYAAN DIAGNOSTIK KONSEPTUAL & TEKNIS (40 POIN)
01.Antara Promise.then() (Microtask) dan setTimeout(..., 0) (Macrotask), mana yang akan dieksekusi lebih dulu oleh Event Loop?
BAGIAN B // DAFTAR PERIKSA HASIL IMPLEMENTASI PRAKTIS (35 POIN ā MIN. 21 POIN)
Centang item di bawah ini hanya jika Anda telah menjalankan kode di komputer Anda dan mengamati output yang benar: