একজন বিকাশকারী হিসাবে, আপনি সম্ভবত নিয়মিত জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করেছেন। প্রথম অর্ডার ফাংশন বলা হয়, তারা একটি ফাংশন একটি প্যারামিটার হিসাবে গ্রহণ করে না বা একটি ফাংশন প্রদান করে না।
function hello(name) {
return "Hello," + " " + name
}
console.log(hello("Career Karma")); // Hello, Career Karma এই নিবন্ধটি উচ্চ ক্রম ফাংশন (HOF) সম্পর্কে কথা বলে। এগুলি এমন ফাংশন যা ডেভেলপারদের একটি ফাংশনকে একটি আর্গুমেন্ট হিসাবে পাস করে বা একটি ফাংশন ফিরিয়ে দিয়ে এটিকে আরও পঠনযোগ্য করে তুলতে সাহায্য করে। আমরা আপনাকে HOF এবং কার্যকরী প্রোগ্রামিংয়ের সাথে পরিচয় করিয়ে দেওয়ার জন্য কিছু প্রাথমিক উদাহরণ দেব এবং দুটি জনপ্রিয় উন্নত অ্যারে পদ্ধতি সম্পর্কে কথা বলব যা কাজ করার জন্য উচ্চ ক্রম ফাংশন গঠন ব্যবহার করে।
মৌলিক উচ্চ ক্রম ফাংশন উদাহরণ
জাভাস্ক্রিপ্টে হায়ার অর্ডার ফাংশন ব্যবহার করার বিভিন্ন উপায় আছে।
ক্যালকুলেটর
আসুন একটি মৌলিক HOF দিয়ে শুরু করি যা একটি কলব্যাক ফাংশনকে একটি আর্গুমেন্ট হিসাবে গ্রহণ করে এবং কিছু আর্গুমেন্ট সহ সেই কলব্যাকটি ফেরত দেয়:
//higher order function
function higherOrderFunction(num1, num2, cb) {
return cb(num1, num2); //this invokes our cb function and passes in our arguments to the callback.
}
//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() এ একটি ফাংশন কল করি . এই ফাংশনটি প্রদত্ত পরামিতিগুলির সাথে পাস করা সিবি-র একটি আহ্বানের ফলাফল প্রদান করে। আপনি যদি সমস্ত সম্ভাব্য গাণিতিক অপারেটরের জন্য একটি কলব্যাক ফাংশন লিখে থাকেন, তাহলে আপনার প্রয়োজনে যে কোনো অপারেশন কল করতে আপনি highOrderFunction ব্যবহার করতে পারেন।
ইভেন্ট লিসেনার
উচ্চ ক্রম ফাংশনের আরেকটি উদাহরণ হল যখন আপনি 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 এ একটি বোতাম তৈরি করেছি, জাভাস্ক্রিপ্ট ব্যবহার করে এটি নির্বাচন করেছি এবং এতে একটি ইভেন্ট লিসেনার যোগ করেছি। ইভেন্ট লিসেনারের গঠন একটি সাধারণ উচ্চ ক্রম ফাংশনের মতো - এটি একটি বেনামী ফাংশনকে তার দ্বিতীয় যুক্তি হিসাবে নেয়।
হাইলাইট করা বিভাগটি আপনার উচ্চ অর্ডার ফাংশন।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় কাটিয়েছে।
উন্নত অ্যারে পদ্ধতি
জাভাস্ক্রিপ্ট বিল্ট-ইন অ্যারে পদ্ধতিগুলি হল সেই বিশেষ উচ্চ ক্রম ফাংশন যা ES6-এ নতুন যা আমরা একটি অ্যারের উপর পুনরাবৃত্তি করতে ব্যবহার করতে পারি এবং হয় এটিকে ম্যানিপুলেট করতে পারি বা সম্পূর্ণ নতুন অ্যারে ফিরিয়ে দিতে পারি যার মানগুলি ম্যানিপুলেট করা হয়েছে।
আমরা যখন জাভাস্ক্রিপ্টে আরও জটিল সমস্যা সমাধান করতে শুরু করি, তখন আমরা অ্যারেগুলির উপর পুনরাবৃত্তি করার সময় আমরা যে যুক্তিগুলি লিখি তার কিছু বিমূর্ত করার কথা ভাবতে শুরু করি। এই উচ্চ ক্রম ফাংশন অ্যারে পদ্ধতি ব্যবহার করে আপনি একটি ভাল JS বিকাশকারী হতে সাহায্য করে.
উদাহরণস্বরূপ বলা যাক আমাদের অধ্যাপকদের একটি অ্যারে আছে:
প্রতিটির জন্য
যদি আমরা অ্যারের উপর পুনরাবৃত্তি করতে চাই এবং 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 পদ্ধতি হল জাভাস্ক্রিপ্টে লুপের জন্য উপস্থাপন করার আরেকটি উপায়। এটি কিছুই ফেরত দেয় না। পদ্ধতিটি ইতিমধ্যে সেখানে যা আছে তা পরিচালনা করে এবং আপনি যে অ্যারের সাথে কাজ করছেন সেটিতে সংরক্ষণ করে যদি আপনি এটির সাথে কী করতে চান তা নির্দিষ্ট করেন৷
মানচিত্র
প্রতিটি পদ্ধতির নিকটতম পদ্ধতি হল মানচিত্র পদ্ধতি। এটি একইভাবে কাজ করে, এই পদ্ধতিটি একটি নতুন অ্যারে প্রদান করে। কলব্যাক ফাংশনে আপনি যা কিছু ম্যানিপুলেট করেন তা মূল অ্যারেকে প্রভাবিত করবে না।
চলুন দেখে নেওয়া যাক কোন মানচিত্রটি প্রাক-ES6-এর মতো দেখায়:
function mapES5(arr){
let newArr = [];
for(let i = 0; i < arr.length; i++) {
newArr.push("Professor " + arr[i]);
}
return newArr;
}
আপনি দেখতে পাচ্ছেন, আমাদের যা করতে হয়েছিল তা হল আমাদের লুপের বাইরে একটি নতুন অ্যারে তৈরি করা যাতে আমরা এতে নতুন মানগুলি পুশ করতে পারি। তারপর আমরা আসলে অন্য কোথাও এটি ব্যবহার করতে সক্ষম হতে আমাদের নতুন অ্যারে ফেরত দিতে হবে!
ES6 এবং মানচিত্র পদ্ধতির সাহায্যে, আমরা এটিকে আরও পঠনযোগ্য করতে সেই যুক্তির কিছু বিমূর্ত করতে পারি:
function mapWithES6(arr) {
const mapped = arr.map(professor => {
return "Professor " + professor;
})
return mapped;
} মানচিত্র পদ্ধতির পাশাপাশি অন্যান্য অ্যারে পদ্ধতির বিশেষ বৈশিষ্ট্য, বিশেষ করে ফাংশন হ্রাস এবং ফিল্টার করা, আপনি এটিকে একটি ভেরিয়েবলে বরাদ্দ করতে পারেন এবং এটি ফেরত দিতে পারেন বা সম্পূর্ণ ফাংশনটি সম্পূর্ণরূপে ফেরত দিতে পারেন! একটি নতুন অ্যারেতে কোনো ধাক্কা দেওয়ার প্রয়োজন নেই - এই মানচিত্র পদ্ধতির মাধ্যমে এটি আপনার জন্য করা হয়েছে। আপনার মানচিত্র পদ্ধতি কলব্যাক ফাংশনের ভিতরে যুক্তিতে একটি রিটার্ন মান আছে মনে রাখবেন!
উপসংহার:
উচ্চতর অর্ডার ফাংশন জাভাস্ক্রিপ্টের একটি অত্যন্ত গুরুত্বপূর্ণ ধারণা যা আপনাকে আরও ভাল বিকাশকারী হতে সাহায্য করবে। এটি আপনার কোডকে আরও পঠনযোগ্য করতে এবং কিছু ক্ষেত্রে, আরও পারফরম্যান্স করতে কিছু যুক্তিকে বিমূর্ত করতে সাহায্য করবে।
এই টিউটোরিয়ালে, আমরা কিছু ভিন্ন উপায় অন্বেষণ করেছি যা আমরা উচ্চ ক্রম ফাংশন লিখতে পারি, মৌলিক ক্যালকুলেটর পদ্ধতি থেকে শুরু করে ইভেন্ট শ্রোতা এবং উন্নত অ্যারে ফাংশন। একবার আপনি এটি আয়ত্ত করার পরে, আপনি সমস্যার আরও কিছু জটিল সমাধান মোকাবেলা করতে প্রস্তুত!
