Apa Itu Penutupan JavaScript dan Bagaimana Anda Menulisnya?

JavaScript adalah salah satu bahasa pemrograman yang paling sulit untuk dikuasai. Kadang-kadang bahkan pengembang senior tidak dapat memprediksi keluaran dari kode yang mereka tulis. Salah satu konsep yang lebih membingungkan dalam JavaScript adalah penutupan. Pemula biasanya tersandung pada konsepnya—jangan khawatir. Artikel ini perlahan-lahan akan memandu Anda melalui contoh-contoh dasar untuk membantu Anda lebih memahami penutupan. Mari kita mulai.

Apa Itu Penutupan?

Penutupan adalah struktur fungsi dan lingkungan leksikalnya, termasuk variabel apa pun dalam ruang lingkup fungsi pada pembuatan penutupan. Dalam istilah yang lebih sederhana, pertimbangkan fungsi luar dan fungsi dalam. Fungsi dalam akan memiliki akses ke ruang lingkup fungsi luar.

Sebelum melihat beberapa contoh penutupan JavaScript, Anda harus memahami pelingkupan leksikal.

Apa itu Lingkungan Leksikal?

Lingkungan leksikal adalah memori lokal bersama dengan lingkungan induknya. Lihat contoh yang diberikan di bawah ini dan tebak output dari kode berikut:

fungsi luar(){ 
 misalkan a = 10;
 console.log (y);
 batin();
 fungsi dalam(){
 console.log (a);
 console.log (y);
 }
}
misalkan y = 9;
luar();

Outputnya akan menjadi 9, 10, 9. Fungsi dalam memiliki akses ke variabel induknya, the luar() fungsi. Oleh karena itu, batin() fungsi dapat mengakses variabel a. Itu batin() fungsi juga dapat mengakses variabel y karena konsep rantai lingkup.

Induk dari fungsi luar adalah global, dan induk dari batin() fungsinya adalah luar() fungsi. Oleh karena itu, batin() fungsi memiliki akses ke variabel orang tuanya. Jika Anda mencoba mengakses variabel sebuah dalam lingkup global, itu akan menampilkan kesalahan. Oleh karena itu, Anda dapat mengatakan bahwa batin() fungsi secara leksikal di dalam luar() fungsi, dan induk leksikal dari luar() fungsinya bersifat global.

Contoh Penutupan JavaScript Dijelaskan

Karena Anda telah belajar tentang lingkungan leksikal, Anda dapat dengan mudah menebak output dari kode berikut:

fungsi a(){
 misalkan x = 10;
 fungsi b(){
 console.log (x);
 }
 B();
}
sebuah();

Keluarannya adalah 10. Meskipun Anda mungkin tidak menebaknya pada pandangan pertama, ini adalah contoh penutupan dalam JavaScript. Penutupan tidak lebih dari sebuah fungsi dan lingkungan leksikalnya.

Mari kita pertimbangkan contoh di mana ada tiga fungsi yang bersarang di dalam satu sama lain:

fungsi a(){ 
 misalkan x = 10;
 fungsi b(){ 
 fungsi c(){
 fungsi d(){
 console.log (x);
 }
 D();
 }
 C();
 }
 B();
}
sebuah();

Apakah itu masih disebut penutupan? Jawabannya iya. Sekali lagi, penutupan adalah fungsi dengan induk leksikalnya. Induk leksikal dari fungsi D() adalah C(), dan karena konsep rantai ruang lingkup, fungsi D() memiliki akses ke semua variabel dari fungsi luar dan yang global.

Lihatlah contoh menarik lainnya:

fungsi x(){
 misalkan a = 9;
 kembalikan fungsi y(){
 console.log (a); 
 }
}
misalkan b = x();

Anda dapat mengembalikan fungsi di dalam fungsi, menetapkan fungsi ke variabel, dan meneruskan fungsi di dalam a fungsi dalam JavaScript. Inilah keindahan bahasa. Bisakah Anda menebak apa hasilnya jika Anda mencetak variabel? B? Ini akan mencetak fungsi y(). Fungsinya x() mengembalikan fungsi y(). Oleh karena itu, variabel B menyimpan sebuah fungsi. Sekarang, dapatkah Anda menebak apa yang akan terjadi jika Anda memanggil variabel? B? Ini mencetak nilai variabel sebuah: 9.

