Blog

JavaScript Object Kya Hote Hai?

JavaScript mein object ek aisa data type hota hai jo key-value pairs ko store karta hai. Har key ko property kehte hain aur uske corresponding value ko property value.

Object ka use tab hota hai jab hume ek hi entity ke multiple details store karni ho – jaise ek student ka naam, age, class, etc.

JavaScript object real-world cheezon jaise car, mobile, ya user ko represent karta hai. Object ko {} ke andar likha jata hai, aur properties ko key: value ke form mein define kiya jata hai.

Example:

let student = {
  name: "Rahul",
  age: 20,
  class: "12th"
};

Is object mein name, age, aur class teen properties hain. Inhe hum dot notation (student.name) ya bracket notation (student[“name”]) se access kar sakte hain. JavaScript mein objects powerful aur flexible hote hain.

Object Kaise Banate Hain?

1. Object Literal:

JavaScript mein object ek aisa data structure hota hai jo key-value pairs ko store karta hai. Object banane ke liye sabse commonly used tareeka hai object literal syntax. Ismein curly braces {} ka use hota hai.

let person = {
  name: "Rahul",
  age: 25,
  city: "Delhi"
};

Yahaan name, age, aur city keys hain, aur inki corresponding values “Rahul”, 25, aur “Delhi” hain. Object ke andar function bhi store kiya ja sakta hai, jise method kehte hain.

2. Using new Object() Constructor:

JavaScript mein new Object() constructor ka use ek naya object create karne ke liye hota hai. Jab hum var obj = new Object(); likhte hain, to JavaScript ek blank object banata hai jisme hum key-value pairs add kar sakte hain. Ye method built-in Object constructor ka use karta hai. Yeh bilkul waise hi object banata hai jaise hum curly braces {} se banate hain, bas syntax thoda alag hota hai.

Example:

var person = new Object();
person.name = "Amit";
person.age = 25;
person.city = "Delhi";

console.log(person);

Output: { name: ‘Amit’, age: 25, city: ‘Delhi’ }

Yeh method older JavaScript versions mein zyada use hota tha, lekin modern coding mein {} zyada popular hai kyunki woh concise aur readable hota hai. Fir bhi, new Object() kabhi-kabhi dynamic ya programmatic object creation ke cases mein helpful hota hai.

3. Using a Function (Constructor Function):

JavaScript mein constructor function ek special function hota hai jo naye objects banane ke liye use kiya jata hai. Jab hum kisi function ko new keyword ke saath call karte hain, to woh ek naya object banata hai aur this keyword us naye object ko refer karta hai.

Constructor function ka naam capital letter se start hota hai jaise Person. Ismein hum properties define karte hain jo har naye object ke sath associated hoti hain.

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function() {
    console.log("Hello, my name is " + this.name);
  };
}

const person1 = new Person("Rahul", 25);
const person2 = new Person("Anita", 30);

person1.sayHello(); // Hello, my name is Rahul
person2.sayHello(); // Hello, my name is Anita

Is tarah hum ek hi constructor function se multiple objects bana sakte hain with similar structure and methods.

Object Properties Ko Access Kaise Karte Hain?

JavaScript mein object ke andar maujood properties ko access karne ke do proper aur commonly used methods hote hain: dot notation (.) aur bracket notation ([]).

Dot Notation:

Ye sabse simple aur readable tarika hai, jab property ka naam ek valid JavaScript identifier ho (jaise ki alphabets se start hota ho aur koi space na ho).
Example:

let car = { brand: "Toyota", model: "Camry" };
console.log(car.brand); // Output: Toyota

Bracket Notation:

Is method ka use tab hota hai jab:

• Property ka naam space ya special characters mein ho
• Property dynamically access karni ho (e.g., variable se)

Example:

let car = { "car brand": "Toyota" };
console.log(car["car brand"]); // Output: Toyota

let key = "model";
console.log(car[key]);   

Output: Camry (agar model property ho)

Dono methods sahi hain, lekin situation ke hisaab se unka use karna best practice hoti hai.

Object Mein Property Add, Update, Delete Karna:

