Home » Javascript » JavaScript Closure: Variabel dan Code Membuatnya

JavaScript Closure: Variabel dan Code Membuatnya

by Catur Kurnia Sari
by Catur Kurnia Sari

Variabel JavaScript dapat masuk dalam cakupan lokal atau global.

Variabel global dapat dibuat lokal (private) dengan penutupan.

Variabel Global

Sebuah fungsi dapat mengakses semua variabel yang ditentukan di dalam fungsi tersebut, seperti contoh ini.

Contoh:

<!DOCTYPE html>
<html>
<body>

<p> Suatu fungsi dapat mengakses variabel yang ditentukan di dalam fungsi: </p>
<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo"></p>

<script>
function myFunction() {
  var a = 4;
  document.getElementById("demo").innerHTML = a * a;
} 

</script>

</body>
</html>

Tetapi suatu fungsi juga dapat mengakses variabel yang ditentukan di luar fungsi, seperti ini:

<!DOCTYPE html>
<html>
<body>

<p> Suatu fungsi dapat mengakses variabel yang ditentukan di luar fungsi: </p>
<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo"></p>

<script>
var a = 4;
function myFunction() {
  document.getElementById("demo").innerHTML = a * a;
} 
</script>

</body>
</html>

Dalam contoh terakhir, a adalah variabel global.

Di halaman web, variabel global dimiliki oleh objek jendela (window).

Variabel global dapat digunakan (dan diubah) oleh semua skrip di halaman (dan di jendela).

Dalam contoh pertama, a adalah variabel lokal.

Variabel lokal hanya dapat digunakan di dalam fungsi yang ditentukan. Variabel itu tersembunyi dari fungsi lain dan kode skrip lainnya.

Variabel global dan lokal dengan nama yang sama merupakan variabel yang berbeda. Memodifikasi satu, tidak akan mengubah variabel yang lain.

Variabel yang dibuat tanpa kata kunci deklarasi (var, let, atau const) selalu global, bahkan jika dibuat di dalam fungsi.

Variabel Lifetime

Variabel global aktif hingga halaman tersebut tidak digunakan lagi, seperti saat kita menavigasi ke halaman lain atau menutup jendela.

Variabel lokal memiliki umur pendek. Variabel lokal dibuat saat fungsi dipanggil, dan dihapus saat fungsi selesai.

Sebuah Dilema Penghitung (Counter)

Misalkan Anda ingin menggunakan variabel untuk menghitung sesuatu, dan ingin penghitung ini tersedia untuk semua fungsi.

Anda bisa menggunakan variabel global, dan fungsi untuk meningkatkan penghitung.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function Closure</h2>

<p> Menghitung dengan variabel global. </p>
<p id="demo"></p>

<script>
// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The counter should now be 3
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>

</body>
</html>

Ada masalah dengan solusi di atas: Kode apa pun di halaman dapat mengubah penghitung, tanpa memanggil add().

Penghitung harus diatur menjadi lokal ke fungsi add(), untuk mencegah kode lain mengubahnya.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function Closures</h2>

<p> Menghitung dengan variabel lokal. </p>

<p id="demo"></p>

<script>
// Initiate counter
var counter = 0;

// Function to increment counter
function add() {
  var counter = 0; 
  counter += 1;
}

// Call add() 3 times
add();
add();
add();

// The result is not 3 because you mix up the globaland local counter
document.getElementById("demo").innerHTML = "The counter is: " + counter;
</script>

</body>
</html>

Kode tidak berfungsi karena kita menampilkan penghitung global, bukan penghitung lokal.

Kita dapat menghapus penghitung global dan mengakses penghitung lokal dengan membiarkan fungsi mengembalikannya.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Closures</h2>

<p> Menghitung dengan variabel lokal. </p>

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
// Function to increment counter
function add() {
  var counter = 0;
  counter += 1;
  return counter;
}
// Trying to increment the counter
function myFunction(){
  document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

Kode tidak berhasil karena kita mengatur ulang penghitung lokal setiap kali kita memanggil fungsi.

Fungsi inner JavaScript dapat menyelesaikan ini.

Fungsi Bertingkat JavaScript

Semua fungsi memiliki akses ke cakupan global.

Faktanya, dalam JavaScript, semua fungsi memiliki akses ke cakupan “di atas” mereka.

JavaScript mendukung fungsi bertingkat. Fungsi bertingkat memiliki akses ke cakupan “di atas” mereka.

Dalam contoh ini, fungsi inner plus() memiliki akses ke variabel penghitung di fungsi induk.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Function Closures</h2>

<p> Menghitung dengan variabel lokal. </p>

<p id="demo">0</p>

<script>
document.getElementById("demo").innerHTML = add();
function add() {
  var counter = 0;
  function plus() {counter += 1;}
  plus();  
  return counter; 
}
</script>

</body>
</html>

Ini bisa memecahkan dilema counter, jika kita bisa mengakses fungsi plus() dari luar.

Kita juga perlu menemukan cara untuk mengeksekusi counter = 0 hanya sekali.

Untuk itu kita membutuhkan penutupan (closure).

JavaScript Closure

Apakah masih ingat tentang pemanggilan fungsi sendiri (self-invoking) ? Apa guna dari fungsi ini?

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Closures</h2>

<p> Menghitung dengan variabel lokal. </p>

<button type="button" onclick="myFunction()">Count!</button>

<p id="demo">0</p>

<script>
var add = (function () {
  var counter = 0;
  return function () {counter += 1; return counter;}
})();

function myFunction(){
  document.getElementById("demo").innerHTML = add();
}
</script>

</body>
</html>

Penjelasan Contoh:

Variabel add ditugaskan pada nilai return dari fungsi pemanggilan sendiri.

Fungsi pemanggilan sendiri hanya berjalan sekali dab mengatur penghitung ke nol (0), dan mengembalikan ekspresi fungsi.

Dengan cara ini add menjadi sebuah fungsi. Bagian yang “luar biasa” adalah fungsi add dapat mengakses penghitung dalam lingkup induk.

Ini disebut closure JavaScript. Ini memungkinkan suatu fungsi memiliki variabel “private”.

Penghitung dilindungi oleh ruang lingkup fungsi anonim, dan hanya dapat diubah menggunakan fungsi add.

Closure adalah fungsi yang memiliki akses ke lingkup induk, bahkan setelah fungsi induk ditutup.

You may also like