একজন ডেভেলপার হিসেবে, আপনি সম্ভবত রেগুলার JavaScript ফাংশন ব্যবহার করেছেন। এগুলোকে ফার্স্ট অর্ডার ফাংশন বলা হয়, তারা একটি ফাংশন প্যারামিটার হিসেবে নেয় না বা একটি ফাংশন রিটার্ন করে না।
function hello(name) { return "Hello," + " " + name } console.log(hello("Career Karma")); // Hello, Career Karma
এই আর্টিকেলে হায়ার অর্ডার ফাংশন (HOF) সম্পর্কে কথা বলা হয়েছে। এগুলো হলো olyan ফাংশন যা ডেভেলপারদের কোড ছোট করতে সাহায্য করে একটি ফাংশন আর্গুমেন্ট হিসেবে পাস করে বা একটি ফাংশন রিটার্ন করে। আমরা HOF এবং ফাংশনাল প্রোগ্রামিং আপনাকে পরিচয় করানোর জন্য কিছু বেসিক উদাহরণের ওভার যাব এবং দুটি পপুলার অ্যাডভান্সড অ্যারে মেথড সম্পর্কে কথা বলব যা হায়ার অর্ডার ফাংশন কনস্ট্রাক্ট ব্যবহার করে কাজ করে।
বেসিক হায়ার অর্ডার ফাংশন উদাহরণ
JavaScript-এ হায়ার অর্ডার ফাংশন ব্যবহার করার кільক ভিন্ন উপায় আছে।
ক্যালকুলেটর
চলুন একটি বেসিক HOF দিয়ে শুরু করি যা একটি কলব্যাক ফাংশন আর্গুমেন্ট হিসেবে নেয় এবং সেই কলব্যাকটি কিছু আর্গুমেন্টসহ রিটার্ন করে:
// higher order function function higherOrderFunction(num1, num2, cb) { return cb(num1, num2); // এটি আমাদের cb ফাংশন ইনভোক করে এবং আর্গুমেন্টগুলো কলব্যাকে পাস করে } // callbacks function add(num1, num2) { return num1 + num2; } function multiply(num1, num2) { return num1 * num2; } function divide(num1, num2) { return num1/num2; } function subtract(num1, num2) { return num1 - num2; } function modulo(num1, num2) { return num1 % num2; } console.log(higherOrderFunction(43, 13, add));
এখানে আমাদের দুটি ধরণের ফাংশন আছে: একটি হায়ার অর্ডার ফাংশন যা একটি কলব্যাক রিটার্ন করে এবং একটি সেট ফার্স্ট অর্ডার ফাংশন যা দুটি নম্বরে একটি অপারেশন পারফর্ম করে। স্নিপেটের শেষে, আমরা higherOrderFunction()-এ একটি ফাংশন কল করি। এই ফাংশন দেওয়া প্যারামিটারসহ পাস করা cb-এর ইনভোকেশনের রেজাল্ট রিটার্ন করে। আপনি যদি সব সম্ভাব্য অ্যরিথমেটিক অপারেটরের জন্য একটি কলব্যাক ফাংশন লিখে থাকেন, তবে আপনি higherOrderFunction ব্যবহার করে যে অপারেশন প্রয়োজন সেটি কল করতে পারেন।
ইভেন্ট লিসেনার
হায়ার অর্ডার ফাংশন এর আরেকটি উদাহরণ হলো যা ঘটে যখন আপনি DOM (ডকুমেন্ট অবজেক্ট মডেল) একটি এলিমেন্টে একটি ইভেন্ট লিসেনার আড করেন। এই উদাহরণটি নিন:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=""> </head> <body> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p> <![endif]--> <button>Click Me!</button> <script async defer> const button = document.querySelector("button"); button.addEventListener("click", (e) => { alert("The button has been clicked!"); }) </script> </body> </html>
এই উদাহরণে, আমি HTML-এ একটি বাটন তৈরি করলাম, JavaScript ব্যবহার করে সেটি সিলেক্ট করলাম, এবং সেটিতে একটি ইভেন্ট লিসেনার অ্যাড করলাম। ইভেন্ট লিসেনারের স্ট্রাকচার হলো একটি সিম্পল হায়ার অর্ডার ফাংশন - এটি এর দ্বিতীয় আর্গুমেন্ট হিসেবে একটি অনোনিমাস ফাংশন নেয়।
হাইলাইটেড সেকশনটি আপনার হায়ার অর্ডার ফাংশন।
অ্যাডভান্সড অ্যারে মেথড
JavaScript বিল্ট-ইন অ্যারে মেথডগুলো হলো ES6-এ নতুন সেই 스페শাল হায়ার অর্ডার ফাংশনগুলো যা আমরা একটি অ্যারে 넘는 ইটারেট করতে এবং либо এটি ম্যানিপুলেট করতে বা একটি সম্পূর্ণ নতুন অ্যারে রিটার্ন করতে পারি যেসব ভ্যালু ম্যানিপুলেটেড হয়েছে।
যখন আমরা JavaScript-এ আরও কমপ্লেক্স প্রব্লেম সলভিং-এ যাব, তবে আমরা অ্যারে 넘는 ইটারেট করার সময় আমরা যে লজিক লিখি সেগুলোর কিছু অ্যাবস্ট্রাক্ট করার চিন্তা করব। এই হায়ার অর্ডার ফাংশন অ্যারে মেথডগুলো ব্যবহার করে আপনি একজন बेटার JS ডেভেলপার হতে পারেন।
ধরি আমাদের কাছে প্রফেসরদের একটি অ্যারে আছে:
forEach
যদি আমরা অ্যারে 넘는 ইটারেট করতে চাই এবং ES6-এর আগে প্রতিটি আইটেম ম্যানিপুলেট করতে চাই, তবে আমাদের এভাবে করতে হতো:
function forEachES5(arr){ for(let i = 0; i < arr.length; i++) { arr[i] = "Professor " + arr[i]; } return arr; } console.log(forEachES5(professors));
ES6 সিনট্যাক্স আমাদের কোড ছোট করতে দেয় forEach মেথড ব্যবহার করে:
function forEachES6(arr) { arr.forEach((professor, index, origArr) => { origArr[index] = "Professor " + professor; }); return arr; }
এই forEach মেথড তার প্রথম প্যারামিটার হিসেবে একটি কলব্যাক ফাংশন নেয় যা এটিকে একটি হায়ার অর্ডার ফাংশন বানায়। এই কলব্যাক ফাংশন বেসিকলি হলো অ্যারেতে থাকা প্রতিটি আইটেমে পারফর্ম করা "অ্যাকশন"। এডিশনালি, forEach মেথড একটি ইন্ডেক্স এবং একটি অ্যারে নেয় এর অপশনাল দ্বিতীয় এবং তৃতীয় প্যারামিটার হিসেবে।
forEach মেথডে এই প্যারামিটারগুলোর অর্ডার মायेন রাখে (অন্যান্য বিল্ট-ইন অ্যারে মেথডের মতো)। প্রথমটি সবসময় কলব্যাক ফাংশন, দ্বিতীয়টি সবসময় অ্যারেতে আইটেমের ইন্ডেক্স, এবং তৃতীয়টি সবসময় আপনার কাজ করা অ্যারেটি একটি কপি।
forEach মেথড JavaScript-এ একটি for লুপ প্রেজেন্ট করার আরেকটি উপায়। এটি কিছুই রিটার্ন করে না। মেথডটি যা আছে সেটি ম্যানিপুলেট করে এবং আপনি যে অ্যারেতে কাজ করছেন সেটিতে সেভ করে যদি আপনি স্পেসিফাই করেন আপনি কী করতে চান।
Map
forEach মেথডের সবচেয়ে কাছের মেথড হলো map মেথড। এটি খুব সিমিলারলি কাজ করে, ছাড়া এই মেথড একটি নতুন অ্যারে রিটার্ন করে। আপনি কলব্যাক ফাংশনে যা ম্যানিপুলেট করবেন সেটি ওরিজিনাল অ্যারেকে প্রভাবিত করবে না।
চলুন দেখি map প্রি-ES6-এ কীভাবে দেখত:
function mapES5(arr){ let newArr = []; for(let i = 0; i < arr.length; i++) { newArr.push("Professor " + arr[i]); } return newArr; }
আপনি দেখতে পাচ্ছেন, আমাদের কী করতে হতো: আমাদের for লুপের বাইরে একটি নতুন অ্যারে ইনস্ট্যানশিয়েট করতে হতো যাতে আমরা নতুন ভ্যালু পুশ করতে পারি। তারপর আমাদের আসলে নতুন অ্যারে রিটার্ন করতে হতো সেটি অন্যথায় ব্যবহার করতে পারতে!
ES6 এবং map মেথডের সাথে, আমরা কিছু লজিক অ্যাবস্ট্রাক্ট করতে পারি আরও রিডেবল बनाने জন্য:
function mapWithES6(arr) { const mapped = arr.map(professor => { return "Professor " + professor; }) return mapped; }
map মেথডের সাথে-साथ অন্যান্য অ্যারে মেথড যেমন reduce এবং filter ফাংশনღ スペশাল ফিচার হলো, আপনি এটিকে একটি ভেরিয়েবলে অ্যাসাইন করতে পারেন এবং রিটার্ন করতে পারেন বা পুরো ফাংশনটিই রিটার্ন করতে পারেন! কোনো পুশিং প্রয়োজন নেই একটি নতুন অ্যারে-এ - এটি আপনার জন্য এই map মেথড দিয়ে করা হয়। মনে রাখবেন আপনার map মেথড কলব্যাক ফাংশনের ভেতরের লজিকে একটি রিটার্ন ভ্যালু থাকতে হবে!
উপসংহার:
হায়ার অর্ডার ফাংশন JavaScript-এ একটি অত্যন্ত গুরুত্বপূর্ণ কনসেপ্ট যা আপনাকে একটি ভাল ডেভেলপার बनতে সাহায্য করে। এটি কিছু লজিক অ্যাবস্ট্রাক্ট করতে সাহায্য করে আপনার কোড আরও রিডেবল বানাতে, এবং কিছু কেসে, আরও পারফরম্যান্ট।
এই টিউটোরিয়ালে, আমরা এক্সপ্লোর করেছি হায়ার অর্ডার ফাংশন লেখার কিছু ভিন্ন উপায়, বেসিক ক্যালকুলেটর মেথড থেকে ইভেন্ট লিসেনার এবং অ্যাডভান্সড অ্যারে ফাংশন পর্যন্ত। একবার আপনি এটি মাস্টার করলে, আপনি আরও কমপ্লেক্স প্রব্লেমের সমাধান করতে রেডি!。
