Execution Context

#webdev #javascript #frontend #architecture

Bayangkan Execution Context sebuah dapur.

sebelum kamu memulai memasak(mengeksekusi code)
kamu perlu ruang kerja, peralatan(variable)
resep(functions)

jadi disini Execution context adalah tahap persiapan atau "set up" tersebut.

First, Jenis "Kotak"

perlu kamu ketahui JavaScript tidak menjalankan kode dalam satu tumpukan raksasa yang berantakan. Ia membuat konteks yang spesifik:

Global Execution Context (GEC):Ini adalah kotak default. Jika kode Kamu tidak berada di dalam fungsi, maka ia ada di sini. GEC membuat dua hal secara otomatis: objek window (di browser) dan kata kunci spesial this.
Functional Execution Context (FEC): Setiap kali Kamu memanggil fungsi, JavaScript membuat kotak mini baru khusus untuk fungsi tersebut. Di sinilah variabel dan logika spesifik tugas tersebut disimpan.

Second, The Two Phases (The "Magic" Trick)

JavaScript tidak sekadar membaca kode baris-demi-baris dari atas ke bawah dan langsung mengeksekusinya. Ia melakukan dua kali lintasan di dalam "kotak" Kamu.secara instan.

Fase A: Fase Penciptaan (Alokasi Memori)
Sebelum satu baris kode pun benar-benar "berjalan", mesin (engine) memindai kode kamu dan:

Membuat Objek Global (window).

Menyiapkan Ruang Memori untuk variabel dan fungsi.

Hoisting: Ia mengatur deklarasi variabel menjadi undefined dan menyimpan seluruh deklarasi fungsi ke dalam memori.

Fase B: Fase Eksekusi
Baru di tahap ini mesin menyisir kode baris-demi-baris. Ia memberikan nilai aktual ke variabel Kamu (misalnya, mengubah undefined menjadi "Halo Dunia") dan menjalankan fungsi-fungsinya.

Third, Call Stack: Cara JS Menjaga Keteraturan

Karena JavaScript bersifat single-threaded (hanya bisa melakukan satu hal dalam satu waktu), ia menggunakan Call Stack untuk melacak "kotak" mana yang sedang dikerjakan.

Bayangkan setumpuk keripik Pringles:

Global Context adalah keripik paling bawah.

Saat Anda memanggil fungsi A(), keripik baru (Context A) diletakkan di atasnya.

Jika fungsi A memanggil fungsi B, Context B diletakkan di atas A.

Setelah fungsi B selesai, ia "dibuang" (popped) dari tumpukan. Kita kembali ke A.