JavaScript Object — প্রকার, কিভাবে ব্যবহার করবেন

এই আর্টিকেলে আমরা জানব— JavaScript object কী, প্রধান প্রকারগুলো কোনগুলো, কিভাবে তৈরি এবং ব্যবহার করতে হয়, এবং জীবন্ত উদাহরণ (HTML + code) দেখব। প্রত্যেক সেকশনে সরাসরি কোড উদাহরণ দেওয়া আছে যাতে আপনি সহজে কপি-পেস্ট করে পরীক্ষা করতে পারেন।

1. Object কী? সংক্ষিপ্ত পরিচিতি

JavaScript-এ object হলো key-value জোড়া ধরে রাখার একটি ডেটা স্ট্রাকচার। একটি object-এর property (key) এবং value থাকতে পারে; value আবার function হতে পারে — তখন তাকে method বলা হয়। প্রায় সবকিছু JavaScript-এ object হিসেবে আচরণ করে (except primitives)।

উদাহরণ সরল ব্যাখ্যা

নিচে একটি সাধারণ object দেখুন:

// object literal
const person = {
  name: 'Rafi',
  age: 28,
  greet: function() {
    console.log('Hi, I am ' + this.name);
  }
};

person.greet(); // "Hi, I am Rafi"
  

2. JavaScript Object — প্রধান প্রকারগুলো (Types of objects)

JavaScript-এ "object" বলতে ক’টা ভিন্ন কনক্রিট টাইপ থাকে — এখানে প্রধানগুলো তালিকা ও সংক্ষিপ্ত বর্ণনা:

1. Plain Object (Object literals): সাধারণ key-value pair, `{}` দিয়ে তৈরি।
2. Array: সূচ্যানুক্রমিক তালিকা, কিন্তু প্রকৃতপক্ষে object টাইপ।
3. Function: JavaScript-এ functions নিজেই callable objects।
4. Date: সময়/তারিখ সংক্রান্ত object।
5. RegExp: নিয়মিত অভিব্যক্তি (regex) object।
6. Map & Set: ES6 থেকে উন্নত কন্টেইনার; Map হল key→value, Set ইউনিক ভ্যালু।
7. WeakMap & WeakSet: GC-সাথেই দুর্বল রেফারেন্স; স্মৃতি ব্যবস্থাপনায় সাহায্য করে।
8. Typed Arrays, Promise, Error ইত্যাদি আরো built-in objects।

কোড-শো — Map ও Set

// Map
const map = new Map();
map.set('id', 101);
map.set('name', 'Sumi');
console.log(map.get('name')); // "Sumi"

// Set
const s = new Set([1,2,2,3]);
console.log(s); // Set {1,2,3}
  

3. Object তৈরি করার প্রধান উপায়

৩টি প্রচলিত উপায়:

1. Literal syntax: `const obj = { a:1, b:2 }` — সহজ ও দ্রুত।
2. Constructor function / new Object(): `const o = new Object();` বা custom constructor `function Person(){...}`।
3. Object.create(proto): নির্দিষ্ট প্রোটোটাইপ সহ নতুন object তৈরি করতে।
4. Class syntax (ES6): `class User { constructor(){} }` — syntactic sugar।

// literal
const a = {x:10};

// constructor function
function Cat(name){ this.name = name; }
const c = new Cat('Miko');

// Object.create
const proto = {sayHi(){console.log('hi');}};
const obj = Object.create(proto);
obj.sayHi();

// class
class Car {
  constructor(make){ this.make = make; }
}
const car = new Car('Toyota');
  

Related Posts

4. Properties, Methods, Getter & Setter

Object-এর properties যে কোনো primitive বা অন্য object হতে পারে। Methods হলো object-এর ভিতরে সংরক্ষিত function। Getter ও Setter দিয়ে property access কাস্টমাইজ করা সম্ভব।

const user = {
  first: 'Tariq',
  last: 'Hossain',
  get fullName(){
    return this.first + ' ' + this.last;
  },
  set fullName(name){
    const parts = name.split(' ');
    this.first = parts[0] || '';
    this.last = parts[1] || '';
  }
};

console.log(user.fullName); // "Tariq Hossain"
user.fullName = 'Rana Ahmed';
console.log(user.first); // "Rana"
  

5. Prototype ও Inheritance (উত্তরাধিকার)

JavaScript-এ object গুলো প্রোটোটাইপ-চেইন ব্যবহার করে inheritance করে। প্রতিটি object-এর একটা `[[Prototype]]` থাকে (জাভাস্ক্রিপ্টে `__proto__` বা `Object.getPrototypeOf()`)। ক্লাস বা constructor ব্যবহার করলে prototype chain তৈরি হয়।

// prototype example
function Animal(name){ this.name = name; }
Animal.prototype.speak = function(){ console.log(this.name + ' makes a noise.'); }

const dog = new Animal('Buddy');
dog.speak(); // "Buddy makes a noise."
  

6. JSON ↔ Object

JSON (JavaScript Object Notation) হলো object-র একটি string রূপ। `JSON.stringify()` দিয়ে object কে string করা যায় এবং `JSON.parse()` দিয়ে ফের object তৈরি করা যায়।

const obj = {a:1, b:2};
const str = JSON.stringify(obj); // '{"a":1,"b":2}'
const back = JSON.parse(str); // {a:1, b:2}
  

