Penutupan JavaScript

Dalam tutorial ini, Anda akan belajar tentang penutupan JavaScript dengan bantuan contoh.

Sebelum Anda mempelajari tentang closure, Anda perlu memahami dua konsep:

• Fungsi Bersarang
• Mengembalikan fungsi

Fungsi Bertingkat JavaScript

Dalam JavaScript, suatu fungsi juga dapat berisi fungsi lain. Ini disebut fungsi bersarang. Sebagai contoh,

 // nested function example // outer function function greet(name) ( // inner function function displayName() ( console.log('Hi' + ' ' + name); ) // calling inner function displayName(); ) // calling outer function greet('John'); // Hi John

Pada program di atas, greet()fungsi tersebut berisi displayName()fungsi di dalamnya.

Mengembalikan Fungsi

Di JavaScript, Anda juga dapat mengembalikan fungsi di dalam fungsi. Sebagai contoh,

 function greet(name) ( function displayName() ( console.log('Hi' + ' ' + name); ) // returning a function return displayName; ) const g1 = greet('John'); console.log(g1); // returns the function definition g1(); // calling the function

Keluaran

 function displayName () (console.log ('Hi' + '' + name);) Hai John

Dalam program di atas, greet()fungsi mengembalikan displayNamedefinisi fungsi.

Di sini, definisi fungsi yang dikembalikan diberikan ke variabel g1. Saat Anda mencetak g1 menggunakan console.log(g1), Anda akan mendapatkan definisi fungsi.

Untuk memanggil fungsi yang disimpan dalam variabel g1, kami menggunakan g1()tanda kurung.

Penutupan JavaScript

Dalam JavaScript, closure menyediakan akses ke cakupan luar suatu fungsi dari dalam fungsi dalam, bahkan setelah fungsi luar ditutup. Sebagai contoh,

 // javascript closure example // outer function function greet() ( // variable defined outside the inner function let name = 'John'; // inner function function displayName() ( // accessing name variable return 'Hi' + ' ' + name; ) return displayName; ) const g1 = greet(); console.log(g1); // returns the function definition console.log(g1()); // returns the value

Keluaran

 function displayName () (// mengakses variabel nama return 'Hi' + '' + name;) Hi John

Dalam contoh di atas, ketika greet()fungsi dipanggil, ia mengembalikan definisi fungsi dari displayName.

Di sini, g1adalah referensi ke displayName()fungsinya.

Saat g1()dipanggil, ia masih memiliki akses ke greet()fungsi tersebut.

Saat kami menjalankan console.log(g1), ini mengembalikan definisi fungsi.

Konsep closure ada untuk bahasa pemrograman lain seperti Python, Swift, Ruby, dll.

Mari kita lihat contoh lainnya.

 // closure example function calculate(x) ( function multiply(y) ( return x * y; ) return multiply; ) const multiply3 = calculate(3); const multiply4 = calculate(4); console.log(multiply3); // returns calculate function definition console.log(multiply3()); // NaN console.log(multiply3(6)); // 18 console.log(multiply4(2)); // 8

Dalam program di atas, calculate()fungsi mengambil satu argumen xdan mengembalikan definisi fungsi dari multiply()fungsi tersebut. The multiply()fungsi mengambil satu argumen ydan kembali x * y.

Keduanya multiply3dan multiply4merupakan penutupan.

The calculate()fungsi disebut melewati parameter x. Ketika multiply3dan multiply4dipanggil, multipy()fungsi tersebut memiliki akses ke argumen x yang dilewatkan dari calculate()fungsi luar .

Privasi data

Penutupan JavaScript membantu dalam privasi data program. Sebagai contoh,

 let a = 0; function sum() ( function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) const x = sum(); console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 a = a + 1; console.log(a); // 4

Dalam contoh di atas, sum()fungsi mengembalikan definisi fungsi dari increaseSum()fungsi tersebut.

Variabel a ditingkatkan di dalam increaseSum()fungsi. Namun, nilai variabel juga dapat diubah di luar fungsi. Dalam hal ini, a = a + 1;mengubah nilai variabel di luar fungsi.

Sekarang, jika Anda ingin variabel ditingkatkan hanya di dalam fungsi, Anda dapat menggunakan closure. Sebagai contoh,

 function sum() ( let a = 0; function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) let x = sum(); let a = 5; console.log(x()); // 1 console.log(x()); // 2 console.log(a); // 5

Dalam contoh di atas, sum()fungsi menetapkan nilai a menjadi 0 dan mengembalikan increaseSum()fungsi tersebut.

Karena penutupan, meskipun sum()sudah dijalankan, increaseSum()masih memiliki akses ke dan dapat menambahkan 1 ke setiap kali x()dipanggil.

Dan variabel a bersifat pribadi untuk sum()fungsi tersebut. Artinya variabel hanya dapat diakses di dalam sum()fungsi.

Bahkan jika Anda mendeklarasikan adan menggunakannya, itu tidak memengaruhi avariabel di dalam sum()fungsi.

Catatan : Umumnya, closure digunakan untuk privasi data.