Anda juga dapat mencapai penyembunyian data menggunakan penutupan. Untuk pemahaman yang lebih baik, pertimbangkan contoh dengan tombol yang memiliki id bernama "tombol" di browser. Mari kita lampirkan event listener klik padanya.

Sekarang Anda perlu menghitung berapa kali tombol diklik. Ada dua cara untuk melakukannya.

1. Buat jumlah variabel global dan tingkatkan saat klik. Tetapi metode ini memiliki kekurangan. Sangat mudah untuk membuat modifikasi pada variabel global karena mereka mudah diakses.

   Klik saya
   
   

2. Kita dapat mencapai penyembunyian data dengan menggunakan penutupan. Anda dapat membungkus seluruh tambahkanEventListener() fungsi di dalam fungsi. Itu membuat penutupan. Dan setelah membuat penutupan, Anda dapat membuat menghitung variabel dan tingkatkan nilainya onclick. Dengan menggunakan metode ini, variabel akan tetap berada dalam lingkup fungsional, dan tidak ada modifikasi yang dapat dilakukan.

   Klik saya
   
   

Terkait: Pahlawan Tersembunyi Situs Web: Memahami DOM

Mengapa Penutupan Penting?

Penutupan sangat penting tidak hanya dalam hal JavaScript, tetapi juga dalam bahasa pemrograman lain. Mereka berguna dalam banyak skenario di mana Anda dapat membuat variabel dalam lingkup pribadinya atau menggabungkan fungsi, di antara kasus lainnya.

Perhatikan contoh komposisi fungsi ini:

const kalikan = (a, b) => a*b;
const multiplyBy2 = x => kalikan (10, x);
console.log (multiplyBy2(9));

Kami dapat menerapkan contoh yang sama menggunakan penutupan:

const kalikan = fungsi (a){
 mengembalikan fungsi (b){
 kembali a*b
 }
}
const perkalianBy2 = perkalian (2);
console.log (multiplyBy2(10))

Fungsi dapat menggunakan penutupan dalam skenario berikut:

1. Untuk mengimplementasikan fungsi kari
2. Untuk digunakan untuk menyembunyikan data
3. Untuk digunakan dengan Pendengar Acara
4. Untuk digunakan dalam metode setTimeout()

Anda Tidak Harus Menggunakan Penutupan yang Tidak Perlu

Sebaiknya hindari penutupan kecuali benar-benar diperlukan karena dapat menurunkan kinerja aplikasi Anda. Menggunakan penutupan akan menghabiskan banyak memori, dan jika penutupan tidak ditangani dengan benar, dapat menyebabkan kebocoran memori.

Variabel tertutup tidak akan dibebaskan oleh pengumpul sampah JavaScript. Saat Anda menggunakan variabel di dalam penutupan, memori tidak dibebaskan oleh pengumpul sampah karena browser merasa bahwa variabel masih digunakan. Oleh karena itu, variabel ini menghabiskan memori dan menurunkan kinerja aplikasi.

Berikut adalah contoh yang menunjukkan bagaimana variabel di dalam penutupan tidak akan menjadi sampah yang dikumpulkan.

 fungsi f(){
 konstanta x = 3;
 kembalikan fungsi dalam(){
 console.log (x);
 }
 }
 F()();

Itu variabel x di sini menghabiskan memori meskipun tidak sering digunakan. Pengumpul sampah tidak akan dapat mengosongkan memori ini karena memori ini berada di dalam penutup.

JavaScript Tidak Ada Habisnya

Menguasai JavaScript adalah tugas yang tak ada habisnya, karena ada begitu banyak konsep dan kerangka kerja yang biasanya tidak dieksplorasi oleh pengembang berpengalaman itu sendiri. Anda dapat secara signifikan meningkatkan pegangan Anda pada JavaScript dengan mempelajari dasar-dasarnya dan sering mempraktikkannya. Iterator dan generator adalah beberapa konsep yang ditanyakan wawancara selama wawancara JavaScript.

Pengantar Iterator dan Generator dalam JavaScript

Pahami metode iterator dan generator di JS.

Baca Selanjutnya

Tentang Penulis