JavaScript এর হাতেখড়ি (পর্ব

আগের পর্বে আমরা Array শিখেছি — একই ধরনের অনেকগুলো মান একসাথে রাখা। আজকে শিখবো Object — বাস্তব-জগতের একটা জিনিস (যেমন একজন মানুষ বা একটা প্রোডাক্ট) তার বিভিন্ন বৈশিষ্ট্যসহ কীভাবে represent করা যায়। JavaScript-এ Object সবচেয়ে বেশি ব্যবহৃত concept গুলোর একটা।

Object কী?

ধরো তুমি একজন মানুষের তথ্য রাখতে চাও — নাম, বয়স, শহর। Array দিয়ে এটা করা যায় (["আরিফ", 25, "ঢাকা"]), কিন্তু তাহলে বুঝা কঠিন কোনটা কী — শুধু index দেখে। Object দিয়ে প্রতিটা তথ্যের একটা নাম (key) দেওয়া যায়, যা দিয়ে সেই মানটা কী বোঝায় তা পরিষ্কার হয়:

const person = {
  name: "আরিফ",
  age: 25,
  city: "ঢাকা"
};

এখানে name, age, city — এগুলো হলো key (property নামেও পরিচিত), আর "আরিফ", 25, "ঢাকা" — এগুলো হলো তাদের value। একেকটা key-value জোড়াকে বলে একটা property।

Object-এর মান পড়া — দুই উপায়

Object-এর ভেতরের মান পড়তে দুইটা পদ্ধতি আছে:

const person = {
  name: "আরিফ",
  age: 25
};

// Dot notation
console.log(person.name); // আরিফ

// Bracket notation
console.log(person["age"]); // 25

পদ্ধতি	কখন ব্যবহার হবে
Dot notation (`person.name`)	বেশিরভাগ সময় — সহজ ও পরিষ্কার, key-এর নাম আগে থেকে জানা থাকলে
Bracket notation (`person["name"]`)	যখন key-এর নাম একটা variable-এ আছে, বা নামে স্পেস আছে

Object-এর মান বদলানো ও নতুন key যোগ করা

const person = {
  name: "আরিফ",
  age: 25
};

person.age = 26;           // বিদ্যমান মান বদলানো
person.city = "চট্টগ্রাম";  // নতুন key যোগ করা

console.log(person);
// { name: "আরিফ", age: 26, city: "চট্টগ্রাম" }

টিপস: Array-এর মতোই, const দিয়ে object বানালেও তার ভেতরের property বদলানো বা যোগ করা যায় — const শুধু আটকায় পুরো object-টাকে একটা নতুন object দিয়ে replace করতে।

Object-এর ভেতরে Function — Method

Object-এর একটা property একটা function-ও হতে পারে — তখন সেটাকে বলা হয় method:

const person = {
  name: "আরিফ",
  age: 25,
  greet: function() {
    console.log(`হ্যালো, আমি ${person.name}`);
  }
};

person.greet(); // হ্যালো, আমি আরিফ

Nested Object — Object-এর ভেতরে Object

বাস্তব ডেটা প্রায়ই স্তরে স্তরে সাজানো থাকে — যেমন একজন ব্যক্তির একটা ঠিকানা object তার ভেতরেই থাকতে পারে:

const person = {
  name: "আরিফ",
  address: {
    city: "ঢাকা",
    postCode: "1200"
  }
};

console.log(person.address.city); // ঢাকা

Array of Objects — বাস্তব প্রোজেক্টে সবচেয়ে বেশি ব্যবহৃত প্যাটার্ন

Array আর Object একসাথে মিশিয়ে একটা লিস্ট বানানো যায়, যেখানে প্রতিটা আইটেম একটা object — যেমন একাধিক ছাত্রের তথ্য:

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

for (const student of students) {
  console.log(`${student.name}: ${student.marks} নম্বর`);
}

এই প্যাটার্নটা — array of objects — বাস্তব ওয়েব ডেভেলপমেন্টে সবচেয়ে বেশি দেখা যায়। যখনই কোনো API থেকে ডেটা আসে (যেমন একটা প্রোডাক্ট লিস্ট, ইউজার লিস্ট), সেটা প্রায় সবসময় এভাবেই সাজানো থাকে — একটা array-এর ভেতরে অনেকগুলো object।

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

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>Object উদাহরণ</title>
</head>
<body>
  <script>
    const products = [
      { name: "জ্যাকেট", price: 1200 },
      { name: "জুতা", price: 800 },
      { name: "ব্যাগ", price: 1500 }
    ];

    let total = 0;

    for (const product of products) {
      console.log(`${product.name}: ${product.price} টাকা`);
      total += product.price;
    }

    console.log(`মোট: ${total} টাকা`);
  </script>
</body>
</html>

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

Exercise:

একটা book object বানাও — title, author, ও pages property দিয়ে
Dot notation ও bracket notation দুইভাবেই একটা property পড়ে দেখো
৩টা বইয়ের object দিয়ে একটা array বানাও, for...of দিয়ে প্রতিটা বইয়ের title console-এ প্রিন্ট করো
প্রতিটা বইয়ের pages যোগ করে মোট পেজ সংখ্যা বের করো

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

পর্ব ৯-এ আমরা শিখবো DOM কী এবং কীভাবে getElementById ও querySelector দিয়ে HTML এলিমেন্ট সিলেক্ট করতে হয় — এখান থেকেই আমরা সত্যিকারের ইন্টারঅ্যাক্টিভ পেজ বানানো শুরু করবো।

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