Bagaimana cara kerja Event Loop di JavaScript?

Meskipun mungkin memerlukan pemahaman mendalam tentang bahasa seperti C++ dan C untuk menulis kode produksi skala penuh, JavaScript seringkali dapat ditulis hanya dengan pemahaman dasar tentang apa yang dapat dilakukan dengan bahasa tersebut.

Konsep, seperti meneruskan callback ke fungsi atau menulis kode asinkron, seringkali tidak terlalu sulit untuk diimplementasikan, yang membuat sebagian besar developer JavaScript kurang peduli tentang apa yang terjadi di balik terpal. Mereka hanya tidak peduli untuk memahami kompleksitas yang telah diabstraksi secara mendalam dari bahasa mereka.

Sebagai pengembang JavaScript, semakin penting untuk memahami apa yang sebenarnya terjadi di balik terpal dan bagaimana sebagian besar kerumitan yang diabstraksikan dari kami benar-benar bekerja. Ini membantu kami membuat keputusan yang lebih tepat, yang pada gilirannya dapat meningkatkan kinerja kode kami secara drastis.

Artikel ini berfokus pada salah satu konsep atau istilah yang sangat penting tetapi jarang dipahami dalam JavaScript. EVENT LOOP!.

Menulis kode asinkron tidak dapat dihindari dalam JavaScript, tetapi mengapa kode yang berjalan secara asinkron benar-benar berarti? yaitu The Event Loop

Sebelum kita dapat memahami bagaimana event loop bekerja, pertama-tama kita harus memahami apa itu JavaScript itu sendiri dan bagaimana cara kerjanya!

Apa itu JavaScript?

Sebelum kita melanjutkan, saya ingin kita mundur selangkah ke dasar. Apa sebenarnya JavaScript itu? Kita dapat mendefinisikan JavaScript sebagai;

JavaScript adalah bahasa tingkat tinggi, ditafsirkan, non-pemblokiran, asinkron, dan berulir tunggal.

Tunggu, apa ini? Definisi kutu buku? 🤔

Mari kita hancurkan!

Kata kunci di sini sehubungan dengan artikel ini adalah single-threaded, non-blocking, concurrent, dan asynchronous.

Utas tunggal

Utas eksekusi adalah urutan terkecil dari instruksi terprogram yang dapat dikelola secara independen oleh penjadwal. Bahasa pemrograman adalah single-threaded artinya hanya dapat melakukan satu tugas atau operasi pada satu waktu. Ini berarti akan menjalankan seluruh proses dari awal hingga akhir tanpa utas terganggu atau dihentikan.

Tidak seperti bahasa multi-utas di mana beberapa proses dapat dijalankan pada beberapa utas secara bersamaan tanpa saling menghalangi.

Bagaimana JavaScript menjadi single-threaded dan non-blocking pada saat yang bersamaan?

Tapi apa artinya pemblokiran?

  Pelajari Keterampilan Baru Pada Tahun 2022 Dengan Aplikasi Ini

Non-pemblokiran

Tidak ada satu definisi pemblokiran; itu hanya berarti hal-hal yang berjalan lambat di utas. Jadi non-pemblokiran berarti hal-hal yang tidak lambat di utas.

Tapi tunggu, apakah saya mengatakan JavaScript berjalan pada satu utas? Dan saya juga mengatakan itu bukan pemblokiran, yang berarti tugas berjalan cepat di tumpukan panggilan? Tapi bagaimana caranya??? Bagaimana kalau kita menjalankan timer? Loop?

Santai! Kami akan mengetahuinya sebentar lagi 😉.

Bersamaan

Konkurensi berarti bahwa kode dieksekusi secara bersamaan oleh lebih dari satu utas.

Oke, semuanya menjadi benar-benar aneh sekarang, bagaimana JavaScript menjadi single-threaded dan bersamaan pada saat yang sama? yaitu, menjalankan kodenya dengan lebih dari satu utas?

Asinkron

Pemrograman asinkron berarti kode berjalan dalam loop peristiwa. Saat ada operasi pemblokiran, acara dimulai. Kode pemblokiran terus berjalan tanpa memblokir utas eksekusi utama. Ketika kode pemblokiran selesai berjalan, itu adalah hasil dari operasi pemblokiran dan mendorongnya kembali ke tumpukan.

