প্রোগ্রামাররা কোডে পুনরাবৃত্তি এড়াতে চান। কোড যত কম রিপিট হবে, প্রোগ্রাম তত মেইনটেইনেবল ও দ্রুত হবে। এইीलिये জাভাস্ক্রিপ্টে ডেটাসেটের মধ্য দিয়ে ইটারেট করার বিভিন্ন মেথড রয়েছে।
একই মেথড হলো map()। এটি একটি অ্যারেের মাধ্যমে লুপ করে এবং প্রতিটি আইটেমের ওপর একটি নির্দিষ্ট ফাংশন প্রয়োগ করে। ফলাফল একটি নতুন অ্যারে হিসেবে ফেরত দেয়।
এই গাইডে জাভাস্ক্রিপ্ট map() ফাংশন কীভাবে ব্যবহার করতে হয় এবং এর তিনটি সাধারণ উদাহরণ দেখাব।
Map ফাংশন কী?
জাভাস্ক্রিপ্ট map() মেথড একটি অ্যারের প্রতিটি আইটেমের ওপর একটি কলব্যাক ফাংশন কল করে। ফাংশনের ফলাফল একটি নতুন অ্যারে তৈরি করে।
উদাহরণস্বরূপ, একটি অ্যারের সব আইটেমকে দ্বিগুণ করতে চাইলে একটি ফাংশন লিখে map()-এ ব্যবহার করতে পারেন।
map() ফাংশনের সিনট্যাক্স:
const newArray = oldArray.map(function, thisValue);
এখানে function হলো কলব্যাক ফাংশন যা অ্যারের প্রতিটি এলিমেন্টে রান করবে। thisValue হলো ফাংশনের ভিতরে this কীওয়ার্ডের ডিফল্ট মান (ডিফল্টভাবে undefined)।
map() মেথড কলব্যাক ফাংশনের ফলাফল ভিত্তিক একটি নতুন অ্যারে তৈরি করে।
Map দিয়ে ফাংশন কল করা
map() মেথড একটি লিস্টের প্রতিটি আইটেমের ওপর পুনরাবৃত্তিমূলক কাজ করতে দেয়, যা অনেক ক্ষেত্রে উপযোগী।
ধরি আপনার একটি কুকি দোকান আছে এবং প্রতিটি কুকির দাম ৫% বাড়াতে চান। প্রতিটি দাম আলাদা করে ক্যালকুলেট না করে map() ব্যবহার করুন:
const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(cookie => { var price = cookie * 1.05; return price.toFixed(2); }); console.log(newCookiePrices);
ফলাফল:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
এখানে cookie * 1.05 দিয়ে ৫% বৃদ্ধি ক্যালকুলেট করা হয়েছে, toFixed(2) দিয়ে দুটি দশমিক পর্যন্ত রাউন্ড করা হয়েছে। ফাইনালি console.log() দিয়ে নতুন অ্যারে প্রিন্ট করা হয়েছে।
কোড আরও পড়া সহজ করতে ফাংশনটি আলাদা করে লিখা যায়:
function calculateIncrease(cookie) { var price = cookie * 1.05; return price.toFixed(2); } const cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45]; const newCookiePrices = cookiePrices.map(calculateIncrease); console.log(newCookiePrices);
ফলাফল একই, কিন্তু কোড বেশি রিডেবল।
অ্যারে আইটেম পরিবর্তন করা
map() মেথড প্রায়শই অ্যারে আইটেম পরিবর্তন করতে ব্যবহৃত হয়। ধরি আপনার কুকি দোকানে লয়াল্টি প্রোগ্রাম চালু করা হচ্ছে। প্রতিটি কুকি কেনায় ১০ পয়েন্ট, ১০০ পয়েন্ট হলে ফ্রি একটি কুকি।
নিচের প্রোগ্রামটি এই কাজটি করবে:
var customers = [ { name: "Hannah Geoffrey", cookiesPurchased: 2 }, { name: "Peter Clarkson", cookiesPurchased: 3 }, { name: "Steven Hanson", cookiesPurchased: 7 } ] function calculateLoyaltyPoints(customer) { var newCustomer = { name: customer.name, cookiesPurchased: customer.cookiesPurchased, points: customer.cookiesPurchased * 10 } return newCustomer; } var customersWithPoints = customers.map(calculateLoyaltyPoints); console.log(customersWithPoints);
ফলাফল:
[{ cookiesPurchased: 2, name: "Hannah Geoffrey", points: 20 }, { cookiesPurchased: 3, name: "Peter Clarkson", points: 30 }, { cookiesPurchased: 7, name: "Steven Hanson", points: 70 }]
এখানে প্রতিটি কাস্টমারের কেনা কুকির সংখ্যা অনুযায়ী পয়েন্ট ক্যালকুলেট করা হয়েছে। map() দিয়ে লুপ চালিয়ে calculateLoyaltyPoints() ফাংশন প্রয়োগ করা হয়েছে।
লাইব্রেরি (React) দিয়ে লিস্ট রেন্ডার করা
map() মেথড রিয়্যাক্ট (React) এর মতো জাভাস্ক্রিপ্ট লাইব্রেরিতে লিস্ট রেন্ডার করতে ব্যাপকভাবে ব্যবহৃত হয়।
ধরি আপনার দোকানের কুকির লিস্ট ওয়েবসাইটে দেখাতে চান। রিয়্যাক্টে এভাবে করা যায়:
import React from "react"; import ReactDOM from "react-dom"; var cookies = ["Raspberry Chocolate Chip", "White Chocolate Chip", "Oat", "Milk Chocolate Chip"]; const CookieList = () => ( <div> <ul>{cookies.map((cookie, i) => <li key={i}>{cookie}</li> )} </ul> </div> ); const root = document.getElementById("root"); ReactDOM.render(<CookieList />, root);
এই কোড একটি রিয়্যাক্ট কম্পোনেন্ট তৈরি করে যা একটি লিস্ট রেন্ডার করে। map() প্রতিটি আইটেমের জন্য একটি <li> ট্যাগ তৈরি করে এবং i ভেরিয়েবল দিয়ে ইউনিক কী দেয়।
Map বনাম অন্যান্য ইটারেটর মেথড
map() জাভাস্ক্রিপ্টের একটি ইটেরেটর মেথড। এই মেথডগুলো লিস্টের সব আইটেমের মধ্য দিয়ে লুপ করে কিছু অপারেশন করে।
map() ব্যবহার করার আগে ভাবুন অন্য কোন ইটেরেটর মেথড উপযোগী কিনা। অন্যান্য ইটেরেটর মেথড:
- reduce(): অ্যারেকে একটি একক মানে রিডিউস করে (যেমন: সব সংখ্যা যোগ করা)।
- filter(): নির্দিষ্ট শর্ত পূরণ না করার আইটেমগুলো ফিল্টার আউট করে।
- forEach(): অ্যারের প্রতিটি আইটেমের ওপর ফাংশন রান করে।
forলুপের মতোই কাজ করে কিন্তু নতুন অ্যারে তৈরি করে না।
map() এবং forEach()-এর পার্থক্য: map() প্রতিটি আইটেম পরিবর্তন করে একটি নতুন অ্যারে ফেরত দেয়, আর forEach() কেবল সাইড ইফেক্ট হিসেবে অপারেশন করে, নতুন অ্যারে ফেরত দেয় না।
map() সবচেয়ে ভালো কাজ করে যখন: প্রতিটি আইটেমের ওপর ফাংশন কল করতে হয়, রিয়্যাক্টের মতো ফ্রেমওয়ার্কে কম্পোনেন্ট ডিক্লেয়ার করতে হয়, অ্যারের কন্টেন্ট পরিবর্তন করতে হয়।
উপসংহার
map() মেথড পুনরাবৃত্তিমূলক কাজ একাধিক বার করার জন্য খুবই উপযোগী। রিয়্যাক্টের মতো লাইব্রেরিতে কম্পোনেন্ট ডিক্লেয়ার করতেও এটি ব্যবহার হয়।
এই টিউটোরিয়ালে map() মেথডের তিনটি প্রধান ব্যবহার আলোচনা করা হয়েছে। এখন আপনি একজন এক্সপার্ট ডেভেলপারের মতো জাভাস্ক্রিপ্ট map() মেথড ব্যবহার করতে পারবেন!
