Meneruskan Parameter ke Modul melalui Closure di JavaScript

Merupakan praktik yang baik untuk tidak menanamkan nilai-nilai tertentu secara langsung ke dalam modul, melainkan meneruskannya sebagai parameter ke modul itu sendiri (yaitu sebagai parameter dari fungsi yang dipanggil secara langsung):

javascript;(function(arg1, arg2) { // parameter masuk ke dalam variabel
  
})(1, 2); // meneruskan beberapa parameter

Mari kita lihat sebuah contoh. Misalkan kita memiliki sebuah div dengan angka dan sebuah tombol:

html<div id="div">3</div>
<button id="btn">click me</button>

Misalkan kita juga memiliki sebuah modul:

javascript;(function() {
  let div = document.querySelector('#div');
  let btn = document.querySelector('#btn');
  
  function func(num) {
    return num * num;
  }
  
  btn.addEventListener('click', function() {
    div.textContent = func(div.textContent);
  });
})();

Seperti yang Anda lihat, selector elemen-elemen kita tertanam secara kaku dalam kode modul. Solusi yang lebih baik adalah dengan meneruskannya sebagai parameter modul - dengan begitu kita dapat dengan mudah mengubahnya di kemudian hari. Mari perbaiki modul kita:

javascript;(function(selector1, selector2) {
  let div = document.querySelector(selector1);
  let btn = document.querySelector(selector2);
  
  function func(num) {
    return num * num;
  }
  
  btn.addEventListener('click', function() {
    div.textContent = func(div.textContent);
  });
})('#div', '#btn');