প্রোগ্রামাররা তাদের কোডে পুনরাবৃত্তি কমাতে পছন্দ করে। আপনি যত বেশি আপনার কোড পুনরাবৃত্তি করবেন, এটি তত কম রক্ষণাবেক্ষণযোগ্য হবে এবং আপনার প্রোগ্রামগুলি ধীর গতিতে চলবে। এই কারণেই ডেটাসেটের মাধ্যমে পুনরাবৃত্তি করার জন্য জাভাস্ক্রিপ্টে বিভিন্ন পদ্ধতি রয়েছে।
এই পদ্ধতিগুলির মধ্যে একটিকে map() বলা হয় পদ্ধতি এই পদ্ধতিটি একটি বিদ্যমান অ্যারের মাধ্যমে লুপ করে এবং সেই অ্যারের সমস্ত আইটেমের উপর একটি নির্দিষ্ট ফাংশন সম্পাদন করে।
এই নির্দেশিকায়, আমরা কিভাবে জাভাস্ক্রিপ্ট map() ব্যবহার করতে হয় সে সম্পর্কে কথা বলতে যাচ্ছি। ফাংশন আমরা map() এর তিনটি সাধারণ উদাহরণের মধ্য দিয়ে হেঁটে যাব আপনাকে শুরু করতে সাহায্য করার জন্য কাজ করে৷
মানচিত্র ফাংশন কি?
জাভাস্ক্রিপ্ট map() পদ্ধতি একটি অ্যারের প্রতিটি আইটেমের একটি নির্দিষ্ট ফাংশন কল করে। এই ফাংশনের ফলাফলটি তার নিজস্ব অ্যারেতে স্থানান্তরিত হয়।
উদাহরণস্বরূপ, ধরুন আপনি একটি অ্যারের প্রতিটি আইটেমকে দুই দ্বারা গুণ করতে চান। আপনি এমন একটি ফাংশন তৈরি করে এটি করতে পারেন যা প্রতিটি অ্যারে আইটেমকে দুই দ্বারা গুণ করে এবং সেই ফাংশনটিকে একটি map() এ স্থানান্তরিত করে পদ্ধতি
map() এর সিনট্যাক্স ফাংশন হল:
const newArray =oldArray.map(function, thisValue);
function হল কলব্যাক ফাংশন যা অ্যারের প্রতিটি উপাদানে চালানো হবে। ফাংশন সম্পর্কে আরও জানতে, আপনি জাভাস্ক্রিপ্ট ফাংশনগুলির জন্য আমাদের চূড়ান্ত গাইড পড়তে পারেন। thisValue ডিফল্ট মান যা this-এ সংরক্ষণ করা হবে ফাংশনে পরিবর্তনশীল। ডিফল্টরূপে, এটি অনির্ধারিত।
মানচিত্র পদ্ধতি কলব্যাক ফাংশনের ফলাফলের উপর ভিত্তি করে একটি নতুন অ্যারে তৈরি করে।
81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷
৷গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।
map() পদ্ধতির অনেকগুলি ব্যবহার রয়েছে। অ্যারে উপাদানগুলির একটি তালিকায় একটি ফাংশন কল করা সবচেয়ে সাধারণ। এর একটি উদাহরণ হল সংখ্যার তালিকায় প্রতিটি সংখ্যাকে গুণ করা, বা স্ট্রিংগুলির তালিকায় প্রতিটি স্ট্রিংয়ের দৈর্ঘ্য খুঁজে বের করা।
আপনি জাভাস্ক্রিপ্ট লাইব্রেরিতে তালিকা রেন্ডার করতে ব্যবহৃত ফাংশনটিও পাবেন যেমন React বা Vue.js।
মানচিত্র সহ একটি ফাংশন কল করা
map() পদ্ধতি আপনাকে একটি তালিকার প্রতিটি আইটেমের পুনরাবৃত্তিমূলক কাজ সম্পাদন করতে দেয়, যা এটিকে বেশ কয়েকটি ক্ষেত্রে কার্যকর করে তোলে।
ধরা যাক যে আপনি একটি কুকি স্টোরের মালিক এবং আপনি প্রতিটি কুকির দাম 5% বাড়িয়ে দিতে চলেছেন৷ সমস্ত নতুন মূল্য পৃথকভাবে গণনা করার পরিবর্তে, আপনি 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);}); লগ(নতুন কুকি মূল্য); আমাদের কোড ফিরে আসে:
["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
এই উদাহরণে, আমরা প্রতিটি কুকির দাম ৫% বাড়িয়েছি। প্রথমে, আমরা পরিবর্তনশীল "cookiePrices"-এ কুকির দামের একটি তালিকা ঘোষণা করেছি। তারপর, আমরা map() ব্যবহার করেছি একটি ফাংশন সহ পদ্ধতি যা প্রতিটি কুকির জন্য 5% মূল্য বৃদ্ধি গণনা করে।
"cookie * 1.05" শতাংশ বৃদ্ধি গণনা করেছে, তারপরে আমরা সেই বৃদ্ধি ফিরিয়ে দিয়েছি, নিকটতম দুই দশমিক স্থানে বৃত্তাকার। অবশেষে, আমরা console.log() ব্যবহার করে কনসোলে নতুন অ্যারে প্রিন্ট করেছি পদ্ধতি
আমাদের কোডকে আরও পাঠযোগ্য করার জন্য আমরা আমাদের ফাংশনকে তার নিজস্ব ফাংশনে স্থানান্তর করতে পারি:
ফাংশন calculateIncrease(cookie) { var মূল্য =কুকি * 1.05; ফেরত মূল্য.toFixed(2);}const cookiePrices =[1.50, 1.75, 1.60, 2.00, 2.05, 1.45];const newCookiePrices =cookiePrices.map(calculateIncrease);console.log(newCookiePrices);
আমাদের কোড আগের থেকে একই মান প্রদান করে, কিন্তু আরো পঠনযোগ্য: ["1.58", "1.84", "1.68", "2.10", "2.15", "1.52"]
একটি অ্যারেতে আইটেম পরিবর্তন করুন
map() পদ্ধতি প্রায়ই একটি অ্যারে আইটেম পরিবর্তন করতে ব্যবহৃত হয়. ধরা যাক যে আমাদের কুকি শপ তার গ্রাহকদের জন্য একটি আনুগত্য প্রোগ্রাম তৈরি করছে। আপনার কেনা প্রতিটি কুকি আপনাকে 10 পয়েন্ট অর্জন করে, এবং আপনি যদি 100 পয়েন্ট অর্জন করেন, তাহলে আপনি একটি বিনামূল্যে কুকি অর্জন করবেন।
নিম্নলিখিত প্রোগ্রামটি আমাদের এই কাজটি সম্পন্ন করার অনুমতি দেবে:
var গ্রাহকরা =[ { নাম:"হানা জিওফ্রে", কুকিজ ক্রয় করা হয়েছে:2 }, { নাম:"পিটার ক্লার্কসন", কুকিজ ক্রয় করা হয়েছে:3 }, { নাম:"স্টিভেন হ্যানসন", কুকিজ কেনাকাটা:7 }]ফাংশন গণনা লয়্যালটি পয়েন্টস(গ্রাহক) ) { var newCustomer ={ নাম:customer.name, cookiesPurchased:customer.cookiesPurchased, পয়েন্ট:customer.cookiesPurchased * 10 } return newCustomer;}var customersWithPoints =customers.map(calculateLoyaltyPoints);console.log(customersWint);>
আমাদের কোড ফিরে আসে:
[{ কুকিজ কেনা:2, নাম:"হানা জিওফ্রে", পয়েন্ট:20 }, { কুকিজ কেনা:3, নাম:"পিটার ক্লার্কসন", পয়েন্ট:30 }, { কুকিজ কেনা:7, নাম:"স্টিভেন হ্যানসন", পয়েন্ট:70 }]
এই উদাহরণে, আমরা প্রতিটি গ্রাহকের কতগুলি কুকি কিনেছে তার উপর ভিত্তি করে মোট পয়েন্টের সংখ্যা গণনা করেছি।
প্রথমে, আমরা "গ্রাহক" নামক বস্তুর একটি অ্যারে ঘোষণা করেছি। এই তালিকাটি আমাদের গ্রাহকদের নাম সংরক্ষণ করে এবং কী:মূল্য জোড়া ব্যবহার করে তারা কতগুলি কুকি কিনেছে।
তারপর, আমরা calculateLoyaltyPoints() নামে একটি ফাংশন ঘোষণা করেছি . এই ফাংশনটি প্রতিটি গ্রাহক আইটেমের সাথে একটি নতুন আইটেম যোগ করে যার নাম "পয়েন্ট" যা প্রতিটি গ্রাহকের কেনা কুকির সংখ্যা 10 দ্বারা গুণ করে গণনা করা হয়।
আমরা map() ব্যবহার করি আমাদের গ্রাহকদের তালিকার মাধ্যমে পুনরাবৃত্তি করার পদ্ধতি এবং আমাদের calculateLoyaltyPoints() প্রয়োগ করুন ফাংশন অবশেষে, আমরা গ্রাহকদের সংশোধিত তালিকা প্রিন্ট আউট. এই তালিকাটি এখন আমাদের "পয়েন্ট" মান প্রতিফলিত করে যা আমরা প্রতিটি গ্রাহকের এন্ট্রিতে যোগ করেছি।
লাইব্রেরি ব্যবহার করে একটি তালিকা রেন্ডার করুন
map() পদ্ধতি সাধারণত জাভাস্ক্রিপ্ট লাইব্রেরিতে ব্যবহার করা হয় যেমন প্রতিক্রিয়া। এই পদ্ধতির উদ্দেশ্য হল একটি তালিকায় আইটেম রেন্ডার করা। চলুন map()-এর একটি উদাহরণ দিয়ে চলুন প্রতিক্রিয়ায়
ধরুন আমরা আমাদের দোকানে আমাদের ওয়েবসাইটে যে কুকি বিক্রি করে তার একটি তালিকা দেখাতে চাই। আমরা এই কোডটি ব্যবহার করে তা করতে পারি:
"react" থেকে প্রতিক্রিয়া আমদানি করুন;"react-dom" থেকে ReactDOM আমদানি করুন;var কুকি =["রাস্পবেরি চকোলেট চিপ", "হোয়াইট চকলেট চিপ", "ওট", "দুধ চকোলেট চিপ"];কনস্ট কুকিলিস্ট =( ) => ( {cookies.map((cookie, i) => - {cookie}
)}
);const root =document.getElementById("root");ReactDOM.render(
এই কোডটি প্রতিক্রিয়াতে একটি উপাদান তৈরি করে যা একটি তালিকা রেন্ডার করে। প্রতিটি তালিকা আইটেম একটি
map() ব্যবহার করে রেন্ডার করা হয় . map() তালিকার প্রতিটি আইটেমের জন্য একটি পৃথক মানচিত্র বনাম ইটারেটর পদ্ধতি
মানচিত্র হল জাভাস্ক্রিপ্টে একটি পুনরাবৃত্তি পদ্ধতির একটি উদাহরণ। এই পদ্ধতিগুলি আপনাকে একটি তালিকার সমস্ত আইটেম লুপ করতে এবং কিছু ক্রিয়া সম্পাদন করতে দেয়।
আপনি যখন map() ব্যবহার করার সিদ্ধান্ত নিচ্ছেন ফাংশন, অন্য পুনরাবৃত্ত পদ্ধতি ভাল হবে কিনা তা প্রথমে জিজ্ঞাসা করা ভাল অনুশীলন। এটি নিশ্চিত করবে যে আপনি কাজের জন্য সঠিক টুলটি বেছে নিয়েছেন।
এখানে জাভাস্ক্রিপ্টে বিদ্যমান অন্যান্য পুনরাবৃত্তি পদ্ধতি রয়েছে:
- কমাও() :হ্রাস পদ্ধতি আপনাকে একটি অ্যারেকে একটি একক মান কমাতে দেয়। আপনি যদি অ্যারেতে সমস্ত আইটেম যোগ করার মতো কিছু করতে চান তবে এই পদ্ধতিটি সর্বোত্তম।
- ফিল্টার() :ফিল্টার আপনাকে একটি তালিকা থেকে আইটেমগুলি সরাতে দেয় যা নির্দিষ্ট মানদণ্ড পূরণ করে না৷ ৷
- প্রত্যেকটির জন্য() :forEach() একটি তালিকার প্রতিটি আইটেমে একটি ফাংশন চালায়। forEach() লুপের জন্য অনুরূপ কারণ এটি আপনাকে একটি অ্যারে লুপ করতে এবং প্রতিটি আইটেমের উপর একটি কাজ সম্পাদন করতে দেয়৷
আপনি হয়তো মনে মনে ভাবছেন, “মানচিত্রটি আসলেই forEach() এর মত শোনাচ্ছে পদ্ধতি তারা কি একই?" এটা একটা ভালো প্রশ্ন. এই দুটি পদ্ধতির মধ্যে একটি সূক্ষ্ম পার্থক্য আছে।
map() ফাংশন একটি তালিকার উপর পুনরাবৃত্তি করে, তালিকার প্রতিটি আইটেম পরিবর্তন করে এবং একটি নতুন তালিকা প্রদান করে। forEach() অন্যদিকে, ফাংশন একটি তালিকার উপর পুনরাবৃত্তি করে এবং একটি পার্শ্ব প্রতিক্রিয়া হিসাবে, তালিকায় কিছু অপারেশন প্রয়োগ করে।
map() যদি আপনি একটি তালিকার প্রতিটি আইটেমের একটি ফাংশন কল করতে, প্রতিক্রিয়ার মতো একটি ফ্রেমওয়ার্কে একটি তালিকা উপাদান ঘোষণা করতে বা একটি তালিকার বিষয়বস্তু পরিবর্তন করতে চান তবে ফাংশনটি সবচেয়ে ভাল ব্যবহার করা হয়৷
উপসংহার
map() পদ্ধতি একাধিকবার পুনরাবৃত্তিমূলক কাজ সম্পাদনের জন্য দরকারী। এটি তালিকার মতো প্রতিক্রিয়াতে উপাদানগুলি ঘোষণা করার জন্যও কার্যকর।
এই টিউটোরিয়ালে, আমরা map() এর তিনটি প্রধান ব্যবহার বিশ্লেষণ করেছি পদ্ধতি এখন আপনি JavaScript map() ব্যবহার করা শুরু করতে প্রস্তুত একজন বিশেষজ্ঞ বিকাশকারীর মত পদ্ধতি!
