Apa Perbedaan Antara Kode Sinkron Dan Asinkron Dalam JavaScript?

Perbedaan utama antara kode sinkron (synchronous) dan asinkron (asynchronous) terletak pada bagaimana JavaScript menangani antrean tugas dan waktu tunggu (blocking vs non-blocking).

Ringkasan mengenai perbedaan keduanya:

1. Sinkron (Blocking): Kode dieksekusi baris demi baris secara berurutan. Jika ada satu baris kode yang membutuhkan waktu lama (misalnya mengambil data dari database), seluruh proses di bawahnya akan tertahan (macet) sampai tugas tersebut selesai.
2. Asinkron (Non-Blocking): JavaScript dapat memulai suatu tugas yang membutuhkan waktu lama, lalu langsung beralih ke tugas berikutnya tanpa menunggu tugas pertama selesai. Ketika tugas lama tersebut akhirnya rampung, hasilnya akan diproses kemudian via Callback, Promise, atau Async/Await.

Gunakan sinkron untuk operasi sederhana yang instan (seperti perhitungan matematika), dan gunakan asinkron untuk operasi yang memakan waktu (seperti membaca berkas, request ke API, atau mengakses database) agar performa aplikasi web tetap responsif dan tidak membeku (freeze).

Kode Sinkron (Synchronous)

console.log("1. Memulai tugas pertama...");

// Simulasi proses yang memakan waktu (blocking)
for (let i = 0; i < 1e9; i++) {
    // Berpura-pura sibuk menghitung sesuatu yang berat
}

console.log("2. Tugas kedua baru bisa berjalan setelah loop selesai.");
console.log("3. Selesai!");

// Output selalu:
// 1. Memulai tugas pertama...
// 2. Tugas kedua baru bisa berjalan setelah loop selesai.
// 3. Selesai!

Kode Asinkron (Asynchronous)

console.log("1. Memulai tugas pertama...");

// Menggunakan fungsi asinkron (non-blocking)
setTimeout(() => {
    console.log("2. Hasil tugas asinkron (selesai setelah 2 detik).");
}, 2000);

console.log("3. Tugas ketiga langsung berjalan tanpa menunggu tugas kedua!");

// Output:
// 1. Memulai tugas pertama...
// 3. Tugas ketiga langsung berjalan tanpa menunggu tugas kedua!
// (menunggu 2 detik...)
// 2. Hasil tugas asinkron (selesai setelah 2 detik).