Bagaimana JavaScript Bekerja Di Balik Layar?

Mari lompat lebih dalam dan pahami eksekusi JavaScript di dalam mesin browser :

Seperti yang kita semua tahu, JavaScript adalah bahasa pemrograman single-threaded tingkat tinggi, berbasis prototipe, ditafsirkan, atau dikompilasi tepat waktu, dengan fungsi kelas satu dan model konkurensi loop peristiwa non-pemblokiran.

Dan ini semakin populer dari hari ke hari, Artikel ini dimaksudkan untuk menggali lebih dalam JavaScript dan cara kerjanya yang sebenarnya.

Gambaran

Posting blog ini ramah pemula, dan juga berguna untuk pengembang JS yang berpengalaman.
Kami akan membahas semua konsep ini secara mendetail dan menjelaskan bagaimana sebenarnya JavaScript berjalan.

Dalam posting ini, kita akan membahas konteks Eksekusi (fase pembuatan memori & fase eksekusi kode), eksekusi CallStack & mesin JavaScript, dan lingkungan Runtime-nya. Pahami juga konsep Event loop dan Stack Flow.

Ini akan menjadi panduan ikhtisar dari semua komponen inti yang terlibat dalam eksekusi skrip.
Disini kita akan membahas komponen-komponen berikut :

1. Mesin JavaScript.
2. Lingkungan Waktu Proses JavaScript.
3. Konteks Eksekusi.
4. Panggil Eksekusi Tumpukan & Aliran Tumpukan.
5. Putaran Acara.

Seperti yang mungkin Anda dengar sebelumnya, JavaScript adalah bahasa pemrograman yang ditafsirkan . Ini berarti kode sumber tidak dikompilasi menjadi kode biner sebelum dieksekusi.
Ini berarti mengeksekusi baris demi baris, tetapi tidak 100% benar.
JS adalah bahasa yang dikompilasi tepat waktu (JIT), perilaku modern ini membuatnya cepat dalam aplikasi web, jika tidak, sesuai jenis yang ditafsirkan, itu membuat aplikasi lambat untuk dirender. Jadi kami menganggap JS adalah bahasa kompilasi Just-in-time (JIT).

Mesin JavaScript hanyalah sebuah program komputer yang mengeksekusi kode JavaScript. Mesin JavaScript terpasang di semua browser modern saat ini.

Seperti : (Beberapa mesin)
# V8 adalah Mesin JavaScript untuk Chrome.
# Monyet laba-laba untuk Mozilla Firefox.
# Chakra untuk Microsoft Edge.
# Inti JavaScript untuk Safari dan sebagainya.

Seperti yang kita ketahui mesin browser Chrome “V8” sangat populer untuk JavaScript,
Ini terdiri dari dua komponen utama:
1: Call Stack ( diskusikan nanti secara detail, sabar.. )
2: Heap : Ini adalah ruang memori yang tidak terstruktur di mana semua objek yang berguna berada disimpan.

Itu JavaScript Runtime Environment (JRE):

Seperti yang kita bahas tentang mesin JS, tetapi mesin JS- berjalan di dalam JRE bersama dengan beberapa komponen lainnya. seperti beberapa permintaan dan panggilan asinkron.
Komponen terdaftar sebagai:

1. Mesin JS
2. API web
3. Antrian Callback atau antrean pesan
4. Putaran acara

Ketika kode JS dijalankan, konteks eksekusi global (GEC) dibuat.
Eksekusi ini dibuat dalam 2 fase:
1: Fase pembuatan memori &
2: Fase eksekusi kode.

Mari kita ambil contoh;

Untuk cuplikan kode di atas ini,
Pertama, GEC dibuat & di mana fase memori dibuat dan menetapkan nilai yang tidak terdefinisi untuk semua variabel & menempatkan seluruh blok fungsi {} sebagai nilai fnxn di ruang memorinya.

Kedua, sekarang di fase ke-2, yaitu fase eksekusi kode, ia mulai menelusuri seluruh kode baris demi baris.
Dan itu menemukan var a = 3, jadi itu menetapkan 3 ke variabel yang tidak terdefinisi , dan
pindah ke baris berikutnya dan menetapkan 4 ke variabel b yang tidak terdefinisi. Sekarang pindah ke baris berikutnya untuk fungsi add(), tidak ada yang dieksekusi, jadi tetap sama, dan pindah ke baris berikutnya untuk var c.

Pada baris ini, konteks eksekusi baru dibuat, beri nama sebagai konteks eksekusi lokal untuk fungsi add(3,4), sekarang lagi 2 fase dibuat,
Untuk fase pembuatan memori , itu menetapkan undefined untuk variabel num1, num2 & hasil. Kemudian pada fase eksekusi kode , dimulai baris demi baris di blok fungsi {} dari add().
Ditemukan menetapkan 3 untuk num1 & 4 untuk num2,
Dan kemudian untuk var result = num1+num2, dan menetapkan 7 sebagai variabel hasil.
Setelah itu kembalikan hasil, dan kontrol eksekusi bergerak kembali ke baris 9 pada
var c = 7.

Ketika kata kunci kembali ditemui, itu mengembalikan kontrol ke baris yang dipanggil dan juga konteks eksekusi fungsi dihapus.
Ini pindah ke baris berikutnya, baris 10: itu menggabungkan nilai c.

Inilah bagaimana konteks eksekusi benar-benar bekerja di belakang layar.

Javascript mengelola pembuatan dan penghapusan konteks eksekusi kode dengan bantuan Call Stack ( kita akan membahasnya nanti pada call stack )

Tumpukan Panggilan :

Call Stack mempertahankan urutan pelaksanaan konteks eksekusi . Ia juga dikenal sebagai Program Stack, Control Stack, Runtime stack, Machine Stack, Execution context stack.
Dan kita tahu JS adalah bahasa pemrograman berulir tunggal , artinya memiliki satu tumpukan dan mengeksekusi satu baris dalam satu waktu.

Hanya mengambil referensi kode di atas dan menjelaskan cara kerja Call stack untuk potongan kode yang sama.

Di sini, GEC dibuat dan jatuh dalam tumpukan, lalu konteks eksekusi lokal berikutnya muncul ke tumpukan lalu setelah eksekusi muncul dan kembali ke GEC.
Kemudian console.log(c) pop in dan setelah eksekusi pop out, lalu pinter kembali ke GEC,
Setelah eksekusi selesai GEC juga pop out dari stack dan stack menjadi kosong sebagai kondisi IDLE.

Putaran Acara :

Bahasa JavaScript juga dapat dilihat dalam dua cara — sinkron dan asinkron.

Dalam JS sinkron, kode mengeksekusi baris demi baris, yang berarti secara berurutan, &
Di JS asinkron, tidak ada yang berurutan, yang berarti baris kode akan diabaikan dan dieksekusi nanti sesuai perilaku yang sebagian besar dikenal sebagai API web.

Jadi event loop digunakan untuk menangani bagian async dengan antrian panggilan balik, dan menunggu tumpukan kosong kemudian dikirim ke tumpukan untuk dieksekusi.

Event Loop adalah fitur di JS yang terus menerus memeriksa apakah tumpukan utama kosong. Dan ketika kosong, ia memeriksa Antrian Panggilan Balik. Jika ada kode dalam antrian yang akan dieksekusi, kode tersebut ditransfer satu per satu ke tumpukan panggilan. Setelah kode dieksekusi, ia meninggalkan tumpukan dan yang berikutnya dalam antrean muncul hingga antrean kosong.

Teman-teman mari kita selesaikan semuanya dan temui Anda di posting mendatang……….