Penutupan dalam JavaScript

Apa itu Penutupan dan kapan kita bisa benar-benar menggunakannya?

Untuk memahami Closure, kita perlu mengetahui tentang 2 konsep sederhana dalam JavaScript: fungsi bersarang dan mengembalikan fungsi.

Fungsi Bersarang

Dalam JavaScript, kita dapat memiliki fungsi bersarang. Fungsi dalam memiliki akses ke variabel dan parameter fungsi luar.

Mari kita periksa contoh berikut:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  displayMessage();
}

greetPerson('Alex'); // Hello Alex!

Mengembalikan Fungsi

Selain mendeklarasikan dan memanggil fungsi dalam di dalam fungsi luar, kita juga bisa mengembalikan fungsi dalam agar bisa dipanggil dari luar.

Mari kita lihat contohnya:

function greetPerson(name) {
  const message = 'Hello';
  
  function displayMessage() {
    console.log(`${message} ${name}!`);
  }

  return displayMessage;
}

const displayMessageFunction = greetPerson('Alex');

console.log(typeof(displayMessageFunction)); // function
displayMessageFunction(); // Hello Alex!

Penutup

Setelah kita memahami 2 konsep ini, “definisi” dari closure cukup sederhana.

Penutupan berarti fungsi dalam memiliki akses ke variabel dan parameter fungsi luarnya bahkan setelah fungsi luar dikembalikan.

Mari kita lihat contoh lain di mana kita dapat melihat dengan tepat bagaimana penutupan dapat digunakan:

function counterFunction() {
 let counter = 0;

 function increaseCounter() {
  return counter += 1;
 }

 return increaseCounter;
}

// counter reffers to the increaseCounter returned by the counterFunction
const counter = counterFunction();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
console.log(counter()); // 4

Fungsi dalam tidak menyimpan salinan terpisah dari variabel luar, tetapi mereferensikan variabel luar. Dengan kata lain, nilai dari counterakan berubah jika Anda mengubahnya menggunakan fungsi dalam.

Fungsi luar counterFunctionjuga mengembalikan referensi ke increaseCounterfungsi dalam, jadi saat kita memanggilnya, nilai sebenarnya dari countervariabel akan diubah. Dengan cara ini, kita dapat melihat bahwa countervariabel memiliki nilai inkremen baru setelah setiap counter()panggilan.

Kapan menggunakan Penutupan?

Kita dapat menggunakan penutupan untuk mencapai enkapsulasi dalam JavaScript. Ini dapat dicapai dengan menyembunyikan implementasi detail. Dengan cara ini, kita dapat membuat variabel dan fungsi pribadi.

Mari kita periksa contoh berikut, di mana kita ingin mengenkapsulasi beberapa data hanya dengan menggunakan fungsi dan objek:

const counter = (function () {
  let privateCounter = 0;

  function changeBy(val) {
    privateCounter += val;
  }

  function increaseCounter() {
    changeBy(1);
  }

  function decreaseCounter() {
    changeBy(-1);
  }

  function decreaseCounter() {
    return privateCounter;
  }

  return { increaseCounter, decreaseCounter, getCounterValue };
})();

console.log(counter.getCounterValue()); // 0

counter.increaseCounter();
counter.increaseCounter();

console.log(counter.getCounterValue()); // 2

counter.decreaseCounter();

console.log(counter.getCounterValue()); // 1

Kita bisa mengontrol nilai penghitung dari luar, hanya dengan memanggil increaseCounterand decreaseCounter, dan kita bisa mendapatkan nilainya dengan memanggil fungsi getCounterValue, yang berperilaku seperti pengambil.

Dengan cara ini, kami dapat mensimulasikan publicdan privatemengakses penentu dan mencapai enkapsulasi.

Ini adalah konsep yang sangat kuat dalam pengembangan perangkat lunak karena mencegah modifikasi yang tidak diinginkan pada variabel dan fungsi yang harus tetap bersifat pribadi.

Itu saja!

Terima kasih telah meluangkan waktu untuk membaca artikel ini tentang Penutupan dalam JavaScript. Saya harap ini membantu Anda lebih memahami konsep penting ini dan bagaimana ini dapat digunakan untuk mencapai enkapsulasi dan membuat variabel dan fungsi pribadi!