Arrow function,map,filter,find

আসসালামুআলাইকুম

আজকে আমরা যে বিষয় নিয়ে আলোচনা করবো সেটা হলো জাভাস্ক্রিপ্টের es6 এর কয়েকটা টপিক যে জিনিষগুলো আমাদের জানা প্রয়োজন আমাদের ভিউ বা রিয়েক্ট যেটায় শিখতে চায় কি না।

• -map

• -filter

• -find

আজকে এই ৩ টা বিষয় নিয়ে আলোচনা করব।তবে এই ৩টা শিখতে হলে আপনাকে অবশ্যই আরেকটা জিনিষ ভালভাবে জানতে হবে সেটা হলো অ্যারো ফাংশন। তাহলে অ্যারো ফাংশন কিভাবে কাজ করে? -অ্যারো ফাংশন লেখার সময় আমাদের ফাংশন লিখতে হয় না।

সাধারন ফাংশনঃ

const Ggreetings = function(){
console.log("this is normal function"); }
//function call
 Ggreetings();

const greeting = ()=> "hello welcome to arrow function"; 
//function call 
greeting();

//normal functionwith parameter 
function add(num1, num2) { 
return num1 + num2;
 }
//function call
 add(5,10);

//arrow function with parameter
const add2 = (num1, num2) => num1 + num2;

//function call
 add2(5,10);

তাহলে এখানে আমরা বুঝতে পারছি খুব সহজেই আমরা এক লাইনে ফাংশন লিখে ফেলতে পারছি । এবং খুব সহজেই আমরা কোন কিছু রিটার্ন করতে পারি অ্যারো ফাংশনের সাহায্যে।

এবার প্রথমেই আসি ম্যাপ নিয়ে। ম্যাপ টা কে আপনারা মানচিত্রের মত বিশাল মনে করতে পারেন কেন বলছি কারন আপনি ম্যাপ কে filter আর find এর সাথে গুলিয়ে ফেলবেন ।

ম্যাপ কি করে? কিভাবে ডেটা রিটার্ন করে?কখন ম্যাপ ব্যাবহার করব?

আমাদের যখন অ্যারে আকারে কোন ডেটা প্রয়োজন হবে কোন কন্ডিশন ছাড়া তখন আমরা ম্যাপ ব্যাবহার করব।

যেমনঃ

const Myproducts = [ 

{ name: 'hot water bottle', price: 50, color: 'yellow' },

 { name: 'mobile phone cover', price: 15000, color: 'black' },

 { name: 'smart tv', price: 3000, color: 'black' },

 { name: 'sticky note', price: 30, color: 'pink' },

 { name: 'water glass', price: 3, color: 'white' }

 ];

এই অ্যারে এর মধ্য থেকে আমার নাম গুলো লাগবে তাহলে এখানে আমরা ম্যাপ ব্যাবহার করব।

const productNames = Myproducts.map(product => product.name);

console.log(productNames);

কোড টা যদি আমরা রান করি তাহলে আমরা দেখতে পারব খুব সুন্দর করে একটা অ্যারে এর মধ্যে আমাদের নাম গুলো রিটার্ন করছে।

এবার আসি filter নিয়ে।

ফিল্টার কি করে? কিভাবে ডেটা রিটার্ন করে?কখন ফিল্টার ব্যাবহার করব?

ফিল্টার আমরা সাধারনত ব্যাবহার করব যখন আমাদের নির্দিষ্ট একটা অপারেশন এর পরে আমার ওই অপারেশন এর ওপর ভিত্তি করে ডেটা রিটার্ন করবে সেক্ষেত্রে।

যেমনঃ

const Myproducts = [ 

{ name: 'hot water bottle', price: 50, color: 'yellow' },

 { name: 'mobile phone cover', price: 15000, color: 'black' },

 { name: 'smart tv', price: 3000, color: 'black' },

 { name: 'sticky note', price: 30, color: 'pink' },

 { name: 'water glass', price: 3, color: 'white' }

 ];

ওপরের অ্যারের মধ্যে থেকে আমাদের প্রাইস গুলো লাগবে যেটা কি না ১০০ এর থেকে বড় হবে ।

const expensive = products.filter(product => product.price > 100);

console.log(expensive);

এই কোড টা যদি আমরা রান করি তাহলে দেখতে পাব কেবল মাত্র যেগুলোর প্রাইস ১০০ এর থেকে বড় সেগুলোই আমাদের রিটার্ন করছে।এবং এক্ষেত্রে রিটার্ন করবে একটা প্রোডাক্টের সব তথ্য। এবং কোন তথ্যই যদি না পায় তাহলে এখানে empty array return করবে।

এবার আসি find নিয়ে।

find কি করে? কিভাবে ডেটা রিটার্ন করে?কখন find ব্যাবহার করব?

find আমরা সাধারনত ব্যাবহার করব যখন আমরা নির্দিষ্ট কোন ডেটা খুঝবো সেক্ষেত্রে তবে এখানে একটা বিষয় আপনার যদি একই সাথে অনেকগুলো ডেটা ম্যাচ করে তাহলে সব গুলো রিটার্ন করবে না। প্রথমে যে ডেটা টা পাবে কেবল মাত্র সেটা কেই রিটার্ন করবে।এবং filter object return করে।

যেমনঃ

const Myproducts = [ 

{ name: 'hot water bottle', price: 50, color: 'yellow' },

 { name: 'mobile phone cover', price: 15000, color: 'black' },

 { name: 'smart tv', price: 3000, color: 'black' },

 { name: 'sticky note', price: 30, color: 'pink' },

 { name: 'water glass', price: 3, color: 'white' }

 ];

ওপরের অ্যারের মধ্যে থেকে ব্ল্যাক যেখানে যেখানে আছে কেবল মাত্র সেটায় রিটার্ন করবে ।

const blacks = Myproducts.find(product => product.color == 'black'); console.log(black);

এই কোড টা যদি আমরা রান করি তাহলে দেখতে পাব কেবল মাত্র প্রথম টাই আমাদের রিটার্ন করছে । এবং কোন তথ্যই যদি না পায় তাহলে এখানে undefined return করবে।

Overview

• -map ==>map আমাদের array আকারে ডেটা রিটার্ন করবে এবং যতগুলো ডেটা আছে সব গুলো রিটার্ন করবে অপারেশন এর ওপর ভিত্তি করে।

• -filter ==>filter ও আমাদের array আকারে ডেটা রিটার্ন করবে যতগুলো ডেটা আছে সব গুলো তবে কন্ডিশনের ওপর ভিত্তি করে।এবং কোন ডেটা না পেলে সে empty array return করবে।

• -find ==>find আমাদের object আকারে ডেটা return করবে এবং যেটাকে প্রথম পাবে সেটাকে রিটার্ন করে স্টপ হয়ে যাবে ।এবং object যদি কোন ডেটা না পায় তাহলে সে undefined return করবে।

আশা করি এখন আর আপনাদের কোন কনফিউশন থাকবে না এগুলো নিয়ে।

thank you.

Rakibul Islam