Posting ini dimaksudkan untuk menggali beberapa konsep javascript yang lebih penting untuk membantu Anda menulis kode yang lebih baik.

Jika Anda menyukai mode gelap, Anda dapat membaca artikel ini di sini .

Callstack adalah struktur data LIFO ( Last In First Out ). Setiap kali fungsi dipanggil, konteks eksekusi dibuat dan didorong ke atas tumpukan panggilan. Saat eksekusi selesai, maka konteks eksekusi dikeluarkan dari tumpukan panggilan.

Javascript adalah bahasa utas tunggal, artinya ia memiliki satu tumpukan panggilan dan oleh karena itu ia hanya dapat melakukan satu hal dalam satu waktu. Sekarang satu hal penting yang ingin saya sebutkan dengan cepat adalah javascript asinkron dimungkinkan karena sekumpulan api browser seperti antrian panggilan balik. Ini sebenarnya bukan bagian dari bahasa javascript.

Ketika sebuah fungsi dipanggil, konteks eksekusi dibuat dan diletakkan di atas tumpukan panggilan, dan ketika fungsi selesai, itu dikeluarkan dari tumpukan.

Setiap entri dalam tumpukan panggilan disebut Stack Frame .

Bagaimana konteks eksekusi ditambahkan ke tumpukan

Mari kita ambil fungsi sederhana:

function foo() {
  bar()
}

function bar() {
  console.log('bar')
}

foo()

      
                

                    
                    
                
            

Mari kita lihat bagaimana kesalahan itu terlihat yang biasanya kita temui di konsol kita ketika ada sesuatu yang salah:

function foo() {
  bar()
}

function bar() {
  baz()
}

function baz() {
  throw new Error('this is an error')
}

foo()

Meniup tumpukan

Ini terkadang terjadi dengan perulangan atau rekursi, dan semua itu berarti bahwa tumpukan panggilan meluap. Ini terjadi karena konteks eksekusi terus ditambahkan dan ada batasan untuk ini.

function foo() {
  foo()
}

foo()

Satu contoh terakhir untuk mengarahkan poin ke rumah

Perhatikan setiap bingkai tumpukan pada ilustrasi di bawah ini.

function foo() {
  console.log('hi')
  bar()
  console.log('bye')
}

function bar() {
  console.log('bar')
  baz()
}

function baz() {
  console.log('baz')
}

foo()