Functional Programming In Bengali JavaScript Series ⇾ Chapter Nine (Part -2)
Callback Function in JavaScript, Implementation of For Each Function, Implementation of Map Function, Implementation of Filter Function
♗ Love To Play With → JavaScript & NodeJS.
✢ Interested → Web & Backend Development.
↯ Current Stack → MERN Stack
চ্যাপ্টার nine এর ফাঙ্কশনাল প্রোগ্রামিং part -২ তে তোমাকে স্বাগতম ।আমরা এর আগের ব্লগ এ দেখেছি কিছু ফাঙ্কশন এবং তাদের ব্যবহার ।জেনেছি ফাঙ্কশনাল প্রোগ্রামিং এর মানে ।কেন আমাদের functional programming জানা দরকার ।
এবারে আমাদের part -2 এ যেসব সেকশন গুলি থাকছে একনজরে দেখে নেই :
What is Callback Function in JavaScript,
Implementation of ForEach Function,
Implementation of Map Function,
Implementation of Filter Function,
Implementation of Reduce Function
প্রত্যেকটা সেকশন ভেঙে ভেঙে কিছু উধারণের মাধ্যমে দেখানোর চেষ্টা করছি । এবং তোমাদের সবার ফিডব্যাক আশাকরছি ।
073. What is Callback Function in Javascript:
তোমার জাভাস্ক্রিপ্ট এর প্রোগ্রামিং লাইফ এ কলব্যাক খুব জরুরি । যতদিন তুমি জাভাস্ক্রিপ্ট নিয়ে কাজ করবে ততদিন ই কলব্যাক দরকার হবে । callback একটা ফাঙ্কশন ।জেনারেল আমরা যে ফাঙ্কশন জাভাস্ক্রিপ্ট এ ব্যবহার করে থাকি কলব্যাক তেমনি ফাঙ্কশন ।এর আগে আমরা যখন higher order ফাঙ্কশন দেখেছিলাম তখন খেয়াল করে দেখো তুমি ফাঙ্কশন এর আর্গুমেন্ট আকারে আর একটা ফাঙ্কশন দিয়েদিয়েছিলে সেই সিস্টেম আরো সুন্দরভাবে ইমপ্লিমেন্ট করাহয়েছে callback এর মাধ্যমে ।আমরা ইম্প্লিমেন্টেশন hide করতেপারছি user এর কাছ থেকে ।আমরা কিছু কাজ করেদিচ্ছি একটা ফাঙ্কশন এর আবার কিছু ছেড়ে দিচ্ছি user এর হাতে । সে চাইলে তার নিজের মত ইমপ্লিমেন্ট করতে পারে ।
আমরা উধারণের মাধ্যমে দেখে আসি :
তোমাকে দুইটা সংখ্যা দেয়া হলো ধর ৫,৬ তোমাকে বলাহল সংখ্যা দুইটাকে একবার যোগ করব তারপর বিয়োগ করব ।এবং সেই রেজাল্ট দুইটাকে user এর প্রয়োজন মত সে চাইলে গুন্ ,ভাগ,যোগ বিয়োগ যা খুশি করতে পারবে ।
তাহলে আমাদের প্রথমে একটা ফাঙ্কশন নেয়া দরকার যা দুইটা সংখ্যা কে একবার যোগ একবার বিয়োগ করতে পারবে ।
function sample(a, b) {
var c = a + b;
var d = a - b;
console.log(c, d);
}
sample(5, 6);
আমরা sample নামে ফাঙ্কশন নিয়েছি যার কাজ হচ্ছে পেরামিটার এ পাওয়া a ,b কে একবার যোগ করে c ভ্যারিয়েবল এ রাখা আবার একবার বিয়োগ করে d ভ্যারিয়েবল এ রাখা ।কনসোল লগ করলে c এবং d কে আমরা পাই 11 ,-1।
কিন্তু আমাদের প্রব্লেম এ বলা ছিল যোগ এবং বিয়োগ ফলকে user এর হাতে ছেড়ে দিব সে যা খুশি করবে ।আচ্ছা আমরা এর আগে first class ফাঙ্কশন থেকে দেখেছি আমরা চাইলে ফাঙ্কশন যে কোন জায়গায় ব্যবহার করতে পারি ।দেখি সেটা দিয়ে কিছু করা যায় কিনা ।
function sample(a, b) {
var c = a + b;
var d = a - b;
var result = sum(c, d);
return result;
}
var x = sample(5, 6);
console.log(x);
function sum(a, b) {
return a + b;
}
খেয়াল করলেই বুজতে পারবে আমরা নতুন একটা ফাঙ্কশন নিয়েছি sum নামে যার কাজ হচ্ছে আর্গুমেন্ট গুলোকে যোগ করা ।আর first ক্লাস ফাঙ্কশন হিসেবে আমরা যে কোন জায়গায় ফাঙ্কশন ব্যবহার করতে পারি তাই sample ফাঙ্কশন এ আমরা sum ব্যবহার করেছি ,সাথে sum যেহেতু দুইটা পেরামিটার নিবে তাই সেখানে sample ফাঙ্কশন এর দুইটা ভ্যালু দিচ্ছি c ,d । এবার ফাঙ্কশন result এ রেখে রিটার্ন করে দিচ্ছি ।আমাদের দরকার sample কে কল করা সেটাকে x ভ্যারিয়েবল এ রেখে কনসোল লগ করলে আউটপুট আসে ১০।কারণ c এর ভ্যালু ১১ হয় আবার d এর ভ্যালু -১ ।সেই ভ্যালু যদি আমরা sum এ যোগ করি তাহলেই ১০ আসে ।
কিন্তু খেয়াল করে দেখো তো user শুধু যোগ করতে পারছে ।অন্য কিছু তো user করতে পারছে না ।আমাদের এমন কিছু করা দরকার যা দিয়ে user তার মন মতো ফাঙ্কশন বানাবে সেটা ইমপ্লিমেন্ট করতে পারবে ।এখানে আসে higher অর্ডার ফাঙ্কশন এর রুলস আমরা চাইলে আর্গুমেন্ট আকারে ফাঙ্কশন pass করতে পারি ।
function sample(a, b, cb) {
var c = a + b;
var d = a - b;
var result = cb(c, d);
return result;
}
var x = sample(5, 6, sum);
console.log(x);
function sum(a, b) {
return a + b;
}
আমরা just sample ফাঙ্কশন কে আর্গুমেন্ট আকারে একটা ফাঙ্কশন দিলাম ।তুমি কিন্তু জান আমরা আর্গুমেন্ট এর নাম যা খুশি দিতে পারি । আমরা cb নাম দিচ্ছি কারণ cb মানে কলব্যাক বুঝায় ।তুমি কি করব এবার sumফাঙ্কশন টাকে কল না করে cb আর্গুমেন্ট দিয়া দিবা ।মানে ফাঙ্কশন বাইরে থেকে যাই দাও এবারে তোমার স্ট্যাটিক কিছু নাই, যে ফাঙ্কশন খুশি দিতে পারবা ।
এক্ষেত্রে আমাদের sample ফাঙ্কশন ৩টা আর্গুমেন্ট নিচ্ছে দুইটা সংখ্যা expect করছে আর একটা ফাঙ্কশন ।আমরা কি করছি আমাদের আগে বানাই রাখা sum ফাঙ্কশন এর নাম দিয়ে দিচ্ছি কল করি নাই কারণ কল cb করে নিচ্ছে । রেজাল্ট কিন্তু সঠিক দিচ্ছে কনসোল লগ এ ।
হইল কল ব্যাক ফাঙ্কশন কল করা ।তুমি আলাদা আলাদা ফাঙ্কশন বানিয়ে ব্যবহার করতে পার ।
এভাবে ফাঙ্কশন দিয়ে করতে পার ।আবার নতুন একটা first class ফাঙ্কশন রুল কাজে লাগাতে পারি । মানে তুমি anonymous ফাঙ্কশন user এর হাতে দিতে পার ।সে তার মতো ফাঙ্কশন বানিয়ে যা খুশি করবে ।তেমন কিছুই করা লাগবে না ,জাস্ট স্পেসিফিক ফাঙ্কশন কল না করে আর্গুমেন্ট এ তুমি সরাসরি ফাঙ্কশন বানাই ফেলবা ।
var multiply = sample(5, 6, function (a, b) {
return a * b;
});
console.log(multiply);
sample দুইটা সংখ্যা নিচ্ছে ঠিক আছে কিন্তু তিন নম্বর আর্গুমেন্ট সাথে যে ফাঙ্কশন নিচ্ছে আমরা সেটা আগে ডিফাইন করা ফাঙ্কশন না নিয়ে , anonymous ফাঙ্কশন ব্যবহার করছি সেটা দুইটা পেরামিটার নিবে ।দিলাম a আর b রিটার্ন এ তুমি যা খুশি করতে পার ।ভ্যারিয়েবল এ রেখে কনসোল লগ করলে যেমন user চাইবে সেটাই পাবে ।এটাই হচ্ছে callback ফাঙ্কশন ।মানেটা দাঁড়ালো কিছু কাজ ডেভেলপার করে দিচ্ছে যেমন c আর d এর মান বের করা ।আর সেই রেজাল্ট দিয়ে কি করবে সেটা user জানে।user যেমন খুশি ব্যবহার করতে পারে ।
074. Implementation of ForEach Function :
একটা array যদি ট্রাভার্স করতে বলাহয় তাহলে তোমার মাথায় প্রথমেই আসবে for loop ব্যবহার করা ।কিন্তু এটা কোন ফাঙ্কশনাল way না ।জাভাস্ক্রিপ্ট এ আমরা সবসময় ফাঙ্কশনাল way তে কাজ করে থাকি ।এতে করে কোড ম্যানেজ করা সহজ হয় ।তাহলে একটা ফাঙ্কশনাল way তে array ট্রাভের্স করতে আমরা forEach মেথড ব্যবহার করতে পারি ,যেটা সব গুলো array এর মধ্যেই পেয়েথাকি ।এছাড়াও আরো অনেক গুলি মেথড রয়েছে যেগুলো আমরা এক এক করে দেখব ।শুধু দেখব না ভেঙে ভেঙে দেখব কিভাবে এই মেথড গুলি কাজ করে ।
প্রথমেই দেখে আসি কিভাবে একটা forEach মেথড ব্যবহার করা যায় :
var arr = [1, 2, 3, 45, 56];
arr.forEach(function (value, index, arr) {
console.log(value, index, arr);
});
আমরা একটা ছোট্ট array নিয়েছি যার মধ্যে কিছু element আছে ।এবার arr.forEach ব্যবহার করছি যেটা একটা মেথড এবং যে মেথড তা আমাদের জাভাস্ক্রিপ্ট provide করছে ।এই forEach মেথড বা ফাঙ্কশন তার মধ্যে একটা আর্গুমেন্ট নিবে যেটা একটা callback ফাঙ্কশন ।এবং কলব্যাক ফাঙ্কশন আমরা নিতেপারি anyneymus ফাঙ্কশন ব্যবহারের মাধ্যমে ।এই কলব্যাক ৩ টা পেরামিটার নিতেপারে ।value ,index এবং arr ।এরপরে যখন আমরা কনসোল লগ করছি প্রথমেই পাচ্ছি প্রত্যেকটা array এর element যা আসছে value থেকে ,এর পরে পাচ্ছি array এর index নাম্বার এবং সব শেষে itself arr টাকেই পাচ্ছি ।
তাহলে এবার আমরা সহজেই এই forEach ব্যবহার করে array এর sum বের করতে পারি :
var arr = [1, 2, 3, 45, 56];
var sum = 0;
arr.forEach(function (value, index, arr) {
sum += value;
});
console.log(sum);
আমরা sum নামে একটা গ্লোবাল ভ্যারিয়েবল নিয়েছি যার ইনিশিয়াল ভ্যালু ০। আমরা জানি forEach করার ফলে প্রত্যেকটা ভ্যালু কে সে value পেরামিটার এর মধ্যে পাচ্ছে তাই sum এর বর্তমান ভ্যালু এর সাথে আগের ভ্যালু যোগকরে এবং sum কে কনসোল লগ করে রেজাল্ট পেতেপারি ।
হইল আমরা forEach ব্যবহার করতে পারছি ।কিন্তু আমাদের কথা হচ্ছে কি ম্যাকানিজম এর ফলে foreach এই কাজ গুলো করতে পারছে ।যদি বলাহয় forEach এর মত ফাঙ্কশন আমাদের বানাতে আমরা কি সেটা পারব ?
আমরা নিজেরা একটা ফাঙ্কশন বানাব যা দিয়ে আমরাও ট্রাভের্স করতে পারব array কে :
var arr = [1, 2, 3, 45, 56];
function forDech(arr) {
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
}
forDech(arr);
আমরা প্রথমেই একটা ফাঙ্কশন বানালাম যার নাম দিলাম forDech এই ফাঙ্কশনটা একটা পেরামিটার নিবে। আমরা দিলাম arr কারণ আমরা ট্রাভের্স করতে চাচ্ছি array কে ।এবার for লুপ চালাচ্ছি ঠিক আগের মত এবং কনসোল লগ করছি arr[i] কে ।বাইরে থেকে আমরা এবার যদি forDech কল করে আর্গুমেন্ট আকারে arr কে provide করি তাহলে দেখব আমরা প্রত্যেকটা এলিমেন্ট পাচ্ছি ।কিন্তু আমরা তো কনসোল লগ করতে চাচ্ছি না আমরা এমন কিছু একটা করব যার মাধ্যমে forDech ফাঙ্কশন এর মধ্যে যা যা দরকার সব পাব ।forDech ফাঙ্কশন সেগুলি নিয়ে কি করবে সেটা তার ব্যাপার ।তাহলে এখানে আমরা কলব্যাক এর কনসেপ্ট কে কাজে লাগাতে পারি ।
var arr = [1, 2, 3, 45, 56];
function forDech(arr, cb) {
for (var i = 0; i < arr.length; i++) {
cb(arr[i]);
}
}
forDech(arr, function (value) {
console.log(value);
});
আমরা forDech ফাঙ্কশন এর মধ্যে একটা cb নামে কলব্যাক ফাঙ্কশন কল্পনা করে নিব ।যেটা আমাদের user provide করবে ।খেয়াল করে দেখো, আমাদের array ট্রাভের্স করতে for লুপ লাগবে ।তবে আমাদের দরকার হচ্ছে এর loop করে বের করা আনা value । আর value আমরা পাচ্ছি arr[i] এর মধ্যে । এবারে আমরা আর কনসোল করব না । আমরা cb এর আর্গুমেন্ট আকারে arr[i] পাঠিয়ে দিতে পারছি যেন user বা যে ফাঙ্কশন বানাবে সে পেরামিটার হিসেবে value পেতে পারে ।
তাহলে এবারে আমাদের forDech ফাঙ্কশন দুইটা আর্গুমেন্ট নিবে একটা নিবে arr আর একটা নিবে একটা কলব্যাক ফাঙ্কশন ।আমরা আগেই জানি আমরা কলব্যাক এ anynimus ফাঙ্কশন লিখতে পারি যেটা রিপ্রেসেন্ট করছে cb কে , সেটাই করেছি । আর কলব্যাক ফাঙ্কশন এর পেরামিটার এ তো ভ্যালু পেয়ে যাচ্ছি arr[i] সেই ভ্যালুটা আমরা value নাম দিয়ে ধরেছি । এবার জাস্ট কনসোল লগ করে দিচ্ছি value ।
আমরা জানি কলব্যাক ফাঙ্কশন এ আমরা আর্গুমেন্ট যত খুশি দিতে পারি ।তবে আমাদের দরকার value ,index আর arr । value পেয়েছি তাহলে এবার index আর arr পাঠিয়ে দিলেই হবে :
var arr = [1, 2, 3, 45, 56];
function forDech(arr, cb) {
for (var i = 0; i < arr.length; i++) {
cb(arr[i], i, arr);
}
}
forDech(arr, function (value, index, arr) {
console.log(value, index, arr);
});
cb এর আর্গুমেন্ট এ পাঠায় দিচ্ছি i মানে array এর ইনডেক্স আর arr মানে array টাকেই। এবার কালব্যাক ফাঙ্কশন এ index পেরামিটার দিয়ে i ধরেছি arr দিয়ে এরে কে ধরেছি ।এবারে আমাদের তৈরী করা forDech ফাঙ্কশন forEach এর মত যে কোন কাজ করতে সক্ষম ।
ধরো আমরা এবারে আমাদের forDech দিয়া array এর sum বের করব :
var sum = 0;
forDech(arr, function (value, index, arr) {
sum += value;
});
console.log(sum);
forEach এ যেভাবে করেছি ঠিক তেমনি আমরা আমাদের forDech ফাঙ্কশন ব্যবহার করে করতে পারছি ।ঠিক এমন ভাবেই ইম্প্লিমেন্টেশন হয় forEach ফাঙ্কশন ।আমরা শুধু বলে দিব কোন অংশটা আমরা user এর হাতে দিতে চাই যেটা সে কলব্যাক এর মধ্যে পাবে ।
আশাকরি বুজতে পেরেছ ।
075. Implementation of Map Function :
forEach এর মত array এর সাথে আমরা আরো অনেক মেথড পাই ,এর মধ্যে একটা হচ্ছে Map । এই Map ফাঙ্কশন এর কাজ হলো । একটা array কে modified করবে এবং সেই মডিফাইড element গুলো দিয়ে নতুন একটা array বানিয়ে আমাদের দিবে ।main array কে replace না করে ।
ধরি আমাদের কাছে একটা array আছে আমরা সেটাকে মোডিফাই করব random নাম্বার দিয়ে ।তবে main array কে চেঞ্জ না করে ।
var arr = [2, 5, 7];
var rand = arr.map(function () {
return Math.random() * 100;
});
console.log(arr);
console.log(rand);
খেয়াল করলেই বুজতে পারব আমরা এখানে কি করেছি ।arr নাম array নিয়েছি এবং সেটার উপরে map মেথড চালাইছি । map ফাঙ্কশন forEach এর মত same ভাবে কলব্যাক ফাঙ্কশন নিবে । তবে এখানে আমরা কলব্যাক এর পেরামিটার নিয়ে কাজ করি নি কারণ আমরা আরে এর এলিমেন্ট দিয়ে কিছু করিনি । এবারে রিটার্ন করে রান্ডম নাম্বার যেটাকিনা rand ভ্যারিয়েবল এ স্টোর আছে ।এবারে তুমি যদি কনসোল লগ কর arr আর rand কে দেখতে পাবে map ফাঙ্কশন main array কে মোডিফাই করেছে । রিপ্লেস করে নি ।নতুন একটা array রিটার্ন করেছে ।
তাহলে এবার আমরা আমাদের array এর একটা squre বের করব map মেথড ব্যবহার করে ।
var arr = [2, 5, 7];
var sqrArr = arr.map(function (value) {
return value * value;
});
console.log(sqrArr);
আমরা জানি squre বের করতে একটা সংখ্যাকে ওই সংখ্যা দিয়ে গুন্ করতে হয় । এখানে আমরা পেরামিটার নিয়েছি value আমরা আরো দুইটা পেরামিটার map এর পাব একটা index আর একটা array ।যেহেতু আমাদের index এবং arr এর দরকার নাই তাই চাইলেই omit করে বা বাদ দিতে পারি ।এবারে রিটার্ন করেছি প্রত্যেকটা element মানে value * value আর সেটা স্টোর করেছি sqrArr এর মধ্যে ।রেজাল্ট তুমি ভিডিও তে দেখো ।
কিন্তু আমাদের প্রশ্ন হচ্ছে এই implimentation কিভাবে হচ্ছে । কি এমন করছে map ফাঙ্কশন যে নতুন একটা array দিচ্ছে without replace the main array।
আমরা একটা array এর squre বের করব আমাদের মত করে mYmap ফাঙ্কশন বানানোর মাধ্যমে ।
চল চেষ্টা করে দেখি :
var arr = [2, 5, 7];
function myMap(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var temp = arr[i] * arr[i];
newArr.push(temp);
}
return newArr;
}
console.log(myMap(arr));
আমরা myMap নাম একটা ফাঙ্কশন নিলাম যেটা পেরামিটার আকারে নিচ্ছে একটা array ।এবারে আমাদের array কে ট্রাভার্স করতে for লুপ ব্যবহার করলাম । আমরা চাচ্ছি squre করতে তাই আরে এর value (যেটা পাচ্ছি arr[i]) এর মধ্যে সেটাকে arr[i] দিয়ে গুন্ করলাম এবং টেম্প ভ্যারিয়েবল এ স্টোর করলাম । যেহেতু আমরা array কে মোডিফাই করব রিপ্লেস করব না তাই newArr নামে empty array নিয়ে তাতে temp এ পাওয়া ভালুকে push করে দিলাম । আর আউটপুট বা রিটার্ন হিসেবে newArr পেলাম ।এখানে তুমি চাইলে myMap কে ভ্যারিয়েবল এ স্টোর করে কনসোল করতে পার ।আমি সরাসরি করলাম এবং সঠিক আউটপুট দিচ্ছে ।আমরা squre বের করতে পেরেছি ।
কিন্তু আমাদের যদি বলাহয় কিউব বের করতে বা ১০ দিয়ে গুন্ করে সেটা বের করতে ? তাহলে আমাদের এই ফাঙ্কশন সেটা করতে পারবে না । আমাদের আলাদা আলাদা ফাঙ্কশন বানিয়ে তারপরে কাজ করতে হবে ।
তবে তুমি যদি খেয়াল কর কিউব বের করা বা ১০ দিয়ে গুন্ করা এসব কাজের জন্য কিছু কমন কোড আমাদের করতে হয় ।যেমন লুপ চালান ,নতুন এরে নেয়া ,রিটার্ন করা, পুশ করা ।আমাদের দরকার শুধু ভ্যালু forDech ফাঙ্কশন এর মত। এই ভ্যালু দিয়ে কি করবে সেটা user বুজবে । তাহলে সেই same কনসেপ্ট কলব্যাক ফাঙ্কশন ।pass করে দিব আর্গুমেন্ট । user ফাঙ্কশন বানিয়ে ধরবে পেরামিটার ।এই পেরামিটার এ থাকবে value ,index ,arr । user যা খুশি তাই করতে পারে সেই পেরামিটার দিয়ে ।
তাহলে কোড হবে :
var arr = [2, 5, 7];
function myMap(arr, cb) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var temp = cb(arr[i], i, arr);
newArr.push(temp);
}
return newArr;
}
myMap(arr, function (value, index, arr) {
console.log(arr);
});
আমরা value ,index এবং array পাচ্ছি ।
এবারে আমরা যদি চাই square করতে বা ১০ দিয়ে গুন্ করতে তাহলে করতে পারি ঠিক map ফাঙ্কশন এর মত করে ।
var arr = [2, 5, 7];
function myMap(arr, cb) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
var temp = cb(arr[i], i, arr);
newArr.push(temp);
}
return newArr;
}
var squirArr = myMap(arr, function (value) {
return value * value;
});
console.log(squirArr);
var qb = myMap(arr, function (value) {
return value * value * value;
});
console.log(qb);
var m10 = myMap(arr, function (value) {
return value * 10;
});
console.log(m10);
জাস্ট একটা কলব্যাক ফাঙ্কশন আমাদের কতখানি ফ্লাক্সিবল হওয়ার সুযোগ দিচ্ছে । আশাকরি কলব্যাক এর পাওয়ার এবং map মেথড এর ইম্প্লিমেন্টেশন বুজতে পেরেছ।
076. Implementation of Filter Function :
তোমাকে একটা array দেয়া হয়েছে এবং বলাহচ্ছে নতুন একটা array জেনারেট করতে ,কিছু স্পেসিফিক লজিক এর উপর ভিত্তি করে ।সেটা হতেপারে ODD নাম্বার বের করা কিংবা ৪ এর থেকে বড় নম্বর গুলোকে দিয়ে নতুন array তৈরী করা । এমন অসংখ্য লজিক হতে পারে । এই যে লজিক এর উপর ভিত্তি করে কাজ করছে ।এটাকে বলাহয় filter করা ।আমাদের বাস্তব জীবনের কাজ গুলোতে অসংখ্য ডাটা নিয়ে কাজ করতে হবে ।সেসব ডাটা থেকে আমাদের প্রয়োজন পরবে ফিল্টার করার ।
জাভাস্ক্রিপ্ট এ builting ভাবেই ফিল্টার মেথড দেয়া আছে । জাভাস্ক্রিপ্ট এর এই filter মেথড সবসময় array modify করে কাজ করে ।অরিজিনাল array কখনোই touch করে না বা replace করে না । filter মেথড forEach এবং map মেথড এর মত কলব্যাক ফাঙ্কশন এবং সেই callback এ value ,index এবং array নিয়ে কাজ করে । ফিল্টার মেথড রিটার্ন করে সবসময় বুলিয়ান । একটা লজিক এর উপর ভিত্তি করে আমাদের হয় true অথবা false রিটার্ন করে দেয় । আর যখনি লজিক সত্য বা মিথ্যা হবে তার উপর ভিত্তি করে আমাদের নতুন array জেনারেট করে দিবে ।
আমরা একটা উদহারণ দিয়ে দেখি ফিল্টার মেথড কিভাবে কাজ করে ও কি রিটার্ন করে :
var arr = [1, 3, 4, 6, 78, 97, 54, 2];
var filteredArray = arr.filter(function (value) {
return value > 4;
});
console.log(filteredArray);
আমরা সিম্পল একটা array নিয়েছি এবারে ফিল্টার মেথড ব্যবহার করেছি । যেহেতু ফিল্টার মেথড কলব্যাক ফাঙ্কশন নিবে তাই আমরা পেরামিটার value pass করে সেখান থেকে রিটার্ন করেছি array এর value ৪ এর থেকে বড় কিনা ।যদি বড় হয় তবে সেটা true রিটার্ন করবে এবং নতুন array মানে filteredArray তে সেট করবে ।কনসোল লগ করলে আমরা নতুন একটা এরে পাব যেটা ৪ এর থেকে বড় সংখ্যা গুলোকে দিবে ।
ঠিক একই ভাবে আমরা রিটার্ন করতে পারি Odd এবং even নাম্বার । তাহলে আমরা দেখলাম কিভাবে নিদৃস্ট একটা ডাটা থেকে কিভাবে filter মেথড ব্যবহার করে specific ডাটা নিয়ে আশা যায় ।
এবারে আমরা দেখতে চাচ্ছি কিভাবে এই array filter মেথড কাজ করে ।এর implimentation কি ?
আমরা নিজেদের মত করে ছোট্ট একটা myFilter মেথড বানাতে পারি ।
var arr = [1, 3, 4, 6, 78, 97, 54, 2];
function myFilter(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] % 2 === 0) {
newArr.push(arr[i]);
}
}
return newArr;
}
var result = myFilter(arr);
console.log(result);
আমাদের myFilter ফাঙ্কশন একটা array পেরামিটার হিসেবে নিবে ।যেহেতু array তাই তাকে ট্রাভার্স করতে for লুপ এর দরকার ।করলাম লুপ ,আমরা চাচ্ছি even নাম্বার বের করে নিয়ে আসতে তাই কন্ডিশন লিখলাম arr[i] % 2 === 0 হয় আমরা চাচ্ছি একটা নতুন array তাই লুপ এর বাইরে একটা empty মেথড ডিক্লার করলাম এবং কন্ডিশন সত্য হলে সেই ফাঁকা array এর মধ্যে arr[i] এর ভ্যালু তাকে push করে দিলাম ।finally রিটার্ন করলাম newArr কে ।এবারে myFilter কল করে আর্গুমেন্ট arr দিয়ে কনসোল লগ করলে আমরা নতুন array পাব যা আমাদের দিবে arr নামের array তে যত গুলো জোর সংখ্যা আছে সেগুলোর array ।
কিন্তু আমাদের এই ফাঙ্কশন শুধু মাত্র একটা কাজ করতে পারছে । আমরা যদি চাই odd নাম্বার বের করতে সেটা পারব না ।তার জন্য হয় আমাদের নতুন ফাঙ্কশন লিখতে হবে আবার forloop চালাতে হবে array পুশ করতে হবে ,কন্ডিশন লিখতে হবে দেন সেই কন্ডিশন কে বলতে হবে arr[i] % 2 === 1 হয় তাহলে পুশ কর ।লুপ ,push সেগুলো একই থাকছে শুধু কন্ডিশন ছাড়া ।
তাহলে আমরা এই কন্ডিশন তাকে যদি একটা কলব্যাক ফাঙ্কশন এ নিতে পারি যেটা হ্যান্ডেল করবে user তাহলে আমাদের মেইন ফাঙ্কশন এ হাত দেয়ার দরকার পরে না ,true বা false এর উপর ভিত্তি করে ঠিক জাভাস্ক্রিপ্ট ফিল্টার মেথড এর মত কাজ করতে পারি ।
কোড দেখে আসি :
function myFilter(arr, cb) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (cb(arr[i], i, arr)) {
newArr.push(arr[i]);
}
}
return newArr;
}
var result = myFilter(arr, function (value) {
return value % 2 === 0;
});
var Odd = myFilter(arr, function (value) {
return value % 2 === 1;
});
var big = myFilter(arr, function (value) {
return value > 4;
});
console.log(big);
console.log(Odd);
console.log(result);
আমাদের cb কলব্যাক ফাঙ্কশন তা ৩ তা আর্গুমেন্ট নিচ্ছে cb(arr[i], i, arr) ভ্যালু ,index আর array । এবারে পেরামিটার দেয়ার দায়িত্ব তোমার মানে user এর যা লিখবা তার উপর ভিত্তি করে true বা false দিবে । আর true যখনি হবে সেটাকেই কলব্যাক এর মাধ্যমে এর মধ্যে newArr তে পুশ করবে । ফাঙ্কশন কল করার সময় তুমি anoynimus ফাঙ্কশন বা কলব্যাক ফাঙ্কশন এ লজিক লিখব একটা ভেরিএবলে স্টোর করব আর মজায় মজায় যত্ত খুশি বড় দাতাকে ফিল্টার করব । দেখছো কি সোজা কলব্যাক আর কত্ত বড় কাজ করতে পারে এই কলব্যাক।
077. Implementation of Reduce Function :
আমরা এই reduce মেথড এর মাধ্যমে itareble অবজেক্ট কে বা ট্রাভার্স করতে পারি এমন অবজেক্ট এর দুইটা ভ্যালু নিয়ে শেষ পর্যন্ত একটা রেজাল্ট দেয়া । দুইটা ভ্যালু এর মধ্যে যোগ ,বিয়োগ ,ভাগ ,গুন্ ,ম্যাক্স নম্বর বের করে আনা বা ফিল্টার এর মত কাজ ও করতে পারি reduce মেথড দিয়ে ।
আমরা জাভাস্ক্রিপ্ট reduce মেথড ব্যবহার করে কিছু কাজ করি :
reduce মেথড callbackfnহিসেবে আমাদের মোট ৪ টা পেরামিটার দিয়ে থাকে previousValue, currentValue, currentIndex, array । আর reduce মেথড নিতেপারে দুইটা আর্গুমেন্ট cb ,initialiger (তবে এই initializer অপশনাল তুমি দিতেও পর নাও দিতে পার ।
var arr = [1, 2, 3, 4, 5, 6, 56];
var sum = arr.reduce(function (preNo, currNo) {
return preNo + currNo;
});
console.log(sum);
আমরা sum বের করে ফেলছি reduce মেথড ব্যবহার করে । রিটার্ন করছে privious value আর current value এর যোগফল ।
আমরা চাইলে max নাম্বার বের করে ফেলতে পারি ।আবার min ভ্যালু বের করতে পারি ।
var arr = [1, 2, 3, 4, 5, 6, 56];
var max = arr.reduce(function (preNo, currNo) {
return Math.max(preNo, currNo);
});
console.log(max);
var min = arr.reduce(function (preNo, currNo) {
return Math.min(preNo, currNo);
});
console.log(min);
এখানে জাস্ট দুইটা ভ্যালু এর সাথে যে অপারেশন চালিয়ে কাজ করছে । একটা আগের ভ্যালু আর বর্তমান ভ্যালু ।
সব বুজলাম সহজ কিন্তু আমরা এবার এটার ইম্প্লিমেন্টেশন দেখতেচাই কি হয় মধ্যে কি ম্যাকানিজম কাজ করে এই মধ্যে ।অনেকেই এটার ব্যবহার অনেক ভাবে করে ।আমরা চেষ্টা করব সহজ ভাবে করতে ।
তোমার কাজ হচ্ছে একটা একটা myReduce নামে ফাঙ্কশন বানান যেটা নিতে পারে তিনটা পেরামিটার array ,cb ,acc । এইযে acc নিলাম এটাকে পয়েন্ট করবে initializer হিসেবে । জাভাস্ক্রিপ্ট এর reduce এ যেটা ছিল অপশনাল । কিন্তু আমরা must করে দিচ্ছি সহজ রাখার জন্য ।
var arr = [1, 2, 3, 4, 5, 6, 56];
function myReduce(arr, cb, acc) {
for (var i = 0; i < arr.length; i++) {
acc = cb(acc, arr[i], i, arr);
}
return acc;
}
var sum = myReduce(
arr,
function (preNo, currNo) {
return preNo + currNo;
},
0
);
console.log(sum);
var max = myReduce(
arr,
function (preNo, currNo) {
return Math.max(preNo, currNo);
},
arr[0]
);
var min = myReduce(
arr,
function (preNo, currNo) {
return Math.min(preNo, currNo);
},
arr[0]
);
console.log(max);
console.log(min);
আমি যে myReduce ফাঙ্কশন বানাইলাম সেটা ৩ টা পেরামিটার নিবে একটা array একটা নিবে কলব্যাক আর শেষে নিবে acc মানে accumulator বা initializr ।আমাদের myReduce ফাঙ্কশন রিটার্ন করবে এই acc । এবার যেহেতু array আছে তাই লুপ চালাতে হবে কমন ।এর পরে আমরা acc এর যে ভ্যালু আছে সেটা থেকে reassign করে দিব বা আপডেট করব ।যে ভ্যালু আগে থাকবে সেটাকে আপডেট করব এবং সেটাই আমাদের previousValue হিসেবে কাউন্ট করবে । কলব্যাক নিচ্ছে চার টা আর্গুমেন্ট cb(acc, arr[i], i, arr) previousValue,currentValue ,index আর array ।ব্যাস এই ছোট্ট কাজে আমরা এখন reduce এর মত কাজ করতে পারি ।
আমরা sum করেছি সঠিক আউটপুট দিচ্ছে এবং সেক্ষেত্রে আমাদের ইনিশিয়াল ভ্যালু ০।
max করেছি দিচ্ছে সঠিক আউটপুট এবং এ ক্ষেত্রে আমাদের ইনিশিয়াল ভ্যালু array এর প্রথম index কারণ আমাদের প্রত্যেকটা এলিমেন্ট তুলনা করতে হবে প্রথম ইনডেক্স কে ধরে ।min ভ্যালু বের করতেও একই কাজ হয়েছে ।
just আমাদের মনে রাখতে হবে ইনিশিয়াল ভ্যালু তা ডিপেন্ট করে use কেস এর উপরে ।
আশাকরি তুমি বুজতে পেরেছি । reduce থেকে শুরু করে সব গুলো মেথড যা array এর সাথে জাভাস্ক্রিপ্ট আমাদের provide করে থাকে ।সাথে সাথে কলব্যাক এর ব্যবহার ও এর beauty বুজতে পেরেছ ।এই গুলো মূলত জাভাস্ক্রিপ্ট বুজতে ভাস্ট একটা দক্ষতা আমাদের দিবে ।
আর মজার ব্যাপার নিয়ে আমারা পরের part এ কথা বলব ।
আমায় কম্মেন্ট করে জানায় ,সহজ ভাবে বুঝাতে পারছি কিনা । কি কি ইম্প্রোভ করা দরকার আমার ।
ধন্যবাদ
