JavaScript Academy · Pelajaran

Tumpukan Pemanggilan

Lihat cara pelacakan pemanggilan fungsi.

Tumpukan Pemanggilan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa Itu Tumpukan Pemanggilan

Tumpukan pemanggilan adalah cara JavaScript melacak fungsi yang sedang berjalan dan tujuan pengembaliannya. Setiap pemanggilan fungsi didorong ke bagian atas; setelah selesai, pemanggilan tersebut dikeluarkan.

Strukturnya mengikuti LIFO: Masuk Terakhir, Keluar Pertama.

Mendorong dan Mengeluarkan

Saat Anda memanggil fungsi, sebuah bingkai tumpukan didorong. Saat fungsi tersebut mengembalikan nilai, bingkainya dikeluarkan. Perhatikan urutan catatan saat pemanggilan dibuat bersarang.

function first() {
  console.log('first start');
  second();
  console.log('first end');
}

function second() {
  console.log('second');
}

first();

LIFO dalam Praktik

Fungsi yang paling baru dipanggil harus selesai sebelum fungsi di bawahnya dapat melanjutkan. Pemanggilan bagian dalam selesai terlebih dahulu meskipun dimulai terakhir.

function a() {
  console.log('enter a');
  b();
  console.log('exit a');
}
function b() {
  console.log('enter b');
  c();
  console.log('exit b');
}
function c() {
  console.log('c runs');
}
a();

Sinkron Berarti Memblokir

JavaScript menjalankan satu hal pada satu waktu dalam satu utas. Selama tumpukan memiliki bingkai, tidak ada hal lain yang berjalan. Kode sinkron memblokir sampai selesai.

console.log('start');

function busy() {
  let sum = 0;
  for (let i = 0; i < 1000; i++) sum += i;
  return sum;
}

console.log(busy());
console.log('end');

Nilai Kembalian Mengalir ke Bawah

Saat setiap bingkai dikeluarkan, nilai kembaliannya mengalir kembali ke pemanggil yang menunggu di bawahnya dalam tumpukan.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}

console.log(sumOfSquares(3, 4));

Rekursi Memperbesar Tumpukan

Setiap pemanggilan rekursif menambahkan bingkai lain. Tumpukan terus bertambah sampai kasus dasar tercapai, lalu dibongkar bingkai demi bingkai.

function countdown(n) {
  if (n === 0) {
    console.log('liftoff');
    return;
  }
  console.log(n);
  countdown(n - 1);
}

countdown(3);

Luapan Tumpukan

Tumpukan memiliki ukuran yang terbatas. Rekursi tanpa kasus dasar terus mendorong bingkai sampai mesin memunculkan RangeError: Ukuran maksimum tumpukan pemanggilan terlampaui.

function endless(n) {
  return endless(n + 1);
}

try {
  endless(1);
} catch (e) {
  console.log(e.name);
}

Urutan Eksekusi Dapat Diprediksi

Karena tumpukan mengikuti LIFO secara ketat dan bersifat sinkron, urutan catatan sinkron selalu deterministik. Anda dapat menelusurinya secara manual.

function outer() {
  console.log(1);
  inner();
  console.log(3);
}
function inner() {
  console.log(2);
}
outer();
console.log(4);

Di Mana Asinkron Masuk

Tumpukan pemanggilan hanya menjalankan kode sinkron. Fungsi seperti setTimeout menyerahkan pekerjaan kepada lingkungan, yang kemudian menempatkan panggilan balik dalam antrean. Panggilan balik tersebut hanya berjalan setelah tumpukan kosong.

Inilah jembatan menuju perulangan peristiwa.

console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');

Tumpukan Harus Dikosongkan Terlebih Dahulu

Bahkan pengatur waktu dengan jeda nol milidetik tetap menunggu semua kode sinkron selesai. Panggilan balik tidak dapat berjalan selama masih ada bingkai di tumpukan.

console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');

Mengapa Tumpukan Pemanggilan Penting

Memahami tumpukan pemanggilan menjelaskan mengapa perulangan sinkron yang panjang membekukan halaman, mengapa rekursi dapat menyebabkan luapan, dan mengapa panggilan balik asinkron selalu berjalan terakhir. Tumpukan ini merupakan dasar bagi semua hal dalam perulangan peristiwa.

function compute() {
  return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');

Pemeriksaan Singkat

Prinsip pengurutan apa yang diikuti tumpukan pemanggilan?

Ringkasan: Tumpukan Pemanggilan

Anda telah mempelajari inti eksekusi mesin:

Tumpukan pemanggilan melacak fungsi yang sedang berjalan dalam urutan LIFO.
JavaScript berjalan dalam satu utas, dan kode sinkron memblokir.
Rekursi memperbesar tumpukan dan dapat menyebabkan luapan.
Panggilan balik asinkron menunggu sampai tumpukan kosong, yang mengantarkan kita ke perulangan peristiwa.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Tumpukan Pemanggilan” gratis?

Ya — teks lengkap “Tumpukan Pemanggilan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Tumpukan Pemanggilan”?

Lihat cara pelacakan pemanggilan fungsi. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Tumpukan Pemanggilan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy