আজকে আলোচনা করব জাভাস্ক্রিপ্ট এর ৩ টি Arrayমেথড নিয়ে map(),filter(),reduce()নিয়ে।

জাভাস্ক্রিপ্ট এর Arrayইউজ করার সময় এই ৩ টি মেথড প্রায়ই ব্যবহার করতে হয়, এই মেথডগুলো অনেকটা একই রকম ভাবে কাজ করে, আলোচনা করব এই মেথড গুলো কিভাবে কাজ করে। ওকে তাহলে শুরুকরা যাক-

Map():

যখনই আমরা কোন Array তে map()এপ্লাই করি তখন এই মেথড তার আর্গুমেন্ট হিসেবে একটা user define functionনেয়, সেই functionঐ Array র প্রতিটা element এ এপ্লাই হয় এবং তার উপর ভিত্তি করে ফাইনালি নতুন একটা Array রিটার্ন করে।

Syntax:

let oldArray = [1,2,3,4,5];
let newArray = oldArray.map((currentValue, index, arr) => {
      //return item for new Array
});

.map()তার আর্গুমেন্ট হিসেবে একটা কলব্যাক ফাংশন নিচ্ছে, তার ৩ টা প্যারামিটার আছে প্রথমটা হল currentValue যেটা অ্যারের ঐ ইলিমেন্ট, যেটার উপর ফাংশন টা এপ্লাই হয়েছে, প্রতিটা ইলিমেন্ট এ ই ফাংশন টা কল হয়, সেকেন্ড প্যারামিটার হলো index অ্যারের ইনডেক্স আর তৃতীয়টা হলো মূল অ্যারে।

একটা উদাহরন দেখা যাক, তাহলে বাপারটা আরো ক্লিয়ার হবেন, আসলে কি হচ্ছে,

let numbers = [1,2,3,4,5,6,7,8,9];
let newNumbers = numbers.map(function(item){
  return item+5;
});
console.log(newNumbers);
/// OUTPUT: [6, 7, 8, 9, 10, 11, 12, 13, 14]

/**
*  আরো সহজ ভাবে es6 এ অ্যারো ফাংশন ব্যবহার করে
*  লিখাযায়
**/

let numbers = [1,2,3,4,5,6,7,8,9];
let newNumbers = numbers.map(item=> item+5);
console.log(newNumbers);
/// OUTPUT: [6, 7, 8, 9, 10, 11, 12, 13, 14]

এখানে কলব্যাক ফাংশন টার একটা প্যারামিটার আছে, item যেটাকে অ্যারে এর এক একটা ইলিমেন্ট হিসেবে পাওয়া যাবে, আর সে item এর সাথে ৫ যোগ করে newNumbers নামের অ্যারেতে রেখে দিচ্ছি, সবশেষে আমরা এমন একটা আউটপুট পাচ্ছিঃ [6, 7, 8, 9, 10, 11, 12, 13, 14] .

আরেকটা উদাহরন দেখা যাকঃ ধরেন আমার কাছে কিছু রেন্ডম নাম্বার এর একটা অ্যারে আছে, আমি চাচ্ছি সেটার জোড় নাম্বার গুলাকে বর্গ করে নতুন একটা অ্যারেতে রাখব, এবার দেখি ম্যাপ মেথড দিয়ে কিভাবে এটা করা যায়।

let arr= [1,2,3,4,5,6,7,8,9,10];
let newArr = arr.map(item => {
 return item % 2 == 0? item * item : item;
});
console.log(newArr);
/// OUTPUT:  [1, 4, 3, 16, 5, 36, 7, 64, 9, 100]

এখানে কলব্যাক ফাংশন এর ভিতরে দেখা যাচ্ছে প্রথমে ternary operator এর মাধ্যমে চেক করা হচ্ছেitemটা কি জোড় কিনা? যদি জোড় হয় তাহলে তাকে ডাবল করে রিটার্ন করা হচ্ছে নতুন অ্যারেতে আর বিজোড় হলে item যেটা আছে সেটাই রিটার্ন করবে নতুন অ্যারেতে।

এভাবে আরো অনেক ক্ষেত্রে আমরা আমাদের প্রয়োজন অনুযায়ী map()মেথড ব্যবহার করতে পারি.

Filter():

ফিল্টার মেথড টা খুবই মজার, filter() ওয়ার্ড টা শুনলেই অনেকটা বুঝা যায় এর কাজটা কি, filter() মানে হচ্ছে ছাঁকনি, এখন কথা হচ্ছে এই ছাঁকনি দিয়ে অ্যারেতে কি কাজ, আচ্ছা দেখা যাক কি করা যায় এই ছাঁকনি দিয়ে।

একটা অ্যারে হতে বিভিন্নভাবে নির্দিষ্ট কিছু ইলিমেন্ট গুলাকে বের করে করে নতুন অ্যারেতে রাখাই এই filter() এর কাজ।

