emka.web.id

JavaScript adalah bahasa pemrograman serbaguna yang mendukung berbagai paradigma pemrograman. Salah satu fitur JavaScript yang paling kuat adalah penutupan, yang memungkinkan pengembang membuat kode yang kuat dan fleksibel. Pada artikel ini, kita akan mengeksplorasi apa itu closure dan bagaimana cara kerjanya, beserta beberapa contohnya.
AdvertisementApa itu Closure di JavaScript?

A closure adalah fungsi dalam yang memiliki akses ke variabel, parameter, dan argumen fungsi luar. Fungsi dalam dapat mengakses variabel-variabel ini bahkan setelah fungsi luar dikembalikan. Penutupan memungkinkan Anda untuk mengenkapsulasi dan melindungi data dalam suatu fungsi, mencegahnya diakses oleh fungsi lain.

Penutupan dibuat ketika suatu fungsi didefinisikan di dalam fungsi lain dan dikembalikan sebagai nilai. Fungsi yang dikembalikan mempertahankan referensi ke variabel dalam fungsi luar, bahkan setelah fungsi luar dikembalikan. Ini berarti bahwa fungsi dalam dapat mengakses dan memanipulasi variabel-variabel tersebut.

Penutupan dapat digunakan dalam berbagai situasi, seperti membuat variabel dan metode privat, mengimplementasikan callback dan event handler, dan mengelola negara.
Contoh 1: Variabel dan Metode Privat

Salah satu dari penggunaan penutupan yang paling umum adalah membuat variabel dan metode pribadi. Variabel dan metode pribadi tidak dapat diakses dari luar fungsi, membuatnya lebih aman dan tidak rentan terhadap kesalahan.


function counter() { biarkan hitung = 0; peningkatan fungsi() { hitung++; console.log(jumlah); } kenaikan pengembalian; } const pertambahanJumlah = penghitung(); pertambahanHitung(); // 1 pertambahanHitung(); // 2 pertambahanHitung(); // 312345678910111213141516functioncounter(){  biarkan hitung=0; functionincrement(){    count++; console.log(jumlah); }    returnincrement;} constincrementCount=counter(); incrementCount();// 1incrementCount();// 2incrementCount();// 3


Pada contoh di atas, kita telah membuat fungsi counter yang mengembalikan fungsi increment. Variabel hitungan didefinisikan dalam fungsi penghitung tetapi hanya dapat diakses dari fungsi kenaikan. Setiap kali fungsi inkremen dipanggil, ini meningkatkan variabel hitungan dan mencatat nilai baru ke console.
Example 2: Callback dan Penangan Peristiwa

Penutupan juga dapat digunakan untuk mengimplementasikan panggilan balik dan pengendali peristiwa. Callback adalah fungsi yang diteruskan sebagai argumen ke fungsi lain dan dipanggil saat fungsi lain selesai. Penangan peristiwa adalah fungsi yang dipanggil sebagai respons terhadap peristiwa tertentu, seperti klik tombol atau pengiriman formulir.


function fetchData(url, callback) { ambil (url) .then(respons => response.json()) .then(data => callback(data)) .catch(kesalahan => konsol.kesalahan(kesalahan)); } fetchData(`https://api.example.com/data`, function(data) { console.log(data); });12345678910functionfetchData(url,callback){  fetch(url)    .then(response=>response.json())    .then(data=>callback(data))    .catch(error=>console.error(error)) ;} fetchData(`https://api.example.com/data`,function(data){  console.log(data);});


Pada contoh di atas, kami telah membuat fungsi fetchData yang menggunakan URL dan fungsi panggilan balik sebagai argumen. Fungsi fetchData menggunakan API pengambilan untuk mengambil data dari URL yang ditentukan, lalu meneruskan data tersebut ke fungsi callback. Fungsi callback didefinisikan sebagai fungsi anonim yang mencatat data ke console.
Contoh 3: Mengelola State

Closures juga dapat digunakan untuk mengelola status dalam sebuah program. Status mengacu pada data yang menggambarkan kondisi program saat ini, seperti input pengguna atau pengaturan aplikasi.


function createCounter(initialValue = 0) { biarkan hitung = Nilai awal; kembali { kenaikan() { hitung++; console.log(jumlah); }, pengurangan() { menghitung--; console.log(jumlah); }, mengatur ulang() { hitung = Nilai awal; console.log(jumlah); } }; } const penghitung = createCounter(5); counter.increment(); // 6 counter.decrement(); // 5 counter.reset(); // 5123456789101112131415161718192021222324functioncreateCounter(initialValue=0){  biarkan count=initialValue; kembalikan{    increment(){      count++; console.log(jumlah); },    penurunan(){      jumlah--; console.log(jumlah); },    reset(){      count=initialValue; console.log(jumlah); }  };} constcounter=createCounter(5); counter.increment();// 6counter.decrement();// 5counter.reset();// 5


Dalam contoh di atas, kita telah membuat fungsi createCounter yang mengembalikan objek dengan tiga metode: kenaikan, penurunan, dan reset. Metode mengakses dan memanipulasi variabel hitungan yang didefinisikan dalam fungsi createCounter. Nilai awal count diatur ke parameter initialValue diteruskan ke createCounter. Setiap metode mengembalikan nilai hitungan yang diperbarui dan mencatatnya ke konsol.

Objek penghitung yang dikembalikan oleh createCounter mempertahankan referensi ke variabel hitungan dalam fungsi createCounter, memungkinkan metode kenaikan, penurunan, dan reset untuk mengakses dan mengubah keadaan program.
Kesimpulan

Kesimpulan, penutupan adalah fitur hebat JavaScript yang memungkinkan Anda membuat kode yang fleksibel dan aman. Penutupan dibuat ketika suatu fungsi didefinisikan di dalam fungsi lain dan dikembalikan sebagai nilai. Fungsi yang dikembalikan mempertahankan referensi ke variabel dalam fungsi luar, bahkan setelah fungsi luar dikembalikan. Penutupan dapat digunakan dalam berbagai situasi, seperti membuat variabel dan metode pribadi, mengimplementasikan callback dan event handler, dan mengelola status. Dengan menggunakan penutupan dalam kode JavaScript Anda, Anda dapat menulis aplikasi yang lebih kuat dan dapat dipelihara.



Referensi tecadmin.comArtikel Diperbarui pada: March 18, 2023
Kontributor: Syauqi Wiryahasana
Model: Haifa Manik Intani