Bagaimana cara kerja Loop Acara 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 panggilan balik ke fungsi atau menulis kode asinkron, seringkali tidak terlalu sulit untuk diterapkan, yang membuat sebagian besar pengembang JavaScript tidak begitu peduli dengan apa yang terjadi di bawah tenda. Mereka hanya tidak peduli tentang memahami kompleksitas yang telah diabstraksi secara mendalam dari mereka oleh bahasa.

Sebagai pengembang JavaScript, menjadi semakin penting untuk memahami apa yang sebenarnya terjadi di bawah tenda dan bagaimana sebagian besar kerumitan ini diabstraksi dari kita benar-benar berfungsi. 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. Itu ACARA LOOP!. 

Menulis kode asinkron tidak dapat dihindari dalam JavaScript, tetapi mengapa kode yang menjalankan asinkron benar-benar berarti? yaitu. Lingkaran Acara

Sebelum kita dapat memahami cara kerja loop acara, 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 itu sebenarnya JavaScript? Kita dapat mendefinisikan JavaScript sebagai;

JavaScript adalah bahasa berbarengan yang tinggi, diinterpretasikan, berulir tunggal, non-blocking, asinkron, dan bersamaan.

Tunggu, apa ini? Definisi kutu buku? ��

Mari kita jabarkan!

Kata kunci di sini mengenai artikel ini adalah single-threaded, non-blocking, bersamaan, dan tidak sinkron.

Utas tunggal

Utas eksekusi adalah urutan terkecil dari instruksi yang diprogram yang dapat dikelola secara mandiri 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 tempat banyak proses dapat dijalankan pada beberapa utas secara bersamaan tanpa memblokir satu sama lain.

Bagaimana JavaScript dapat single-threaded dan non-blocking pada waktu bersamaan?

Tapi apa artinya pemblokiran?

Non-blocking

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

Tapi tunggu, apakah saya mengatakan JavaScript berjalan di 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?

Bersantai! Kami akan mencari tahu dalam sedikit ��.

Bersamaan

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

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

Tidak sinkron

Pemrograman asinkron berarti bahwa kode tersebut berjalan dalam suatu peristiwa perulangan. Ketika ada operasi pemblokiran, acara dimulai. Kode pemblokiran terus berjalan tanpa memblokir utas eksekusi utama. Ketika kode pemblokiran selesai berjalan, ia akan mengantri hasil dari operasi pemblokiran dan mendorongnya kembali ke tumpukan.

Tapi JavaScript punya satu utas? Apa yang kemudian mengeksekusi kode pemblokiran ini sementara membiarkan kode lain di utas dieksekusi?

Sebelum kita melanjutkan, mari kita rekap hal di atas.

  • JavaScript adalah utas tunggal
  • JavaScript adalah non-pemblokiran, yaitu proses yang lambat jangan halangi pelaksanaannya
  • JavaScript bersamaan, yaitu mengeksekusi kodenya di lebih dari satu utas pada saat yang sama
  • JavaScript asinkron, mis., Menjalankan kode pemblokiran di tempat lain.

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

Mari kita sedikit lebih dalam, mari kita turun ke mesin runtime JavaScript, V8, mungkin ia memiliki beberapa utas tersembunyi yang tidak kami sadari.

Mesin V8

Mesin V8 adalah mesin runtime perakitan web open-source berkinerja tinggi untuk JavaScript yang ditulis dalam C ++ oleh Google. Sebagian besar browser menjalankan JavaScript menggunakan mesin V8, dan bahkan lingkungan runtime node populer juga menggunakannya.

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

V8 melakukan dua hal utama;

  • Tumpukan alokasi memori
  • Panggil konteks pelaksanaan stack

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

Satu utas === satu tumpukan panggilan === satu eksekusi sekaligus.

Gambar – Peretas Siang Hari

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

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 (single-threaded). Seperti yang diharapkan, baris pertama dicetak di konsol di sini, tetapi mengapa baris terakhir dicetak sebelum kode waktu habis? Mengapa proses eksekusi tidak menunggu kode batas waktu (pemblokiran) sebelum melanjutkan untuk menjalankan baris terakhir?

Beberapa utas lainnya tampaknya telah membantu kami menjalankan batas waktu itu karena kami cukup yakin utas hanya dapat melaksanakan satu tugas tunggal pada titik waktu mana pun.

Mari kita mengintip ke dalam Kode Sumber V8 untuk sementara.