Syntax: এর সিনট্যাক্স পুরটাই map() এর মত, শুধু একটু পার্থক্য আছে, সেটা হলো এর কলব্যাক ফাংশনটা রিটার্ন করে boolean: true or false যদি true রিটার্ন করে, তাহলে নতুন অ্যারেতে ঐ ভ্যালুটি বসিয়ে দেয়, আর যদি false করে তাহলে নতুন অ্যারেতে ভ্যালুটি বসাবে না।

let oldArray = [1,2,3,4,5];
let newArray = oldArray.filter((currentValue, index, arr) => {
      //return boolean if true then set value in newArray;
});

এবার উদাহরন দেখা যাকঃ

ধরলাম আমার কাছে একটা অ্যারে অবজেক্ট আছে, যেটার মধ্যে একটা ভার্সিটির কিছু ডিপার্টমেন্ট এবং সাথে স্টুডেন্ট দেওয়া আছে, এখান থেকে যে যে ডিপার্টমেন্ট এর স্টুডেন্ট ৫০০০ অথবা তার থেকে কম, তাদের কে ফিল্টার করে নতুন অ্যারেতে রাখব।

এটা যদি for loop দিয়ে করি তাহলে কেমন হয় দেখি,

let departments = [
 { name: 'CSE',    student: 7000},
 { name: 'EEE',    student: 2000},
 { name: 'CSIT',   student: 5000},
 { name: 'ME',     student: 4500},
 { name: 'ENGLISH',student: 6000},
 { name: 'BBA',    student: 8000},
 { name: 'LAW',    student: 2500}
];

let newDepartments = [];
for(let i=0; i<departments.length; i++){
  if(departments[i].student<=5000)
    newDepartments.push(departments[i]);
}
console.log(newDepartments);

///OUTPUT:
[
 { name: 'EEE',    student: 2000},
 { name: 'CSIT',   student: 5000},
 { name: 'ME',     student: 4500},
 { name: 'LAW',    student: 2500}
]

ফর লুপ এ এই কাজ টা করার জন্য আলাদা ভাবে কন্ডিশন দিয়ে তারপর তাকে নতুন অ্যারেতে পুশ করা হয়েছে, আর যদি filter() দিয়ে কাজটা করে ফেলি তাহলে আরো সহজ এবং সুন্দর দেখাবে, তাহলে করে ফেলি-

let newDepartments = departments.filter(department=>{
 return department.student<=5000;
});
//output:
  [ 
      { name: 'EEE',    student: 2000}, 
      { name: 'CSIT',   student: 5000}, 
      { name: 'ME',     student: 4500}, 
      { name: 'LAW',    student: 2500}
  ]

সেইম জিনিস অনেক সহজে ফিল্টার দিয়ে হয়ে গেল, আরেকটা উদাহরন দেখা যাক ফিল্টার দিয়ে-

let numbers = [1,2,3,4,5,6,7,8,9,10];
// using for loop
let evenNumbers = [];
for(let i=0; i<numbers.length; i++){
  if(numbers[i] % 2 === 0) evenNumbers.push(numbers[i]);
}
console.log(evenNumbers);

// using filter
let evenNumbers = numbers.filter(item=> item % 2 === 0);
console.log(evenNumbers);
// OUTPUT:  [2, 4, 6, 8, 10]

এখানে অ্যারে থেকে জোড় নাম্বার গুলোকে বের করে নতুন অ্যারেতে রাখা হয়েছে, ২ ভাবেই করা হয়েছে, ফিল্টার দিয়ে খুবই সহজ হয়ে গেল কাজটা, কোড ও বেশি লিখতে হলোনা। মোদ্দাকথা, filter() খুবই জোস একটা মেথড, অনেক কাজের জিনিস 🙂

Reduce():

map(), filter() এর মতো reduce() ও একটা কলব্যাক ফাংশন তার আর্গুমেন্ট হিসেবে নেয়, এবং ফাংশনকে প্রতিটা ইলিমেন্ট এর উপর এপ্লাই করে ফাইনাল্লি সিঙ্গেল ভ্যালু রিটার্ন করে।

syntax:

array.reduce(callbackFunction,initialValue);
callbackFunction(accumulator,currentValue,currentIndex,array){}

callbackFunction এর চারটি পারামিটার থাকে —

accumulator — এটি callbackFunction এর রিটার্ন ভ্যালু কে accumulates করে, যদি initialValue দেওয়া থাকে reduce() মেথডে, তাহলে accumulator এর ভ্যালু হবে initialValue , আর যদি initialValue না দেওয়া থাকে তাহলে অ্যারের প্রথম ভ্যালু টা-ই হবে accumulator এর ভ্যালু।
currentValue — যদি initialValue দেওয়া থাকে reduce() মেথডে, তাহলে currentValue হবে অ্যারের প্রথম ভ্যালু, আর যদি initialValue না দেওয়া থাকে তাহলে অ্যারের দ্বিতীয় ভ্যালু টা-ই হবে currentValueএর ভ্যালু।

যদি initialValue না দেওয়া থাকে তাহলে callbackFunction শুরু হবে array index 1 থেকে, আর যদি initialValue দেওয়া থাকে তাহলে 0 index থেকে শুরু হবে callbackFunction এর execution.

