জাভাস্ক্রিপ্ট অ্যারে মেথডস: সহজ ভাষায়

জাভাস্ক্রিপ্টে কাজ করার সময় অ্যারে (Array) আমাদের নিত্যদিনের সঙ্গী। অ্যারে হলো একটি বিশেষ ভেরিয়েবল, যা একটি লিস্টের মতো করে অনেকগুলো মান (value) একসাথে ধরে রাখতে পারে। এই অ্যারে নিয়ে ভালোভাবে কাজ করার জন্য জাভাস্ক্রিপ্ট আমাদের অনেকগুলো বিল্ট-ইন মেথড বা টুলস দিয়েছে।

চলুন, এই টুলসগুলোর সাথে পরিচিত হওয়া যাক। আজ আমরা শিখব কীভাবে অ্যারে থেকে ডেটা খুঁজে বের করতে হয় এবং অ্যারে থেকে নির্দিষ্ট অংশ কেটে আলাদা করতে হয়।

১. find() ও findIndex(): প্রথম জনকে খুঁজে বের করা

ধরুন, আপনার কাছে বন্ধুদের একটা লম্বা লিস্ট আছে। আপনি খুঁজছেন 'আরাফাত' নামের কেউ সেই লিস্টে আছে কিনা। find() মেথড ঠিক এই কাজটিই করে।

• find() মেথড: এটি একটি শর্তের উপর ভিত্তি করে অ্যারের মধ্যে প্রথম যে উপাদানটি সেই শর্ত পূরণ করে, তাকে রিটার্ন করে। যদি কোনো উপাদানই শর্ত পূরণ না করে, তাহলে undefined রিটার্ন করে। এই মেথডটি মূল অ্যারেতে কোনো পরিবর্তন করে না।

  • উদাহরণ:

    const friends = ["abul", "baker", "arrafat", "mojnu"];
    const result = friends.find((name) => name === "arrafat");
    console.log(result);
    // আউটপুট: arrafat

• findIndex() মেথড: এটি find() এর মতোই কাজ করে, কিন্তু এটি উপাদানটি রিটার্ন না করে তার ইন্ডেক্স (Index) বা অবস্থান নম্বরটি রিটার্ন করে।

২. filter(): শর্ত অনুযায়ী সবাইকে খুঁজে আনা

find() তো শুধু প্রথম ম্যাচ করা একজনকে খুঁজে আনে। কিন্তু যদি এমন দরকার হয় যে, শর্ত মিলে যায় এমন সবাইকে আপনার লাগবে? যেমন, একটি ক্লাসের ছাত্র-ছাত্রীদের লিস্ট থেকে শুধু ছাত্রীদের আলাদা করে একটি নতুন লিস্ট বানাতে চান। এইটিলকম কাজের জন্য আছে filter() মেথড।

• এটি দেওয়া শর্ত অনুযায়ী অ্যারের উপাদানগুলোকে ফিল্টার করে একটি নতুন অ্যারে তৈরি করে।

• যদি কোনো উপাদানই শর্ত পূরণ না করে, তাহলে এটি একটি খালি অ্যারে রিটার্ন করে।

• উদাহরণ: ধরি, আমরা শুধু ছাত্রীদের তালিকা চাই।

  const students = [
    { name: "Asha", gender: "female" },
    { name: "Mojnu", gender: "male" },
    { name: "Debi", gender: "female" },
    { name: "Munni", gender: "female" },
  ];
   
  const femaleStudents = students.filter(
    (student) => student.gender === "female"
  );
  console.log(femaleStudents);
  // আউটপুট হবে একটি নতুন অ্যারে, যেখানে শুধু ছাত্রীদের অবজেক্টগুলো থাকবে।

৩. slice(): অ্যারে থেকে এক টুকরো কেটে নেওয়া

slice() মেথডের নাম শুনলেই বোঝা যায় এর কাজ কী। এটি একটি চলমান কেকের টুকরো কাটার মতো। আপনি অ্যারের একটি নির্দিষ্ট অংশ কেটে নিয়ে একটি নতুন অ্যারে তৈরি করতে পারবেন, কিন্তু মূল অ্যারেটি আগের মতোই অক্ষত থাকবে।