JavaScript mein object ek dynamic data structure hota hai jo key-value pairs store karta hai. Hum kisi bhi object mein asaani se property add, update, aur delete kar sakte hain.

Add Karna:
Nayi property add karne ke liye hum dot notation (object.key = value) ya bracket notation (object[“key”] = value) ka use karte hain. Agar key object mein nahi hoti, toh wo naye value ke saath add ho jaati hai.

Update Karna:
Agar object mein property already exist karti hai, aur hum usko naye value assign karte hain, toh wo update ho jaati hai. Add aur update dono mein same syntax use hota hai.

Delete Karna:
Property ko delete karne ke liye delete object.key ya delete object[“key”] ka use hota hai. Yeh object se specified property hata deta hai.

Example:

let student = {
  name: "Rahul",
  age: 20
};

// Add
student.class = "12th";

// Update
student.age = 21;

// Delete
delete student.name;

console.log(student);
// Output: { age: 21, class: "12th" }

Is tarah se JavaScript object bahut flexible hota hai, jisme hum run-time par hi properties ko add, update, ya delete kar sakte hain. Yeh feature real-world applications mein data ko dynamically handle karne ke liye kaafi useful hota hai.

Object Ke Andar Function (Method):

JavaScript mein jab hum kisi object ke andar function define karte hain, usse method kehte hain. Method ek aisa function hota hai jo kisi specific object ke behavior ko represent karta hai. Iska main purpose hota hai object ke data (properties) ko access karna ya usme kuch operation perform karna.

Jab method ko call kiya jata hai, to this keyword ka use karke wo apne object ki properties ko refer karta hai. Yeh JavaScript ka powerful feature hai, jisse hum real-world cheezon ko asaani se model kar sakte hain.

Example :