currentIndex — অ্যারের কারেন্ট ইনডেক্স যে ইলিমেন্ট এর উপর কলব্যাক ফাংশন execute হচ্ছে।
array — ৪র্থ প্যারামিটারে পাওয়া যাবে মূল অ্যারেকে।

অ্যারেতে যদি কোন ইলিমেন্ট না থাকে, আর যদি initialValue না দেওয়া থাকে তাহলে TypeError দেখাবে,

আর যদি অ্যারেতে একটা ইলিমেন্ট থাকে কিন্তু initialValue দেওয়া না থাকে তাহলে কলব্যাক ফাংশন কল না হয়ে প্রথম অ্যারের মূল ভ্যালু রিটার্ন করবে, সেম ভাবে ভাবে যদি initialValue দেওয়া থাকে কিন্তু অ্যারেতে কিছু নেই তাহলেও সেম কাজ করবে।

এবার উদাহরন এ যাই —

let arr = [1,2,3,4,5];

let result = arr.reduce((accumulator,currentValue)=>{
  return accumulator + currentValue;
});
console.log(result); /// 15

এখানে অ্যারের সবগুলা ইলিমেন্ট কে যোগ করে রেজাল্ট এ রাখা হয়েছে,আবার দেখি ৪ টা প্যারামিটার দিয়ে কিভাবে কাজ হচ্ছে

let arr = [1,2,3,4,5];
/// with initial value
let result = arr.reduce((accumulator,currentValue,currentIndex,array)=>{
  console.log(`result: ${accumulator}, current value: ${currentValue}, index: ${currentIndex}, array: ${array} `);
  return accumulator + currentValue;
},0);
///OUTUT:
result: 0, current value: 1, index: 0, array: 1,2,3,4,5 
result: 1, current value: 2, index: 1, array: 1,2,3,4,5 
result: 3, current value: 3, index: 2, array: 1,2,3,4,5 
result: 6, current value: 4, index: 3, array: 1,2,3,4,5 
result: 10, current value: 5, index: 4, array: 1,2,3,4,5 


/// without initial value
let result = arr.reduce((accumulator,currentValue,currentIndex,array)=>{
  console.log(`result: ${accumulator}, current value: ${currentValue}, index: ${currentIndex}, array: ${array} `);
  return accumulator + currentValue;
});
/// OUTPUT:
result: 1, current value: 2, index: 1, array: 1,2,3,4,5 
result: 3, current value: 3, index: 2, array: 1,2,3,4,5 
result: 6, current value: 4, index: 3, array: 1,2,3,4,5 
result: 10, current value: 5, index: 4, array: 1,2,3,4,5

এখানে ২ ভাবেই দেওয়া আছে,initialValue ছাড়া এবংinitialValue সহ, যেখানে initialValueদেওয়া আছে এক্সিকিউশন শুরু হয়েছে index 0থেকে, আর যেখানে initialValue দেওয়া নেই সেখানে এক্সিকিউশন শুরু হয়েছে index 1 থেকে।

মোটামোটি map(), filter(), reduce() সম্পর্কে ধারনা পেলাম, এবার এগুলাকে চেইন করা দেখব —

— — একটা অ্যারে অবজেক্ট আছে persons যার প্রতিটা অবজেক্ট এর ৩ টা প্রোপার্টি আছে, name,age,gender এখন এই অ্যারে অবজেক্ট থেকে সবmale person কে ফিল্টার করে আলাদা অ্যারেতে নিতে হবে, তারপর নতুন অ্যারের প্রত্যেক অবজেক্ট এর age এর সাথে ৫ যোগ করে রিটার্ন করতে হবে নতুন আরেকটা অ্যারেতে, তারপর ফাইনালি সবার age যোগ করে ফাইনাল আউটপুট দেখাতে হবে।

ওকে চলে যাই তাহলে কোড এ —

let persons = [
   { name: 'John', age: 25, gender: 'male'},
   { name: 'Doe',  age: 35, gender: 'male'},
   { name: 'Nayla',age: 18, gender: 'female'},
   { name: 'Alex', age: 21, gender: 'female'}, 
   { name: 'Jane', age: 22, gender: 'male'}
];

let age = persons.filter((person)=>{
  return person.gender === 'male';
}).map((person)=>{
  return person.age + 5;
}).reduce((sum,age)=>{
  return sum + age;
});
console.log(age); /// 97

সেশকথাঃ

array এর এই ৩ টি মেথড জানা জাভাস্ক্রিপ্ট ডেভেলপার হিসেবে অপরিহার্য, আর এই মেথড গুলো খুবই ব্যবহার হয় সচরাচর।

পোস্ট এর ভিতরে ভুল ত্রুটি থাকলে ধরিয়ে দিবেন ঠিক করে নিব, ধন্যবাদ।

JavaScript Array methods (map(),filter(),reduce())

Map():

Filter():

Reduce():

সেশকথাঃ

Leave a Reply Cancel reply