JavaScript এর হাতেখড়ি (পর্ব – ১৩)

JavaScript Part 13

আগের পর্বে আমরা ফর্ম ও validation শিখেছি। আজকে ফিরে যাচ্ছি Array-তে — পর্ব ৭-এ আমরা for ও for...of দিয়ে array ঘুরেছিলাম। আজকে শিখবো তিনটা আধুনিক array method — forEach, map, ও filter — এগুলো বাস্তব JavaScript কোডে loop-এর চেয়েও বেশি ব্যবহার হয়।

forEach() — প্রতিটা আইটেমে একটা কাজ করা

forEach অনেকটা for...of-এর মতোই কাজ করে, কিন্তু একটা function-কে argument হিসেবে নেয়:

const fruits = ["আম", "কাঁঠাল", "লিচু"];

fruits.forEach((fruit) => {
  console.log(fruit);
});

এখানে fruit প্যারামিটারটা প্রতিবার array-এর একটা করে আইটেম বহন করে। চাইলে index-ও পাওয়া যায়, দ্বিতীয় প্যারামিটার হিসেবে:

fruits.forEach((fruit, index) => {
  console.log(`${index}: ${fruit}`);
});
// 0: আম
// 1: কাঁঠাল
// 2: লিচু

map() — নতুন array বানানো

map-এর কাজ forEach-এর মতো দেখতে হলেও একটা বড় পার্থক্য আছে — map প্রতিটা আইটেম রূপান্তর করে একটা নতুন array রিটার্ন করে:

const prices = [100, 200, 300];

const withTax = prices.map((price) => price * 1.1);

console.log(withTax); // [110, 220, 330]
console.log(prices);  // [100, 200, 300] — মূল array অপরিবর্তিত

লক্ষ করো — মূল prices array একদম অপরিবর্তিত আছে, map একটা সম্পূর্ণ নতুন array তৈরি করেছে। এটা map-এর সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্য।

Array of Objects-এও map খুব কাজে লাগে:

const students = [
  { name: "করিম", marks: 85 },
  { name: "রহিম", marks: 72 }
];

const names = students.map((student) => student.name);
console.log(names); // ["করিম", "রহিম"]

filter() — শর্ত অনুযায়ী বেছে নেওয়া

filter একটা শর্ত চেক করে, শুধু যেগুলো true রিটার্ন করে সেগুলো নিয়ে একটা নতুন (ছোট) array বানায়:

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];

const evenNumbers = numbers.filter((num) => num % 2 === 0);

console.log(evenNumbers); // [2, 4, 6, 8]

এখানে প্রতিটা number-এর জন্য num % 2 === 0 চেক হয়েছে — যেগুলো true (জোড় সংখ্যা), শুধু সেগুলোই নতুন array-তে থেকে গেছে।

Array of Objects ফিল্টার করার একটা বাস্তব উদাহরণ:

const students = [
  { name: "করিম", marks: 85 },
  { name: "রহিম", marks: 55 },
  { name: "সুমি", marks: 90 }
];

const passedStudents = students.filter((student) => student.marks >= 60);

console.log(passedStudents);
// [{ name: "করিম", marks: 85 }, { name: "সুমি", marks: 90 }]

তিনটার মধ্যে পার্থক্য

Method রিটার্ন করে কখন ব্যবহার হবে
forEach কিছুই না (undefined) শুধু প্রতিটা আইটেমে একটা কাজ করতে (যেমন console.log, DOM আপডেট)
map নতুন array (একই সাইজ) প্রতিটা আইটেম রূপান্তর করে নতুন array বানাতে
filter নতুন array (ছোট বা সমান) শর্ত অনুযায়ী কিছু আইটেম বেছে নিতে

map ও filter একসাথে চেইন করা

দুইটা method-ই নতুন array রিটার্ন করে বলে, একটার পর একটা জোড়া লাগানো (chain) যায়:

const students = [
  { name: "করিম", marks: 85 },
  { name: "রহিম", marks: 55 },
  { name: "সুমি", marks: 90 }
];

const passedNames = students
  .filter((student) => student.marks >= 60)
  .map((student) => student.name);

console.log(passedNames); // ["করিম", "সুমি"]

এখানে প্রথমে filter দিয়ে পাশ করা ছাত্রদের বেছে নেওয়া হয়েছে, তারপর map দিয়ে শুধু তাদের নাম বের করা হয়েছে — দুইটা ধাপ একসাথে জোড়া লাগিয়ে একটা পরিষ্কার, পড়া সহজ কোড।

DOM-এ ব্যবহার — বাস্তব উদাহরণ

আগের পর্বগুলোতে শেখা DOM manipulation-এর সাথে forEach মিলিয়ে একটা লিস্ট পেজে দেখানো যায়:

<ul id="fruitList"></ul>

<script>
  const fruits = ["আম", "কাঁঠাল", "লিচু"];
  const list = document.getElementById("fruitList");

  fruits.forEach((fruit) => {
    const li = document.createElement("li");
    li.textContent = fruit;
    list.appendChild(li);
  });
</script>

document.createElement() দিয়ে একটা নতুন HTML এলিমেন্ট তৈরি করা যায়, আর .appendChild() দিয়ে সেটাকে পেজে যোগ করা হয় — এভাবেই array-এর ডেটা দিয়ে dynamically পুরো একটা লিস্ট বানানো যায়, HTML-এ হাতে না লিখেই।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Array Method উদাহরণ</title>
</head>
<body>
  <h2>পাশ করা ছাত্র</h2>
  <ul id="studentList"></ul>

  <script>
    const students = [
      { name: "করিম", marks: 85 },
      { name: "রহিম", marks: 45 },
      { name: "সুমি", marks: 90 },
      { name: "তানিয়া", marks: 30 }
    ];

    const passed = students.filter((s) => s.marks >= 50);

    const list = document.getElementById("studentList");

    passed.forEach((student) => {
      const li = document.createElement("li");
      li.textContent = `${student.name} — ${student.marks} নম্বর`;
      list.appendChild(li);
    });
  </script>
</body>
</html>

নিজে চেষ্টা করো

Exercise:

  1. একটা number array বানাও, map দিয়ে প্রতিটা সংখ্যাকে দ্বিগুণ করা নতুন array বানাও
  2. একটা number array থেকে filter দিয়ে শুধু ১০-এর বড় সংখ্যাগুলো বের করো
  3. student object-এর array থেকে filter ও map চেইন করে ফেল করা ছাত্রদের নামের লিস্ট বানাও
  4. একটা array-এর প্রতিটা আইটেম forEach দিয়ে HTML লিস্টে দেখাও

পরের পর্বে যা থাকছে

পর্ব ১৪-এ আমরা শিখবো Template Literal নিয়ে আরও বিস্তারিত ও Arrow Function-এর বাকি সূক্ষ্ম বিষয়গুলো, উদাহরণসহ।

একটি মন্তব্য পোস্ট করুন

নবীনতর পূর্বতন

যোগাযোগ ফর্ম