Tetapi JavaScript memiliki satu utas? Lalu apa yang mengeksekusi kode pemblokiran ini sambil membiarkan kode lain di utas dieksekusi?

Sebelum kita melanjutkan, mari kita rekap di atas.

  • JavaScript adalah utas tunggal
  • JavaScript tidak memblokir, yaitu proses yang lambat tidak memblokir eksekusinya
  • JavaScript bersifat bersamaan, yaitu mengeksekusi kodenya di lebih dari satu utas pada saat yang bersamaan
  • JavaScript tidak sinkron, yaitu menjalankan kode pemblokiran di tempat lain.

Tetapi hal di atas tidak tepat, bagaimana bahasa single-threaded bisa non-blocking, concurrent, dan asinkron?

Mari kita masuk lebih dalam, mari kita turun ke mesin runtime JavaScript, V8, mungkin ada beberapa utas tersembunyi yang tidak kita ketahui.

Mesin V8

Mesin V8 adalah mesin runtime rakitan web sumber terbuka berkinerja tinggi untuk JavaScript yang ditulis dalam C++ oleh Google. Sebagian besar browser menjalankan JavaScript menggunakan mesin V8, dan bahkan lingkungan runtime node js yang populer juga menggunakannya.

Dalam bahasa Inggris sederhana, V8 adalah program C++, yang menerima kode JavaScript, mengkompilasi, dan mengeksekusinya.

V8 melakukan dua hal utama;

  • Tumpukan alokasi memori
  • Konteks eksekusi tumpukan panggilan

Sayangnya, kecurigaan kami salah. V8 hanya memiliki satu tumpukan panggilan, pikirkan tumpukan panggilan sebagai utas.

Satu utas === satu tumpukan panggilan === satu eksekusi dalam satu waktu.

Gambar – Peretas Siang

Karena V8 hanya memiliki satu tumpukan panggilan, lalu bagaimana JavaScript berjalan secara bersamaan dan asinkron tanpa memblokir utas eksekusi utama?

  Apa yang Akan Muncul di Pemeriksaan Latar Belakang? 9 Hal yang Dapat Anda Temukan

Mari kita coba mencari tahu dengan menulis kode asinkron yang sederhana namun umum dan menganalisisnya bersama.

JavaScript menjalankan setiap kode baris demi baris, satu demi satu (utas tunggal). Seperti yang diharapkan, baris pertama dicetak di konsol di sini, tetapi mengapa baris terakhir dicetak sebelum kode batas waktu? Mengapa proses eksekusi tidak menunggu kode batas waktu (pemblokiran) sebelum melanjutkan untuk menjalankan baris terakhir?

Beberapa utas lain tampaknya telah membantu kami menjalankan batas waktu itu karena kami cukup yakin utas hanya dapat menjalankan satu tugas pada satu titik waktu.

Mari kita mengintip ke dalam Kode Sumber V8 untuk sementara.

Tunggu apa??!!! Tidak ada fungsi pengatur waktu di V8, tidak ada DOM? Tidak ada acara? Bukan AJAX?…. Yeeeeesss!!!

Peristiwa, DOM, pengatur waktu, dll. bukan merupakan bagian dari implementasi inti JavaScript, JavaScript sangat sesuai dengan spesifikasi Skrip Ecma dan berbagai versinya sering disebut sesuai dengan Spesifikasi Skrip Ecma (ES X).

Alur Kerja Eksekusi

Acara, pengatur waktu, permintaan Ajax semuanya disediakan di sisi klien oleh browser dan sering disebut sebagai API Web. Merekalah yang memungkinkan JavaScript single-threaded menjadi non-blocking, concurrent, dan asinkron! Tapi bagaimana caranya?

Ada tiga bagian utama untuk alur kerja eksekusi program JavaScript apa pun, tumpukan panggilan, API web, dan antrean Tugas.

Tumpukan Panggilan

