← Back to JavaScript Course | Chapter 2: Functions & Objects | Lesson 5 of 10

JS Objects

Think of a passport, it doesn't store just one piece of information, it groups your name, birth date, photo, and passport number all together under one document, each labeled clearly. A JavaScript object works the same way, it groups related pieces of data, called properties, and related actions, called methods, together under one single value, instead of scattering them across separate, disconnected variables. Objects are everywhere in real JavaScript, representing a tutorial, a user, or a whole configuration for a site like cookiescursor.com, all as one organized unit.
Syntax
javascript
const objectName = {
  property: value,
  method() {
    // body
  }
};
objectName.property;
objectName["property"];

Object Literals

Object literal घुँघराले कोष्ठकों {} से बनता है, जिनमें key-value जोड़ियाँ होती हैं जहाँ हर key एक property का नाम बताती है और उसका value किसी भी type का हो सकता है, जिनमें numbers, strings, arrays या अन्य objects भी शामिल हैं।

Note: स्वाभाविक रूप से संबंधित data को कई अलग variables की बजाय एक अकेले object में समूहित कीजिए, यह संबंधित जानकारी को साथ रखता है और उसे इधर-उधर पास करना आसान बनाता है।
Warning: Object property names with spaces or special characters must be written as strings, like 'display name': Amara, inside the literal.

उदाहरण: Object Literals

javascript
// Declare the constant `user`; its value is built below
// Declare the constant `user`; its value is built below
const user = {
  name: "Priya",
  age: 28,
};
// Print `user` to the console
// Print `user` to the console
console.log(user);

Properties और Methods

Property object पर store किया हुआ value है, जबकि method एक property के रूप में store किया हुआ function है, जो object को उसके data के अलावा अपना खुद का behavior देता है।

Note: Methods को स्पष्ट क्रिया-verbs से नाम दीजिए, जैसे getSummary या markComplete, ताकि साफ़ हो कि वे कोई क्रिया करते हैं न कि केवल data रखते हैं।
Warning: Forgetting the parentheses when calling a method, like tutorial.markComplete instead of tutorial.markComplete(), just references the function without ever running it.

उदाहरण: Properties and Methods

javascript
// Declare the constant `user`; its value is built below
// Declare the constant `user`; its value is built below
const user = {
  name: "Rahul",
  // Define the method `getSummary` with no parameters
  // Define the method `getSummary` with no parameters
  getSummary() {
    // Return ``Name: ${this.name}`` from this function
    // Return ``Name: ${this.name}`` from this function
    return `Name: ${this.name}`;
  },
};
// Print `user.getSummary()` to the console
// Print `user.getSummary()` to the console
console.log(user.getSummary());

Properties को Access करना

Properties को सरल निश्चित नामों के लिए dot notation, object.property, से या bracket notation, object[property], से access किया जा सकता है, जो तब ज़रूरी है जब property का नाम किसी variable में store हो या उसमें विशेष characters हों।

Note: डिफ़ॉल्ट रूप से dot notation इस्तेमाल कीजिए, यह छोटा और साफ़ है, और bracket notation पर केवल तब जाइए जब property का नाम गतिशील होना चाहिए।
Warning: Bracket notation with an undeclared variable, instead of a matching string key, silently looks up the wrong property or returns undefined.

उदाहरण: Accessing Properties

javascript
// Declare the constant `user`, set to `{ name: "Sam" }`
// Declare the constant `user`, set to `{ name: "Sam" }`
const user = { name: "Sam" };
// Print `user.name` to the console
// Print `user.name` to the console
console.log(user.name);
// Declare the constant `key`, set to "name"
// Declare the constant `key`, set to "name"
const key = "name";
// Print `user[key]` to the console
// Print `user[key]` to the console
console.log(user[key]);

this Keyword

किसी सामान्य method के अंदर, this उस object की ओर संकेत करता है जिस पर method बुलाया गया था, जिससे method उसी object की अन्य properties को object का नाम स्पष्ट रूप से लिखे बिना access कर पाता है।

Note: method के अंदर this के बारे में सोचने का एक त्वरित तरीका, यह आमतौर पर उसी को दर्शाता है जो method बुलाते समय dot के ठीक पहले लिखा हो।
Warning: Arrow functions do not have their own this, using an arrow function as an object method can lead to this pointing somewhere unexpected.

उदाहरण: The this Keyword

javascript
// Declare the constant `user`; its value is built below
// Declare the constant `user`; its value is built below
const user = {
  name: "Alex",
  // Define the method `greet` with no parameters
  // Define the method `greet` with no parameters
  greet() {
    // Print `Hi, I'm ${this.name}` to the console
    // Print `Hi, I'm ${this.name}` to the console
    console.log(`Hi, I'm ${this.name}`);
  },
};
// Call `user.greet()`
// Call `user.greet()`
user.greet();

Object Destructuring

Object destructuring किसी object से विशिष्ट properties को सीधे उनके अपने स्वतंत्र variables में निकाल लेती है, एक संक्षिप्त syntax से जो आपकी ज़रूरत की हर property के लिए object का नाम दोहराने से बचाती है।

Note: Destructuring खास तौर पर तब उपयोगी है जब कोई function object लौटाता है और बुलाने वाले code को उसकी बस दो-एक properties चाहिए।
Warning: Destructured variable names must exactly match the object's property names unless you explicitly rename them during destructuring.

उदाहरण: Object Destructuring

javascript
// Declare the constant `user`, set to `{ name: "Nina", age: 25 }`
// Declare the constant `user`, set to `{ name: "Nina", age: 25 }`
const user = { name: "Nina", age: 25 };
// Destructure {name, age} out of `user`
// Destructure {name, age} out of `user`
const { name, age } = user;
// Print `name, age` to the console
// Print `name, age` to the console
console.log(name, age);
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.