জাভাস্ক্রিপ্টে ক্লোজারের মাধ্যমে মডিউলে প্যারামিটার পাঠানো

যেকোনো মান সরাসরি মডিউলের মধ্যে হার্ডকোড না করে, মডিউলের প্যারামিটার হিসেবে সেগুলো পাঠানো একটি ভালো প্র্যাকটিস (অর্থাৎ, অবিলম্বে কল হওয়া ফাংশনের প্যারামিটার হিসেবে):

javascript;(function(arg1, arg2) { // প্যারামিটারগুলি ভেরিয়েবলে যায়
  
})(1, 2); // কিছু প্যারামিটার পাঠাচ্ছি

আসুন একটি উদাহরণ দেখি। ধরা যাক আমাদের কাছে একটি সংখ্যা সহ একটি div এবং একটি বাটন আছে:

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

ধরা যাক আমাদের একটি মডিউলও আছে:

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);
  });
})();

আপনি দেখতে পাচ্ছেন, আমাদের এলিমেন্টগুলির সিলেক্টরগুলি মডিউলের কোডে শক্তভাবে হার্ডকোড করা আছে। মডিউলের প্যারামিটার হিসেবে সেগুলো পাঠানো একটি আরও ভালো সমাধান হবে - এইভাবে আমরা ভবিষ্যতে সহজেই সেগুলো পরিবর্তন করতে পারব। আমাদের মডিউলটি ঠিক করি:

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');
Задание 1

একটি বাটন এবং তিনটি ইনপুট দেওয়া আছে, যেখানে সংখ্যা ইনপুট করা হয়। বাটনে ক্লিক করলে কনসোলে ইনপুটকৃত সংখ্যাগুলোর যোগফল প্রিন্ট করুন। মডিউল ব্যবহার করে টাস্কটি বাস্তবায়ন করুন।