• এটি মূল অ্যারের একটি অংশ কেটে নিয়ে একটি নতুন অ্যারে রিটার্ন করে।
• names.slice(0, 3) মানে হলো, ০ নম্বর ইন্ডেক্স থেকে শুরু করে ৩ নম্বর ইন্ডেক্সের আগের ইন্ডেক্স পর্যন্ত (অর্থাৎ ০, ১, ২) উপাদানগুলো কেটে নাও।
• উদাহরণ: একটি নামের লিস্টকে দুই ভাগ করা।

  const names = ["debi", "asha", "munni", "mojnu", "mintu"];
  const firstPart = names.slice(0, 3);
  // ['debi', 'asha', 'munni']
  const secondPart = names.slice(3); // ['mojnu', 'mintu']
  console.log(secondPart);
  // আউটপুট: ['mojnu', 'mintu'] [cite: 18, 19]

বোনাস মেথড: join() ও split()

• join(): এই মেথডটি অ্যারের সব উপাদানকে একসাথে করে একটি স্ট্রিং (string) তৈরি করে।
• split(): এটি join() এর ঠিক উল্টো। এটি একটি স্ট্রিংকে নির্দিষ্ট বিভাজকের উপর ভিত্তি করে ভেঙে একটি অ্যারে তৈরি করে।

জাভাস্ক্রিপ্ট অ্যারে মেথডস: অ্যারে সাজানো ও বদলানো (পর্ব ২)

প্রথম পর্বে আমরা অ্যারে থেকে ডেটা খোঁজা এবং ফিল্টার করা শিখেছি। এবার আমরা আরও কিছু শক্তিশালী মেথড দেখব, যেগুলো দিয়ে আমরা অ্যারে পরিবর্তন করতে পারি অথবা একটি অ্যারে থেকে সম্পূর্ণ নতুন একটি অ্যারে তৈরি করতে পারি।

১. map(): অ্যারের প্রত্যেক সদস্যকে বদলে দেওয়া

map() মেথডটি খুবই কাজের। এটি একটি অ্যারের প্রত্যেকটি উপাদানের উপর একটি নির্দিষ্ট কাজ চালায় এবং সেই কাজের পর প্রাপ্ত নতুন মানগুলো দিয়ে একটি নতুন অ্যারে তৈরি করে। সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো, এটি মূল অ্যারেটিকে পরিবর্তন করে না।

• উদাহরণ: ধরুন, আপনার কাছে অনেকগুলো ইউজার প্রোফাইলের একটি অ্যারে আছে এবং আপনি সেখান থেকে শুধুমাত্র তাদের নামগুলো নিয়ে একটি নতুন অ্যারে বানাতে চান। [cite: 31]

  const profiles = [
    { name: "mojnu", phone: "017..." },
    { name: "asha", phone: "018..." },
  ];
   
  const userNames = profiles.map((profile) => profile.name);
  console.log(userNames); // আউটপুট: ['mojnu', 'asha']

২. splice(): অ্যারের কাটাছেঁড়া

slice() যেখানে মূল অ্যারে পরিবর্তন না করে কাজ করে, splice() সেখানে সরাসরি মূল অ্যারের উপরেই "অস্ত্রোপচার" চালায়। এটি দিয়ে অ্যারে থেকে উপাদান মুছে ফেলা, নতুন উপাদান যোগ করা বা একটি উপাদানকে অন্যটি দিয়ে প্রতিস্থাপন করা যায়।

• উপাদান ডিলেট করা: students.splice(1, 2) মানে হলো, ১ নম্বর ইন্ডেক্স থেকে শুরু করে ২টি উপাদান ডিলেট করে দাও।
• উপাদান যোগ করা: students.splice(1, 0, 'Akashi', 'Srity') মানে হলো, ১ নম্বর ইন্ডেক্সে যাও, ০টি উপাদান ডিলেট করো এবং সেখানে 'Akashi' ও 'Srity'-কে যোগ করো।
• উপাদান প্রতিস্থাপন করা: students.splice(1, 1, 'Mahi') মানে হলো, ১ নম্বর ইন্ডেক্স থেকে ১টি উপাদান ডিলেট করো এবং তার জায়গায় 'Mahi'-কে বসিয়ে দাও।

৩. concat(): দুই বা ততোধিক অ্যারে জোড়া দেওয়া

আপনার কাছে যদি কয়েকটি আলাদা অ্যারে থাকে এবং আপনি সেগুলোকে জোড়া লাগিয়ে একটিমাত্র বড় অ্যারে তৈরি করতে চান, তাহলে concat() মেথডটি ব্যবহার করতে পারেন।

• এটি দুই বা ততোধিক অ্যারে একত্রিত করে একটি নতুন অ্যারে তৈরি করে।

• এটি মূল অ্যারেগুলোকে পরিবর্তন করে না।

