Blog

JavaScript এর map() মেথড: সম্পূর্ণ টিউটোরিয়াল

JavaScript-এ map() হলো একটি Array মেথড যা প্রতিটি এলিমেন্টের জন্য নির্দিষ্ট একটি ফাংশন চালিয়ে নতুন একটি অ্যারে রিটার্ন করে। এটি খুবই শক্তিশালী এবং প্রায়ই ব্যবহৃত হয় যখন আপনাকে কোনো অ্যারের প্রত্যেকটি উপাদানের মান পরিবর্তন বা ট্রান্সফর্ম করতে হয়। এই টিউটোরিয়ালে আমরা map() মেথড কী, কীভাবে কাজ করে, বিভিন্ন উদাহরণ এবং গুরুত্বপূর্ণ দিকগুলো বিস্তারিতভাবে আলোচনা করবো।

১. map() মেথড কি?

map() মেথড অ্যারের প্রতিটি উপাদানের উপর একটি ফাংশন প্রয়োগ করে এবং ফলাফল হিসেবে একটি নতুন অ্যারে রিটার্ন করে। মূল অ্যারে অপরিবর্তিত থাকে। এটি for loop এর তুলনায় অনেক বেশি সংক্ষিপ্ত এবং পরিষ্কার কোড লেখার সুযোগ দেয়।

২. সিনট্যাক্স

৩. map() এর ব্যবহার ও উদাহরণ

নিচে বিভিন্ন উদাহরণে map() মেথডের ব্যবহার দেখানো হলোঃ

<script>
  // নম্বর অ্যারের প্রতিটি উপাদানকে দ্বিগুণ করা
  let numbers = [1, 2, 3, 4, 5];
  let doubled = numbers.map(function(num) {
    return num * 2;
  });
  console.log(doubled); // [2, 4, 6, 8, 10]

  // ES6 অ্যারো ফাংশন দিয়ে সহজ ব্যবহার
  let squares = numbers.map(num => num * num);
  console.log(squares); // [1, 4, 9, 16, 25]

  // অবজেক্ট অ্যারের মধ্যে শুধু নামের তালিকা বের করা
  let users = [
    {name: "রাকিব", age: 25},
    {name: "সাবিনা", age: 30},
    {name: "জয়", age: 22}
  ];
  let names = users.map(user => user.name);
  console.log(names); // ["রাকিব", "সাবিনা", "জয়"]
</script>

৪. map() এর প্রধান বৈশিষ্ট্য

• নতুন অ্যারে: map() সর্বদা একটি নতুন অ্যারে রিটার্ন করে, মূল অ্যারে অপরিবর্তিত থাকে।
• ফাংশন আর্গুমেন্ট: map() কে একটি কলব্যাক ফাংশন দিতে হয় যা অ্যারের প্রতিটি উপাদানের জন্য চালানো হয়।
• তিনটি আর্গুমেন্ট: কলব্যাক ফাংশন তিনটি আর্গুমেন্ট নেয় — element, index, এবং array।
• অপশনাল thisArg: map() মেথডে দ্বিতীয় আর্গুমেন্ট হিসেবে একটি thisArg পাস করা যায় যা কলব্যাকের this হিসেবে ব্যবহৃত হয়।

৫. map() ও filter() এর পার্থক্য

৬. map() ব্যবহার করে উন্নত উদাহরণ

<script>
  // নামের প্রথম অক্ষর বড় করে নতুন অ্যারে তৈরি
  let names = ["রাকিব", "সাবিনা", "জয়"];
  let capitalizedNames = names.map(name => name.charAt(0).toUpperCase() + name.slice(1));
  console.log(capitalizedNames); // ["রাকিব", "সাবিনা", "জয়"] (বাংলা অক্ষরের জন্য ভিন্ন আচরণ হতে পারে)

  // অ্যারের প্রতিটি নামের দৈর্ঘ্য বের করা
  let lengths = names.map(name => name.length);
  console.log(lengths); // [5, 6, 3]

  // অবজেক্টে নতুন ফিল্ড যোগ করা map() দিয়ে
  let users = [
    {name: "রাকিব", age: 25},
    {name: "সাবিনা", age: 30},
    {name: "জয়", age: 22}
  ];
  let usersWithId = users.map((user, index) => {
    return {
      id: index + 1,
      name: user.name,
      age: user.age
    };
  });
  console.log(usersWithId);
  /*
  [
    {id: 1, name: "রাকিব", age: 25},
    {id: 2, name: "সাবিনা", age: 30},
    {id: 3, name: "জয়", age: 22}
  ]
  */
</script>

৭. উপসংহার

JavaScript এর map() মেথড হল অ্যারের প্রতিটি উপাদানের উপর নির্দিষ্ট ফাংশন প্রয়োগ করে নতুন অ্যারে তৈরি করার সবচেয়ে সহজ ও কার্যকরী উপায়। এটি কোডকে সংক্ষিপ্ত এবং পরিষ্কার করে এবং ডেটা ট্রান্সফর্মেশনের জন্য অপরিহার্য। আপনাকে অবশ্যই map() মেথড ভালোভাবে জানতে এবং প্র্যাকটিস করতে হবে যাতে দক্ষভাবে অ্যারে নিয়ে কাজ করতে পারেন।