Tunggu apa??!!! Tidak ada fungsi timer di V8, tidak ada DOM? Tidak ada acara? Tidak AJAX?…. Ya ampun!!!

Acara, DOM, penghitung waktu, dll. Bukan merupakan bagian dari implementasi inti JavaScript, JavaScript benar-benar sesuai dengan spesifikasi Script Ecma dan berbagai versi sering disebut sesuai dengan Spesifikasi Script Ecma (ES X).

Alur Kerja Eksekusi

Acara, penghitung waktu, permintaan Ajax semuanya disediakan di sisi klien oleh browser dan sering disebut sebagai Web API. Mereka adalah orang-orang yang memungkinkan JavaScript single-threaded menjadi non-blocking, bersamaan, dan asinkron! tapi bagaimana caranya?

Ada tiga bagian utama untuk alur kerja eksekusi dari setiap program JavaScript, tumpukan panggilan, API web, dan antrian Tugas.

Stack Panggilan

Tumpukan adalah struktur data di mana elemen terakhir yang ditambahkan selalu yang pertama dihapus dari tumpukan, Anda bisa menganggapnya sebagai tumpukan piring di mana hanya piring pertama yang ditambahkan terakhir yang dapat dihapus terlebih dahulu. Tumpukan Panggilan hanyalah struktur data tumpukan tempat tugas atau kode dieksekusi sesuai.

Mari kita perhatikan contoh di bawah ini;

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

Ketika Anda memanggil fungsi printSquare (), itu didorong ke tumpukan panggilan, fungsi printSquare () memanggil fungsi square (). Fungsi square () didorong ke stack dan juga memanggil fungsi multiply (). Fungsi multiplikasi didorong ke tumpukan. Karena fungsi multiply kembali dan merupakan hal terakhir yang didorong ke stack, dapatkan diselesaikan terlebih dahulu dan dihapus dari stack, 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. Ketika Call Stack menemukan fungsi API web, proses segera diserahkan ke Web API, di mana ia dieksekusi dan membebaskan Stack Panggilan untuk melakukan operasi lain selama pelaksanaannya.

Mari kembali ke contoh setTimeout kami di atas;

Ketika kita menjalankan kode, baris console.log pertama akan didorong ke stack dan kita mendapatkan output kita segera, saat sampai ke timeout, timer ditangani oleh browser dan bukan bagian dari implementasi inti V8, itu didorong ke Web API sebagai gantinya, membebaskan tumpukan sehingga dapat melakukan operasi lain.

Ketika batas waktu masih berjalan, tumpukan berlanjut ke baris tindakan berikutnya dan menjalankan console.log terakhir, yang menjelaskan mengapa kita mendapatkan yang di-output sebelum output penghitung waktu. Setelah penghitung waktu selesai, sesuatu terjadi. Log console.log kemudian timer muncul secara ajaib di tumpukan panggilan lagi!

Bagaimana?

Lingkaran Acara

Sebelum kita membahas loop acara, mari kita terlebih dahulu melihat fungsi antrian tugas.

Kembali ke contoh batas waktu kami, setelah Web API selesai menjalankan tugas, itu tidak hanya mendorongnya kembali ke Call Stack secara otomatis. Itu pergi ke Antrian Tugas. 

Antrian adalah struktur data yang bekerja pada prinsip First in First out, sehingga ketika tugas didorong ke antrian, mereka keluar dalam urutan yang sama. Tugas-tugas yang telah dieksekusi oleh API Web, yang sedang didorong ke Antrian Tugas, kemudian kembali ke Call Stack untuk mendapatkan hasilnya dicetak..

Tapi tunggu. APA SAJA THE THE LOOP THE ACARA???

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

Perulangan acara adalah proses yang menunggu untuk Call Stack menjadi jelas sebelum mendorong callback dari Task Queue ke Call Stack. Setelah Stack jelas, loop peristiwa memicu dan memeriksa Antrian Tugas untuk callback yang tersedia. Jika ada, itu mendorongnya ke Call Stack, menunggu Call Stack menjadi jelas kembali, 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 Antrian Tugas.

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 bawah tenda dan bagaimana JavaScript dapat berjalan secara bersamaan dan tidak sinkron hanya dengan satu utas.

JavaScript selalu sesuai permintaan, dan jika Anda ingin tahu, saya akan menyarankan Anda untuk memeriksanya Udemy tentu saja.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map