• উদাহরণ: ফল এবং সবজির দুটি আলাদা লিস্টকে এক করা।

  const fruits = ["Palm", "Apple", "Mango"];
  const vegetables = ["carrot", "Tomato"];
   
  const combined = fruits.concat(vegetables);
  console.log(combined); // আউটপুট: ["Palm", "Apple", "Mango", "carrot", "Tomato"]

  আপনি চাইলে এর সাথে আরও নতুন উপাদানও যোগ করতে পারেন।

বোনাস মেথড: push(), pop(), shift(), unshift()

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

• push(): অ্যারের শেষে একটি বা একাধিক উপাদান যোগ করে।
• pop(): অ্যারের শেষ থেকে একটি উপাদান সরিয়ে ফেলে।
• shift(): অ্যারের শুরু থেকে একটি উপাদান সরিয়ে ফেলে।
• unshift(): অ্যারের শুরুতে একটি বা একাধিক উপাদান যোগ করে।

১. reduce(): পুরো অ্যারে থেকে একটি মাত্র মান তৈরি

reduce() মেথডটি একটু অন্যরকম। এটি একটি অ্যারের সমস্ত উপাদানের উপর একটি ফাংশন চালায় এবং সবশেষে একটি মাত্র মান (single value) রিটার্ন করে। যেমন, একটি অ্যারের সব সংখ্যার যোগফল বা গুণফল বের করা, অথবা একটি শপিং কার্টের মোট দাম হিসাব করা।

• reduce() মেথড একটি কলব্যাক ফাংশন নেয়, যার দুটি প্রধান প্যারামিটার থাকে: accumulator এবং currentValue। accumulator হলো জমাকৃত মান, আর currentValue হলো অ্যারের বর্তমান উপাদান।

• উদাহরণ: একটি শপিং কার্টের মোট মূল্য বের করা।

  const products = [
      { bookName: "Rich dad Poor dad", price: 100 },
      { bookName: "Chokher Bali", price: 200 },
      { bookName: "Biye", price: 280 }
  ;
   
  const totalPrice = products.reduce((acc, current) => acc + current.price, 0);
  console.log(totalPrice); // আউটপুট: 580

২. forEach(): প্রতিটির জন্য কিছু একটা করা

forEach() মেথডটি map() এর মতোই অ্যারের প্রতিটি উপাদানের উপর দিয়ে যায়, কিন্তু এটি কোনো নতুন অ্যারে রিটার্ন করে না। এর মূল কাজ হলো অ্যারের প্রতিটি উপাদান নিয়ে কোনো একটি নির্দিষ্ট কাজ সম্পাদন করা, যেমন—কনসোলে লগ করা বা UI-তে কোনো লিস্ট দেখানো।

• উদাহরণ: প্রোডাক্টের তালিকা UI-তে দেখানো।

  const products = [
    { name: "Snow", price: 120 },
    { name: "Detol Shop", price: 60 },
  ];
   
  products.forEach((product) => {
    // এই কোড প্রতিটি প্রোডাক্টের জন্য একটি করে লিস্ট আইটেম তৈরি করে UI-তে যোগ করবে
    let item = document.createElement("li");
    item.innerText = product.name;
    document.body.appendChild(item);
  });

৩. লুপ (Loop): for...of এবং for...in

• for...of: এটি অ্যারে বা স্ট্রিং-এর মতো ইটারেবল (iterable) অবজেক্টের প্রতিটি ভ্যালু এর উপর দিয়ে ট্র্যাভেল করার জন্য ব্যবহৃত হয়। [cite: 43, 44]
• for...in: এটি একটি অবজেক্টের প্রতিটি কি (key) বা প্রপার্টির উপর দিয়ে ট্র্যাভেল করে।

৪. অবজেক্ট নিয়ে কাজ করা (বোনাস)

অ্যারের পাশাপাশি জাভাস্ক্রিপ্টে অবজেক্টও খুব গুরুত্বপূর্ণ। অবজেক্টের ডেটা নিয়ে কাজ করার জন্য কিছু দরকারি মেথড হলো:

• Object.keys(obj): এটি একটি অবজেক্টের সবগুলো 'কি' (key) নিয়ে একটি অ্যারে রিটার্ন করে।
• Object.values(obj): এটি অবজেক্টের সবগুলো 'ভ্যালু' (value) নিয়ে একটি অ্যারে রিটার্ন করে।
• Object.entries(obj): এটি অবজেক্টের 'কি' এবং 'ভ্যালু' কে জোড়ায় জোড়ায় একটি অ্যারের মধ্যে রেখে নতুন একটি অ্যারে রিটার্ন করে।