JavaScript Object হলো JavaScript-এর অন্যতম গুরুত্বপূর্ণ একটি বিষয়। Object ব্যবহার করে আমরা একাধিক সম্পর্কিত তথ্যকে key-value pair আকারে এক জায়গায় সংরক্ষণ করতে পারি। Object-এর মধ্যে শুধু data নয়, function-ও রাখা যায়। Object-এর ভিতরে থাকা function-কে সাধারণত Method বলা হয়।
এই আর্টিকেলে আমরা JavaScript Object কী, Object কীভাবে তৈরি করতে হয়, Property কী, Method কী, Object Property কীভাবে access ও পরিবর্তন করতে হয়, this keyword, Constructor, Nested Object, Object.keys(), Object.values(), Object.entries(), Destructuring, Spread Operator এবং আরও গুরুত্বপূর্ণ বিষয় উদাহরণসহ শিখব।
JavaScript Object কী?
JavaScript Object হলো এমন একটি data structure যেখানে বিভিন্ন ধরনের data key এবং value আকারে সংরক্ষণ করা যায়।
যেমন একজন ব্যক্তির নাম, বয়স, ঠিকানা ইত্যাদি আলাদা আলাদা variable-এ রাখার পরিবর্তে একটি Object-এর মধ্যে রাখা যায়।
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
এখানে person হলো একটি Object।
Object-এর মধ্যে তিনটি Property রয়েছে:
- firstName → "John"
- lastName → "Doe"
- age → 50
Object-এর Key এবং Value
Object-এর প্রতিটি তথ্য সাধারণত key-value pair হিসেবে লেখা হয়।
const person = {
name: "John",
age: 30
};
এখানে name এবং age হলো key বা property name। আর "John" এবং 30 হলো তাদের value।
Key এবং value-এর মধ্যে colon (:) ব্যবহার করা হয়।
JavaScript Object তৈরি করার নিয়ম
JavaScript-এ Object তৈরি করার সবচেয়ে সাধারণ পদ্ধতি হলো curly braces {} ব্যবহার করা।
const person = {
name: "John",
age: 50,
city: "Dhaka"
};
এখানে person একটি Object এবং এর মধ্যে তিনটি Property রয়েছে।
Object Property কী?
Object-এর মধ্যে যে key-value pair থাকে, সেগুলোকে Object Property বলা হয়।
const car = {
brand: "Toyota",
model: "Corolla",
year: 2025
};
এখানে brand, model এবং year
হলো Object Property।
Object Property Access করা
Object-এর Property-এর value পাওয়ার জন্য প্রধানত দুইটি পদ্ধতি ব্যবহার করা হয়:
- Dot Notation
- Bracket Notation
1. Dot Notation
Dot notation-এ Object-এর নামের পরে একটি dot (.) দিয়ে
Property-এর নাম লিখতে হয়।
const person = {
name: "John",
age: 50
};
console.log(person.name);
console.log(person.age);
Output:
John
50
2. Bracket Notation
Bracket notation-এ Property-এর নাম square bracket-এর মধ্যে লিখতে হয়।
console.log(person["name"]);
console.log(person["age"]);
Output:
John
50
Property-এর নাম যদি কোনো variable-এর মধ্যে থাকে, তখন bracket notation বিশেষভাবে কাজে লাগে।
let property = "name";
console.log(person[property]);
Output:
John
Object Property পরিবর্তন করা
Object তৈরি করার পরেও তার Property-এর value পরিবর্তন করা যায়।
const person = {
name: "John",
age: 50
};
person.age = 60;
console.log(person.age);
Output:
60
এখানে const ব্যবহার করা হলেও Object-এর Property পরিবর্তন করা
সম্ভব। কারণ const Object-এর reference পরিবর্তন করতে বাধা দেয়,
Object-এর Property পরিবর্তন করতে নয়।
Object-এ নতুন Property যোগ করা
Existing Object-এর মধ্যে নতুন Property যোগ করা যায়।
const person = {
name: "John",
age: 50
};
person.city = "Dhaka";
console.log(person.city);
Output:
Dhaka
Object Property Delete করা
Object থেকে কোনো Property মুছে ফেলার জন্য delete operator ব্যবহার করা যায়।
const person = {
name: "John",
age: 50,
city: "Dhaka"
};
delete person.city;
console.log(person);
উপরের code-এ city Property-টি Object থেকে মুছে যাবে।
JavaScript Object Method
কোনো Object-এর মধ্যে যদি একটি function রাখা হয়, তাহলে সেই function-কে সাধারণত Method বলা হয়।
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName());
Output:
John Doe
এখানে fullName হলো একটি Method।
Method চালানোর জন্য person.fullName() লিখতে হয়েছে।
Object Method-এ this Keyword
JavaScript Object-এর Method-এর ক্ষেত্রে this keyword খুব গুরুত্বপূর্ণ।
const person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
এখানে this সাধারণভাবে সেই Object-কে নির্দেশ করছে যার
মাধ্যমে Method-টি call করা হয়েছে।
console.log(person.fullName());
এখানে this বলতে person Object-কে বোঝাচ্ছে।
তাই:
this.firstName
এর অর্থ:
person.firstName
এবং:
this.lastName
এর অর্থ:
person.lastName
Object Method Call করার নিয়ম
Object-এর Method call করার সময় () ব্যবহার করতে হয়।
const person = {
name: "John",
sayHello: function() {
return "Hello " + this.name;
}
};
console.log(person.sayHello());
Output:
Hello John
কিন্তু নিচের code-এ () নেই:
console.log(person.sayHello);
তাই এখানে Method execute হবে না; function-এর reference পাওয়া যাবে।
Object-এর মধ্যে বিভিন্ন Data Type
JavaScript Object-এর Property-এর value হিসেবে বিভিন্ন ধরনের data রাখা যায়।
const person = {
name: "John",
age: 50,
married: true,
skills: ["HTML", "CSS", "JavaScript"],
address: {
city: "Dhaka"
}
};
এখানে String, Number, Boolean, Array এবং Nested Object—সব ধরনের data ব্যবহার করা হয়েছে।
Object-এর মধ্যে Array
Object-এর কোনো Property-এর value হিসেবে Array রাখা যায়।
const person = {
name: "John",
skills: ["HTML", "CSS", "JavaScript"]
};
console.log(person.skills);
console.log(person.skills[0]);
console.log(person.skills[2]);
Output:
["HTML", "CSS", "JavaScript"]
HTML
JavaScript
Nested Object কী?
একটি Object-এর ভিতরে আরেকটি Object থাকলে তাকে Nested Object বলা হয়।
const person = {
name: "John",
age: 50,
address: {
city: "Dhaka",
country: "Bangladesh"
}
};
Nested Object-এর Property access করতে একাধিক dot ব্যবহার করা যায়।
console.log(person.address.city);
console.log(person.address.country);
Output:
Dhaka
Bangladesh
Object-এর মধ্যে Function
Object-এর মধ্যে function রাখা যায় এবং সেই function Object-এর Property ব্যবহার করতে পারে।
const person = {
firstName: "Adiyan",
lastName: "Islam",
fullName: function() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName());
Output:
Adiyan Islam
Object Constructor কী?
একই ধরনের অনেক Object তৈরি করার জন্য Constructor Function ব্যবহার করা যায়।
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
এখন new keyword ব্যবহার করে নতুন Object তৈরি করা যায়।
const person1 = new Person("John", "Doe", 30);
const person2 = new Person("Jane", "Smith", 25);
console.log(person1.firstName);
console.log(person2.firstName);
Output:
John
Jane
Constructor Function কীভাবে কাজ করে?
- প্রথমে Constructor Function তৈরি করা হয়।
thisদিয়ে Object-এর Property নির্ধারণ করা হয়।newkeyword ব্যবহার করে নতুন Object তৈরি করা হয়।- প্রতিটি Object-এর জন্য আলাদা value দেওয়া যায়।
function Person(fname) {
this.firstname = fname;
}
const person1 = new Person("John");
const person2 = new Person("Jane");
console.log(person1.firstname);
console.log(person2.firstname);
Output:
John
Jane
Object Constructor-এর Method
Constructor-এর ভিতরেও Method তৈরি করা যায়।
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.fullName = function() {
return this.firstName + " " + this.lastName;
};
}
const person = new Person("John", "Doe");
console.log(person.fullName());
Output:
John Doe
Object-এর Property Loop করা
Object-এর সব Property একে একে দেখার জন্য for...in loop ব্যবহার করা যায়।
const person = {
name: "John",
age: 50,
city: "Dhaka"
};
for (let key in person) {
console.log(key);
}
Output:
name
age
city
Property-এর value দেখতে চাইলে:
for (let key in person) {
console.log(key + ": " + person[key]);
}
Output:
name: John
age: 50
city: Dhaka
Object.keys()
Object.keys() একটি Object-এর সব Property-এর নাম একটি Array
হিসেবে return করে।
const person = {
name: "John",
age: 50,
city: "Dhaka"
};
console.log(Object.keys(person));
Output:
["name", "age", "city"]
Object.values()
Object.values() Object-এর সব Property-এর value একটি Array
হিসেবে return করে।
console.log(Object.values(person));
Output:
["John", 50, "Dhaka"]
Object.entries()
Object.entries() Object-এর key এবং value-কে Array-এর
ভিতরে pair হিসেবে return করে।
console.log(Object.entries(person));
Output:
[
["name", "John"],
["age", 50],
["city", "Dhaka"]
]
Object Property আছে কি না Check করা
কোনো Property Object-এর মধ্যে আছে কি না জানতে in operator ব্যবহার করা যায়।
const person = {
name: "John",
age: 50
};
console.log("name" in person);
console.log("city" in person);
Output:
true
false
Object.hasOwn()
Object.hasOwn() ব্যবহার করে কোনো Property Object-এর
নিজস্ব Property কি না check করা যায়।
const person = {
name: "John",
age: 50
};
console.log(Object.hasOwn(person, "name"));
console.log(Object.hasOwn(person, "city"));
Output:
true
false
Object Destructuring
Object Destructuring ব্যবহার করে Object-এর Property সরাসরি variable-এর মধ্যে নেওয়া যায়।
const person = {
firstName: "John",
lastName: "Doe",
age: 50
};
const { firstName, lastName, age } = person;
console.log(firstName);
console.log(lastName);
console.log(age);
Output:
John
Doe
50
Object Spread Operator
Spread Operator (...) ব্যবহার করে একটি Object-এর Property অন্য Object-এর মধ্যে copy বা combine করা যায়।
const person = {
name: "John",
age: 50
};
const employee = {
...person,
job: "Developer"
};
console.log(employee);
এখানে employee Object-এর মধ্যে person-এর
Property এবং নতুন job Property দুটোই থাকবে।
Object.assign()
Object.assign() ব্যবহার করে এক বা একাধিক Object-এর
Property অন্য Object-এর মধ্যে copy করা যায়।
const person = {
name: "John",
age: 50
};
const details = {
city: "Dhaka"
};
const result = Object.assign({}, person, details);
console.log(result);
Result-এর মধ্যে থাকবে:
{
name: "John",
age: 50,
city: "Dhaka"
}
Object-এ Function Expression ব্যবহার
Object-এর Property হিসেবে Function Expression ব্যবহার করা যায়।
const person = {
name: "John",
sayHello: function() {
return "Hello " + this.name;
}
};
console.log(person.sayHello());
Output:
Hello John
Object Method-এর Short Syntax
JavaScript-এ Object-এর Method লেখার জন্য সংক্ষিপ্ত syntax ব্যবহার করা যায়।
const person = {
firstName: "John",
lastName: "Doe",
fullName() {
return this.firstName + " " + this.lastName;
}
};
console.log(person.fullName());
এটি নিচের পুরোনো syntax-এর সংক্ষিপ্ত রূপ:
fullName: function() {
return this.firstName + " " + this.lastName;
}
Object-এর মধ্যে Arrow Function
Object-এর Property হিসেবে Arrow Function ব্যবহার করা যায়।
const person = {
name: "John",
sayHello: () => {
return "Hello";
}
};
console.log(person.sayHello());
তবে this keyword ব্যবহারের ক্ষেত্রে Arrow Function-এর
আচরণ Regular Function-এর মতো নয়। Object-এর Property access করার জন্য
this দরকার হলে সাধারণ Method syntax ব্যবহার করা বেশি সহজ।
Object কি পরিবর্তন করা যায়?
const দিয়ে Object declare করলেও Object-এর Property পরিবর্তন,
যোগ বা delete করা যায়।
const person = {
name: "John"
};
person.name = "Jane";
console.log(person.name);
Output:
Jane
তবে একই const variable-এ সম্পূর্ণ নতুন Object assign করা যায় না।
const person = {
name: "John"
};
// এটি করা যাবে না:
// person = { name: "Jane" };
Object.freeze()
Object.freeze() ব্যবহার করলে Object-এর Property পরিবর্তন,
নতুন Property যোগ বা Property delete করা থেকে Object-কে freeze করা যায়।
const person = {
name: "John",
age: 50
};
Object.freeze(person);
person.age = 60;
console.log(person.age);
Object freeze করা থাকায় সাধারণভাবে age পরিবর্তন হবে না।
Object-এর Property হিসেবে String, Number ও Boolean
const user = {
username: "Ariful",
age: 25,
active: true
};
console.log(user.username);
console.log(user.age);
console.log(user.active);
Object একইসাথে বিভিন্ন data type সংরক্ষণ করতে পারে।
Object-এর মধ্যে অন্য Object ও Array একসাথে
const student = {
name: "Ariful",
age: 25,
skills: [
"HTML",
"CSS",
"JavaScript"
],
address: {
city: "Dhaka",
country: "Bangladesh"
}
};
console.log(student.name);
console.log(student.skills[2]);
console.log(student.address.city);
Output:
Ariful
JavaScript
Dhaka
JavaScript Object এবং Array-এর পার্থক্য
| Object | Array |
|---|---|
| Named Property ব্যবহার করে | Index ব্যবহার করে |
person.name |
users[0] |
| একটি নির্দিষ্ট Entity-এর তথ্য রাখতে সুবিধাজনক | একাধিক Item-এর তালিকা রাখতে সুবিধাজনক |
const person = {
name: "John",
age: 50
};
const colors = [
"Red",
"Green",
"Blue"
];
বাস্তব উদাহরণ: Student Object
একটি Student-এর তথ্য Object-এর মাধ্যমে সুন্দরভাবে রাখা যায়।
const student = {
name: "Rahim",
age: 20,
department: "Computer Science",
skills: ["HTML", "CSS", "JavaScript"],
getInfo() {
return this.name + " - " + this.department;
}
};
console.log(student.getInfo());
Output:
Rahim - Computer Science
বাস্তব উদাহরণ: Product Object
const product = {
name: "Laptop",
price: 50000,
brand: "Dell",
getPrice() {
return this.price;
}
};
console.log(product.name);
console.log(product.getPrice());
Output:
Laptop
50000
JavaScript Object-এর গুরুত্বপূর্ণ বিষয়গুলো
- Object হলো key-value pair-এর collection।
- Object তৈরি করতে সাধারণত
{}ব্যবহার করা হয়। - Object-এর data-কে Property বলা হয়।
- Object-এর ভিতরের function-কে Method বলা হয়।
- Property access করতে Dot Notation বা Bracket Notation ব্যবহার করা যায়।
- Method call করতে
()ব্যবহার করতে হয়। - Object Method-এর মধ্যে
thiskeyword ব্যবহার করা যায়। - একই ধরনের অনেক Object তৈরি করতে Constructor Function ব্যবহার করা যায়।
Object.keys()Property-এর নাম দেয়।Object.values()Property-এর value দেয়।Object.entries()key-value pair দেয়।- Object Destructuring দিয়ে Property সহজে variable-এ নেওয়া যায়।
- Spread Operator দিয়ে Object copy বা combine করা যায়।
সম্পূর্ণ Object Example
নিচের example-এ Object-এর Property, Method এবং this
keyword একসাথে ব্যবহার করা হয়েছে।
const person = {
firstName: "Adiyan",
lastName: "Islam",
age: 25,
city: "Dhaka",
fullName() {
return (
this.firstName + " " + this.lastName
).toUpperCase();
},
getAge() {
return this.age;
}
};
console.log(person.firstName);
console.log(person.fullName());
console.log(person.getAge());
Output:
Adiyan
ADIYAN ISLAM
25
সাধারণ ভুল
1. Method call করার সময় () ভুলে যাওয়া
console.log(person.fullName);
এটি Method-এর reference দেখাবে। Method execute করতে হবে:
console.log(person.fullName());
2. ভুল Property Name ব্যবহার করা
const person = {
name: "John"
};
console.log(person.age);
এখানে age Property নেই, তাই result হবে
undefined।
3. arguments এবং parameters গুলিয়ে ফেলা
function Person(fname) {
this.firstname = fname;
}
const person = new Person("John");
এখানে fname হলো parameter এবং
"John" হলো argument।
উপসংহার
JavaScript Object JavaScript শেখার জন্য অত্যন্ত গুরুত্বপূর্ণ একটি concept। Web development-এর প্রায় সব ধরনের project-এ Object ব্যবহার করা হয়। User information, product data, API response, configuration, database data এবং application state—সব জায়গাতেই Object দেখা যায়।
শুরুতে আপনার সবচেয়ে ভালোভাবে শেখা উচিত: Object Property, Dot Notation, Bracket Notation, Method, this keyword, Constructor এবং Object Destructuring। এগুলো ভালোভাবে বুঝতে পারলে JavaScript-এর পরবর্তী বিষয়গুলো শেখা অনেক সহজ হবে।