Tumpukan adalah struktur data di mana elemen terakhir yang ditambahkan selalu yang pertama dihapus dari tumpukan, Anda dapat menganggapnya sebagai tumpukan pelat di mana hanya pelat pertama yang ditambahkan terakhir yang dapat dihapus terlebih dahulu. Call Stack hanyalah struktur data tumpukan tempat tugas atau kode dijalankan sesuai dengan itu.

Mari kita perhatikan contoh di bawah ini;

Sumber – https://youtu.be/8aGhZQkoFbQ

Saat Anda memanggil fungsi printSquare() , fungsi tersebut didorong ke tumpukan panggilan, fungsi printSquare() akan memanggil fungsi square() . Fungsi square() didorong ke stack dan juga memanggil fungsi multiply(). Fungsi perkalian didorong ke tumpukan. Karena fungsi perkalian kembali dan merupakan hal terakhir yang didorong ke tumpukan, ini diselesaikan terlebih dahulu dan dihapus dari tumpukan, diikuti oleh fungsi square() dan kemudian fungsi printSquare().

API Web

Di sinilah kode yang tidak ditangani oleh mesin V8 dijalankan untuk tidak “memblokir” utas eksekusi utama. Saat Call Stack bertemu dengan fungsi web API, prosesnya segera diserahkan ke Web API, di mana ia dieksekusi dan membebaskan Call Stack untuk melakukan operasi lain selama eksekusinya.

  Cara Melampiaskan dengan Aman di Antara Kami

Mari kembali ke contoh setTimeout kita di atas;

Saat kami menjalankan kode, baris console.log pertama didorong ke tumpukan dan kami segera mendapatkan output, saat mencapai batas waktu, pengatur waktu ditangani oleh browser dan bukan bagian dari implementasi inti V8, ini didorong ke API Web sebagai gantinya, membebaskan tumpukan sehingga dapat melakukan operasi lain.

Saat batas waktu masih berjalan, tumpukan melanjutkan ke baris tindakan berikutnya dan menjalankan console.log terakhir, yang menjelaskan mengapa kami mengeluarkannya sebelum keluaran pengatur waktu. Setelah penghitung waktu selesai, sesuatu terjadi. Console.log in kemudian timer secara ajaib muncul di tumpukan panggilan lagi!

Bagaimana?

Putaran Acara

Sebelum kita membahas event loop, mari kita lihat fungsi antrian tugas terlebih dahulu.

Kembali ke contoh timeout kita, setelah Web API selesai mengeksekusi tugas, itu tidak hanya mendorongnya kembali ke Call Stack secara otomatis. Itu pergi ke Antrian Tugas.

Antrian adalah struktur data yang bekerja berdasarkan prinsip First in First out, sehingga saat tugas didorong ke dalam antrean, mereka keluar dalam urutan yang sama. Tugas yang telah dijalankan oleh API Web, yang didorong ke Antrean Tugas, lalu kembali ke Call Stack untuk mencetak hasilnya.

Tapi tunggu. APA ITU EVENT LOOP???

Sumber – https://youtu.be/8aGhZQkoFbQ

Event loop adalah proses yang menunggu Call Stack dibersihkan sebelum mendorong callback dari Task Queue ke Call Stack. Setelah Tumpukan selesai, loop peristiwa memicu dan memeriksa Antrean Tugas untuk panggilan balik yang tersedia. Jika ada, itu mendorongnya ke Call Stack, menunggu Call Stack dibersihkan lagi, dan mengulangi proses yang sama.

Sumber – https://www.quora.com/How-does-an-event-loop-work/answer/Timothy-Maxwell

Diagram di atas menunjukkan alur kerja dasar antara Event Loop dan Task Queue.

Kesimpulan

Meskipun ini adalah pengantar yang sangat mendasar, konsep pemrograman asinkron dalam JavaScript memberikan wawasan yang cukup untuk memahami dengan jelas apa yang terjadi di balik terpal dan bagaimana JavaScript dapat berjalan secara bersamaan dan asinkron hanya dengan satu utas.

JavaScript selalu sesuai permintaan, dan jika Anda penasaran untuk mempelajarinya, saya sarankan Anda untuk memeriksanya kursus udemy.