7. Practical use-cases — কিভাবে ব্যবহার করবেন (DOM উদাহরণসহ)

ওয়েবে objects অতি-প্রয়োজনীয়: config, state, API response, DOM data-attributes ইত্যাদিতে। নিচে HTML + JS উদাহরণ যা দেখাবে object কিভাবে DOM টেমপ্লেট পূরণে ব্যবহার হয়।

<script>
// JS — object-driven render
const data = {
  title: 'JavaScript Object গাইড',
  subtitle: 'প্রাথমিক ধাপ থেকে অ্যাডভান্স',
  desc: 'এই আর্টিকেলটি object গুলো কীভাবে কাজ করে তা দেখায়।',
  steps: ['লিটারেল তৈরি', 'প্রোপার্টি যোগ', 'DOM-এ রেন্ডার']
};

const card = document.getElementById('card');
card.querySelector('h2.db2').textContent = data.title;
card.querySelector('h3.db3').textContent = data.subtitle;
card.querySelector('p.desc').textContent = data.desc;

const ol = card.querySelector('ol.steps');
data.steps.forEach(s => {
  const li = document.createElement('li');
  li.textContent = s;
  ol.appendChild(li);
});
</script>

8. Common operations (keys, values, entries, cloning)

Object নিয়ে কাজ করার কিছু সাধারণ ইউটিলিটি:

const o = {a:1,b:2,c:3};
// keys, values, entries
Object.keys(o); // ['a','b','c']
Object.values(o); // [1,2,3]
Object.entries(o); // [['a',1],['b',2],['c',3]]

// shallow clone
const clone = {...o}; // spread
const copy = Object.assign({}, o);

// deep clone (simple)
const deep = JSON.parse(JSON.stringify(o)); // beware functions/unserializable items
  

9. Performance & Best Practices

ব্রাউজারে object-heavy অ্যাপ্লিকেশন হলে কিছু টিপস কাজে লাগবে:

1. অপ্রয়োজনীয় nested object এড়িয়ে সরল data structure রাখুন।
2. Mutable পরিবর্তনের বদলে immutable patterns প্রয়োগ করলে state bugs কমে (React-এ বিশেষভাবে প্রয়োজন)।
3. বারবার clone না করে references ব্যবহার করুন; deep copy ব্যয়বহুল।
4. Map ব্যবহার করুন যদি key non-string বা frequently updated keys থাকে — Map অনেক faster certain operations এ।

10. Useful patterns & anti-patterns

Useful: factory functions, module pattern (IIFE), object composition। Anti-pattern: overuse of global objects, heavy mutation across modules, relying on `__proto__` পরিবর্তন।

// module pattern (simple)
const Counter = (function(){
  let count = 0;
  return {
    inc(){ count++; return count; },
    get(){ return count; }
  };
})();

Counter.inc(); // 1
  

11. Frequently used APIs that return objects

Fetch API response (JSON), DOM APIs (Element objects), localStorage (strings but parse to objects), IndexedDB (object stores) — প্রায় সব সাইট-লেভেল ডেটা object-এ মডেল করা হয়।

সারসংক্ষেপ (Summary)

JavaScript object হলো ভরাটযোগ্য ও বহুমুখী ডেটা স্ট্রাকচার — literal, constructor, Object.create, class সব উপায়ে তৈরি করা যায়। Map/Set/WeakMap ইত্যাদি উন্নত কন্টেইনার কাজ সহজ করে। উন্নত প্র্যাকটিস হিসেবে immutable patterns, shallow cloning ব্যবহার করা এবং heavy deep-clone এড়ানো উত্তম।

নোট: উপরের সব কোড ব্রাউজার কনসোলে বা Node.js-এ সরাসরি চালানো যাবে। DOM উদাহরণটি HTML পেজে রেখে খুললে কাজ করবে।

আরও শেখার জন্য দ্রুত রিসোর্স

1. MDN — JavaScript objects & prototypes (অফিশিয়াল ডকুমেন্টেশন)
2. ES6+ features: Map, Set, classes
3. Practice: ছোট প্রোজেক্টে state management করে দেখুন

FAQs

Q: Object vs Map — কখন কোনটা ব্যবহার করব?

A: যদি key শুধুমাত্র string চাইলে plain object দ্রুত এবং পরিচিত; কিন্তু যদি key non-string (objects) চান বা insertion order/size-চেকের সুবিধা চান — Map ব্যবহার করুন।

Q: কিভাবে object deep clone করব?

A: সহজ উপায়ে `JSON.parse(JSON.stringify(obj))` ব্যবহার করা যায়, কিন্তু এতে functions, undefined, circular refs হারায়। জটিল ক্ষেত্রে lodash's cloneDeep বা custom recursive clone ব্যবহার করুন।

Q: Getter/Setter কেন ব্যবহার করবেন?

A: Getter/Setter দিয়ে আপনি property access-এর সময় কাস্টম লজিক চালাতে পারেন — computed props, validation ইত্যাদি।

Q: prototype chain দেখার উপায়?

A: `Object.getPrototypeOf(obj)` এবং ব্রাউজার DevTools-এ `__proto__` দিয়ে দেখতে পারবেন।

Q: object property enumeration কিভাবে করা যায়?

A: `for...in` (enumerable inherited keys সহ), `Object.keys()` (own enumerable keys), `Object.getOwnPropertyNames()` (own keys, enumerable বা না-হোক) ব্যবহার করা হয়।