Mengatasi Maximum Call Stack Size Exceeded

 

Oke, bayangkan browser itu kayak restoran cepat saji.
Call stack itu dapurnya. Kalau pesanan datang bertubi-tubi tanpa henti, koki bakal kewalahan, terus dapurnya bisa meledak! 

Nah, "Maximum Call Stack Size Exceeded" itu artinya kita nyuruh JavaScript masak tanpa henti sampai dia nangis. 

Penyebab & Cara Mengatasinya

Rekursi Tanpa Henti (Alias: Dosa Programmer Pemula)

Salahnya:

function masakMie() {
    console.log("Lagi masak mie...");
    masakMie(); // Lah? Gak kelar-kelar dong?
}
masakMie(); // *BOOM!* 

JavaScript bakal nyoba masak mie sampe kiamat.

Solusinya:

function masakMie(n) {
    if (n <= 0) {
        console.log("Mienya udah jadi!");
        return;
    }
    console.log(`Masak mie ke-${n}...`);
    masakMie(n - 1);
}
masakMie(5); //  Mienya jadi, gak ada ledakan! 

Loop Tak Berujung (Alias: Mesin Waktu Tanpa Rem)

Salahnya:

function hitung(n) {
    if (n > 0) {
        console.log(n);
        hitung(n + 1); // Makin gede terus, gak pernah berhenti!
    }
}
hitung(1); // *Kiamat stack lagi!*

JavaScript bakal ngitung sampai terbakar.

Solusinya:

function hitung(n) {
    if (n <= 0) return;
    console.log(n);
    setTimeout(() => hitung(n - 1), 100); // Santai dikit, kasih napas!
}
hitung(5);

Dengan setTimeout, JavaScript gak bakal langsung overheat!

Muter di Dalam Array (Alias: Kesasar di Labirin)

Salahnya:

let data = [1, 2, 3];
data.push(data); // WOI?! Kok array masukin dirinya sendiri? 
console.log(JSON.stringify(data)); // *Boom! Stack overload!* 

JavaScript bingung, array ini kayak cermin tanpa ujung.

Solusinya:

let data = [1, 2, 3];
console.log("Maaf, gak bisa serialize array yang referensi dirinya sendiri!");

Jangan masukin array ke dalam dirinya sendiri, JavaScript bukan filosofi Zen! 

Kesimpulan

1. Jangan rekursi tanpa batas, kasih base case biar ada akhirnya.
2. Jangan bikin loop yang gak bisa berhenti.
3. Jangan bikin referensi ke diri sendiri di objek atau array.

Pokoknya, jangan bikin JavaScript overthinking!
Semoga dapur (call stack) kamu aman dari kebakaran! 

Read More

Penjelasan Detail Fungsi Callback

JavaScript

Pelajari JavaScript untuk interaktivitas website.

Fungsi callback adalah fungsi yang dikirim sebagai argumen ke fungsi lain dan akan dieksekusi setelah operasi tertentu selesai. Callback sering digunakan dalam JavaScript, terutama dalam operasi asinkron seperti pemrosesan file, permintaan HTTP, dan pengelolaan event.

Callback dalam Kode yang Diberikan

Dalam kode:

app.listen(process.env.APP_PORT, () => {
    console.log('Server berjalan...');
});

• Fungsi app.listen() bertugas untuk menjalankan server.
• Argumen kedua () => { console.log('Server berjalan...'); } adalah callback function.
• Callback ini akan dipanggil setelah server berhasil dijalankan.

Struktur Callback

Fungsi callback dalam kode tersebut berbentuk arrow function:

() => {
    console.log('Server berjalan...');
}

Bentuk lain dengan function declaration:

function callbackFunction() {
    console.log('Server berjalan...');
}

app.listen(process.env.APP_PORT, callbackFunction);

Fungsi callback ini tidak menerima parameter, karena app.listen() hanya memanggilnya setelah server mulai berjalan.

Cara Kerja Callback

1. Fungsi utama (app.listen) dipanggil
   • app.listen() mencoba menjalankan server pada port tertentu.
2. Setelah server aktif, callback dieksekusi
   • Jika server berhasil berjalan, callback akan dijalankan dan mencetak "Server berjalan..." ke terminal.

Mengapa Callback Diperlukan?

Callback memungkinkan kita untuk:

• Menjalankan kode setelah operasi selesai tanpa memblokir eksekusi program.
• Menggunakan fungsi lain sebagai parameter, sehingga kode lebih fleksibel dan modular.
• Menangani operasi asinkron, seperti memproses data dari API atau membaca file tanpa menunggu.

Contoh Lain Penggunaan Callback

1. Callback dalam setTimeout (Delay)

setTimeout(() => {
    console.log('Halo, ini callback!');
}, 2000);

• Setelah 2 detik (2000 ms), callback akan dieksekusi dan mencetak "Halo, ini callback!".

2. Callback dalam Pemrosesan Data

function prosesData(data, callback) {
    console.log(`Memproses ${data}...`);
    callback();
}

prosesData('file.txt', () => {
    console.log('Proses selesai!');
});

• Fungsi prosesData() menjalankan callback setelah mencetak teks.

3. Callback dalam Operasi File (fs Node.js)

const fs = require('fs');

fs.readFile('file.txt', 'utf8', (err, data) => {
    if (err) {
        console.error('Gagal membaca file:', err);
        return;
    }
    console.log('Isi file:', data);
});

• Callback dipanggil setelah file selesai dibaca.
• Jika terjadi error, callback menangani error tersebut.

Kesimpulan

• Callback adalah fungsi yang dipanggil setelah tugas tertentu selesai.
• Dalam kode app.listen(), callback digunakan untuk menampilkan pesan setelah server berjalan.
• Callback berguna untuk menangani operasi asinkron seperti server, database, atau pemrosesan data.

Read More