let person = {
  name: "Rahul",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
person.greet(); // Output: Hello, Rahul

Is example mein greet ek method hai jo person object ke andar define ki gayi hai aur this.name ke through uski property access kar rahi hai.

Looping Through Object – for…in loop:

JavaScript mein for…in loop ka use kisi object ke properties (keys) ko iterate karne ke liye kiya jata hai. Jab humein kisi object ke andar jitni bhi properties hain un sab par loop chalana ho, tab for…in loop helpful hota hai. Is loop mein har baar ek property key milti hai jise hum use karke uski value bhi access kar sakte hain.

Syntax:

const student = {
  name: "Rahul",
  age: 20,
  course: "BCA"
};

for (let key in student) {
  console.log(key + ": " + student[key]);
}

Output:

name: Rahul
age: 20
course: BCA

Explanation :

Is example mein humne ek student object banaya hai jisme teen properties hain: name, age, aur course.

for…in loop ke through hum har property ke key ko access kar rahe hain, aur student[key] se uski value ko print kar rahe hain.

Yeh loop object ke sabhi properties par ek-ek karke chalega aur key-value pair console mein dikhayega.

Nested Objects (Object ke andar object):

JavaScript mein Nested Objects ka matlab hota hai ek object ke andar doosra object hona. Ye tab use kiya jata hai jab hume complex data ko organize karna hota hai. Jaise ki agar kisi student ka data store karna ho, jisme uska naam, age, aur address ho – aur address ke andar city, state, aur pin code ho – toh hum address ko ek nested object ke roop mein define karte hain.

Example:

let student = {
  name: "Rahul",
  age: 20,
  address: {
    city: "Delhi",
    state: "Delhi",
    pin: 110001
  }
};

console.log(student.address.city);

Isme address ek nested object hai. Nested object ki values ko access karne ke liye dot (.) notation ya bracket ([]) notation ka use kiya jata hai, jaise: student.address.city.

Ye structure data ko clearly aur manageable banata hai, especially jab data hierarchical ya layered form mein ho.

Object.keys(), Object.values(), Object.entries():

JavaScript mein Object.keys(), Object.values(), aur Object.entries() teen built-in methods hote hain jo kisi object ke andar ke data ko alag-alag tarikay se access karne mein help karte hain.

Object.keys(object) → ye method object ki keys ko ek array mein return karta hai.

Object.values(object) → ye method object ki values ko array mein deta hai.

Object.entries(object) → ye method har key aur uski value ko ek array ke form mein nested array banakar return karta hai.

Example :

const person = {
  name: "Amit",
  age: 25,
  city: "Delhi"
};

console.log(Object.keys(person)); // ["name", "age", "city"]
console.log(Object.values(person)); // ["Amit", 25, "Delhi"]
console.log(Object.entries(person)); // [["name", "Amit"], ["age", 25], ["city", "Delhi"]]

Ye methods data ko manipulate ya iterate karne ke liye kaafi helpful hote hain.

Spread Operator (…) – Object Copy ya Merge Karna:

JavaScript mein spread operator (…) ek powerful feature hai jo arrays ya objects ke elements ko easily copy ya merge karne ke kaam aata hai. Jab hum kisi object ko copy karna chahte hain bina original object ko change kiye, tab hum spread operator ka use karte hain.

Example:

let obj1 = { name: "Rahul", age: 25 };
let obj2 = { ...obj1 };

let obj3 = { city: "Delhi" };
let mergedObj = { ...obj1, ...obj3 };

console.log(mergedObj); 
// Output: { name: "Rahul", age: 25, city: "Delhi" }

Yahan obj2 ek naya object hai jisme obj1 ke saare properties copy ho gaye hain.

Yahan mergedObj mein obj1 aur obj3 dono ke properties aa jaate hain. Agar same key hoti hai to last wala overwrite karta hai. Yeh tarika simple, clean aur readable hai object handling ke liye.

Optional Chaining (?.) – Safe Access :

JavaScript mein optional chaining (?.) ek modern feature hai jo humein nested object properties ya methods ko safely access karne ki suvidha deta hai, bina error ke. Jab kisi object ya property ka existence confirm na ho, tab ye operator use hota hai. Agar koi property ya method undefined ya null ho, toh optional chaining turant undefined return kar deta hai instead of throwing an error.

let user = { profile: { name: "Rahul" } };
console.log(user?.profile?.name); // "Rahul"
console.log(user?.address?.city); // undefined

Yahaan user?.address?.city likhne se JavaScript pehle check karega ki user aur address exist karta hai ya nahi. Agar nahi karta, toh wo error nahi dega, bas undefined return karega.

Isse code zyada safe aur readable ban jaata hai, especially jab APIs ya dynamic data ke sath kaam karte hain.

Object Destructuring :

Object Destructuring ek JavaScript feature hai jo humein object ke andar ke values ko easily extract karne ka tarika deta hai. Iska use karke hum kisi object ke specific properties ko directly variables mein assign kar sakte hain, bina baar-baar object.property likhe. Yeh syntax short aur readable code likhne mein madad karta hai.

For example:

const person = { name: "Rahul", age: 25 };
const { name, age } = person;

Yahan name aur age naam ke variables automatically person object se values le lenge.

Agar aapko kisi property ka naam change karna hai, toh aap alias ka use kar sakte ho:

const { name: userName } = person;

Isse userName variable mein name property ki value store hogi.

Object destructuring nested objects, default values, aur function parameters ke saath bhi kaam karta hai. Yeh feature modern JavaScript (ES6) ka hissa hai jo code ko concise aur maintainable banata hai.

JavaScript object ek powerful structure hai jo aapko complex data ko organize karne mein madad karta hai. Ye real-world cheezon ko represent karne ke liye use hota hai – jaise user, product, order, etc.

Objects ka samajhna ek JavaScript developer ke liye bahut zaroori hai, kyunki ye almost har jagah use hota hai – functions ke andar, APIs mein, DOM handling mein, etc.

Quiz: Test Your Knowledge on JavaScript Objects

Bonus: Practical Application!

Aaj hi apne webpage par JavaScript objects ka istemal karke dekhein!

JavaScript objects ko sahi tareeke se samajhne ke liye unke different parts jaise properties, values, methods, nested objects, aur this keyword ka upayog karein, aur apne code ko aur bhi zyada dynamic aur reusable banayein.