Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!

Halo, selamat datang kembali di Ruang Developer Blog. Pada postingan kali ini kita akan mengenal apa itu Synchronous dan Asynchronous pada Javascript.

Synchronous pada Javascript

Synchronous berarti sequence atau berurut. Pada konsep ini, setiap statement kode dieksekusi baris per baris. Artinya, sebuah statement harus menunggu statement sebelumnya selesai dieksekusi. Untuk lebih jelasnya, perhatikan contoh kode berikut.

document.write("Halo <br>"); // baris ini akan dieksekusi pertama kali
document.write("Welcome to Ruang Developer <br>"); // baris ini akan dieksekusi setelah baris di atasnya

Output:

Halo
Welcome to Ruang Developer

Pada contoh kode di atas, baris kode pertama akan dieksekusi setelah itu barulah baris berikutnya. Seperti yang bisa kita lihat, proses eksekusi baris dilakukan secara berurutan. Setiap baris kode harus menunggu baris kode sebelumnya selesai dieksekusi. Sehingga, yang tampil adalah tesk Halo, setelah itu Welcome to Ruang Developer.

Asynchronous pada Javascript

Asyncrhonous merupakan kebalikan dari proses syncrhonous. Jika synchronous akan memblok proses eksekusi karena menunggu baris sebelumnya selesai, pada konsep asynchronous, baris kode dapat dieksekusi segera meskipun baris kode sebelumnya belum selesai dieksekusi. Untuk lebih jelasnya, perhatikan contoh kode berikut ini.

document.write("Halo <br>");
setTimeout(() => {
  document.write("Hello World");
}, 2000);
document.write("Welcome to Ruang Developer <br>");

Output:

Halo
Welcome to Ruang Developer
Hello World

Pada awalnya, seperti biasa, baris Halo akan dieksekusi. Saat dijalankan di browser, ada API web yang menangani fungsi setTimeout. Kemudian, program terus dijalankan seperti biasa hingga saat mencapai waktu 2 detik, baris Hello World akan dieksekusi. Tidak ada proses blok yang mengharuskan fungsi setTimeout selesai, sehingga baris terakhir langsung dijalankan. Seperti itulah yang terjadi pada proses asynchronous.

Bagikan:

Ingin Berdiskusi?

Yuk bergabung di Grup Telegram Ruang Developer atau mulai diskusi melalui GitHub. See You!

Dapatkan contoh source code project backend, frontend, atau fullstack untuk kamu amati, tiru, dan modifikasi sesuka hati. Klik untuk melihat detail!
comments powered by Disqus

Berlangganan Gratis

Kamu akan menerima email update dari Ruang Developer

Beri Dukungan

Beri dukungan, dapatkan full source code project web untuk bahan referensi, tiru, dan modifikasi.
Lightbox