JavaScript Shortcuts: Panduan Dasar

Menyajikan perhatian Anda adalah terjemahan dari artikel oleh Parathan Thiyagalingam yang diterbitkan di medium.freecodecamp.org. Ingin tahu cara kerja penutupan JavaScript? Lihat di bawah kucing!


Foto Austin Distel dengan Unsplash

Penutupan adalah kombinasi dari semua variabel dalam lingkup pada saat fungsi dibuat. Untuk menggunakan penutupan, Anda harus membuat fungsi bersarang, yaitu fungsi di dalam fungsi. Fungsi dalam akan memiliki akses ke variabel dalam lingkup fungsi luar bahkan setelah fungsi luar selesai. (Ini adalah penutupan yang menyediakan akses ini.) Setiap kali fungsi dibuat, penutupan dibuat.

Sebelum Anda mulai memahami konsep penutupan, pertimbangkan rantai lingkup apa dalam JavaScript.

Sebagai aturan, ada dua jenis area visibilitas: global dan lokal.

Dalam JavaScript, variabel di dalam suatu fungsi tidak dapat diakses secara eksternal - tidak seperti, misalnya, variabel di dalam blok (dalam kondisi seperti if dan while ).

Berdasarkan ini, fungsi dalam JavaScript memiliki ruang lingkup, tetapi blok tidak.

 var a = 10; function app(){ var b = 2; console.log(a); // 10 console.log(b); // 2 } console.log(b); // ReferenceError: b is not defined app(); 

Seperti yang sudah kita ketahui, a adalah variabel global, dan b adalah lokal, yaitu, hanya digunakan oleh fungsi app . Di luar lingkup lokal, kami tidak memiliki akses ke variabel lokal.

Cara menggunakan fungsi bersarang (fungsi di dalam suatu fungsi)

 var a = 10; function app(){ var b = 2; var d = 3; function add(){ var c = a + b; } return add; } var x = app(); console.dir(x); 

Pada contoh di atas, app adalah fungsi induk, add adalah fungsi anak.

• Alih-alih console.log, console.dir digunakan untuk menampilkan semua properti dari objek yang dipilih.
• Variabel x ditugaskan ke fungsi app , yang kemudian mengembalikan fungsi add . Ini memungkinkan Anda untuk melihat semua properti dari objek fungsi add .

Jika Anda membuka konsol di browser, Anda akan menemukan objek Closure di dalam array data Scopes .



Karena fungsi add internal memiliki akses ke variabel b dan d yang termasuk dalam fungsi eksternal, kedua variabel ini akan ditambahkan ke objek Closure sebagai referensi.
Pertimbangkan contoh penutupan lain.

 var a = 10; var startFunc; function app(){ var b = 2; function add(){ var c = a + b; console.log(c); } startFunc = add(); } app(); // Invoke the app function startFunc; // as the app function invoked above will assign the add function to startFunc & console the value of c 

• startFunc global startFunc ditugaskan fungsi add , yang merupakan anak dari app fungsi induk.
• Ini menjadi mungkin hanya setelah memanggil fungsi aplikasi. Jika tidak, fungsi startFunc akan berperilaku seperti variabel global tanpa nilai yang ditetapkan.

Cara menggunakan penutupan dalam JavaScript

Banyak dari kita, menggunakan penutupan ketika menulis kode, tidak sepenuhnya mengerti mengapa mereka melakukan ini. JavaScript tidak memiliki pengubah publik , terlindungi, dan pribadi yang ditemukan dalam bahasa pemrograman berorientasi objek. Oleh karena itu, untuk memblokir akses ke namespace untuk kode eksternal, kami terpaksa menggunakan bantuan fungsi.

Dan karena kita berbicara tentang fungsi - fungsi segera dipanggil (IIFE) dimulai segera setelah pengumuman. Dia bahkan tidak perlu dipanggil.

Sintaks IIFE terlihat seperti ini:

 (function(){ //variables & scope that inside the function })(); 

Pertimbangkan contoh ini:

 var studnetEnrollment = (function () { //private variables which no one can change //except the function declared below. var count = 0; var prefix = "S"; // returning a named function expression function innerFunc() { count = count + 1; return prefix + count; }; return innerFunc; })(); var x = studnetEnrollment(); // S1 console.log(x); var y = studnetEnrollment(); // S2 console.log(y); 

count dan prefix adalah dua variabel pribadi yang tidak dapat diubah. Akses ke mereka terbuka hanya untuk fungsi internal (dalam kasus kami, ini adalah fungsi innerFunc ).

• Pertama kali fungsi studentEnrollment dipanggil, fungsi studentEnrollment meningkatkan nilai variabel count menjadi 1.
• Kedua kalinya, count bertambah dari 1 menjadi 2.
• Semua ini hanya dimungkinkan melalui penutupan.

Kesimpulan

Penutupan adalah seperangkat variabel dari fungsi eksternal, karena ruang lingkup fungsi internal mendapatkan akses ke variabel-variabel ini. Ini melindungi namespace global.

Fungsi penutupan memungkinkan pengembang untuk menulis kode bersih - seperti dalam bahasa pemrograman berorientasi objek, kode di mana variabel global dan lokal tidak bingung.

---

Selamat coding!