Learn Objects in JavaScript in Hindi – Easy Guide for Beginners

JavaScript में objects जटिल डेटा संरचनाएँ हैं, जो key-value pairs के रूप में डेटा को व्यवस्थित और प्रबंधित करते हैं। यह ब्लॉग HindiStudyHub के लिए Object Creation, Properties, Methods, Accessing (Dot/Bracket Notation), Nested Objects, और Destructuring (Basic) को सरल हिंदी में समझाता है। साथ ही, exercise (कार ऑब्जेक्ट), 5 MCQ quiz, और mini project (छात्र रिकॉर्ड सिस्टम) आपके JavaScript स्किल्स को बढ़ाएंगे। टेक्निकल टर्म्स (जैसे object, property, method) English में हैं, और कोड पूरी तरह English में है।

What is Objects in JavaScript in Hindi? (JavaScript में ऑब्जेक्ट क्या होते है?)

Objects key-value pairs को स्टोर करने वाले reference types हैं, जो heap memory में रहते हैं। Properties और methods के ज़रिए डेटा को व्यवस्थित करते हैं। यह डेटा को वास्तविक दुनिया की चीज़ों (जैसे व्यक्ति, कार) की तरह मॉडल करने में मदद करते हैं। Objects को कॉपी करने पर reference कॉपी होता है, न कि डेटा। गलत key से undefined या reference errors हो सकते हैं।
Example:

const person = { name: "Amit", age: 25 };
console.log(person.name); // Amit

Object Creation:

Object Creation object literals ({}) या Object constructor से होता है। रनटाइम में memory allocation होता है। Prototype-based inheritance सपोर्ट करता है। Literals सिंटैक्स सरल और तेज़ है, जबकि constructor ज्यादा लचीलापन देता है। गलत प्रोटोटाइप हैंडलिंग से inheritance issues। बेस्ट प्रैक्टिस: literals यूज़ करें, Object.create तलाशें। उपयोग: डेटा संरचना, इकाई मॉडलिंग। समस्याएँ: prototype pollution
Example:

const car = { brand: "Toyota", model: "Corolla" };
const obj = new Object();
obj.name = "Test";
console.log(car.brand); // Toyota

Properties:

Properties keys (strings/symbols) और values (कोई भी प्रकार) का जोड़ा हैं। डायनामिक जोड़ना/हटाना सपोर्ट करते हैं। Property descriptors से read-only या hidden properties बनाए जा सकते हैं। गलत key से undefined। बेस्ट प्रैक्टिस: key का नाम एकसमान रखें, Object.defineProperty तलाशें। उपयोग: गुण स्टोरेज, कॉन्फ़िगरेशन। समस्याएँ: key collisions, अनचाहा डेटा ओवरराइट।
Example:

const student = { name: "Ravi", rollNo: 101 };
student.grade = "A";
console.log(student); // { name: "Ravi", rollNo: 101, grade: "A" }

Methods:

Methods object में स्टोर किए गए functions हैं, जो व्यवहार को परिभाषित करते हैं। this से properties को access करते हैं। Methods ऑब्जेक्ट के डेटा पर काम करके उसे प्रोसेस करते हैं, जैसे गणना या डेटा बदलना। गलत this binding से runtime errors। बेस्ट प्रैक्टिस: arrow functions से बचें, method shorthand यूज़ करें। उपयोग: ऑब्जेक्ट व्यवहार, डेटा प्रोसेसिंग। समस्याएँ: context loss, गलत फंक्शन कॉल्स।
Example:

const user = {
  name: "Priya",
  greet: function() { return `Hello, ${this.name}!`; }
};
console.log(user.greet()); // Hello, Priya!

Accessing:

Accessing properties को dot notation (.) या bracket notation ([]) से प्राप्त करता है। Dot notation तेज़ और पढ़ने में आसान, bracket notation डायनामिक keys के लिए। Bracket notation तब उपयोगी जब key वेरिएबल से आता है। गलत key से undefined। बेस्ट प्रैक्टिस: dot notation प्राथमिकता दें, डायनामिक keys के लिए bracket notation। उपयोग: डायनामिक प्रॉपर्टी एक्सेस, डेटा प्राप्त करना। समस्याएँ: अमान्य keys, टाइपो एरर्स।
Example:

const book = { title: "JavaScript Guide", year: 2023 };
console.log(book.title); // JavaScript Guide
console.log(book["year"]); // 2023

Dot Notation:

Dot notation DOM में element की प्रॉपर्टीज़ या मेथड्स को सीधे एक्सेस करता है। यह पढ़ने में आसान और तेज़ है। गलत प्रॉपर्टी नाम से undefined मिलता है। बेस्ट प्रैक्टिस: वैलिड प्रॉपर्टीज़ यूज़ करें। उपयोग: element प्रॉपर्टीज़ पढ़ना, मेथड कॉल। समस्याएँ: अमान्य प्रॉपर्टीज़, null त्रुटियाँ।
Example:

const title = document.getElementById("title");
console.log(title.textContent); // Title text

Bracket Notation:

Bracket notation DOM में प्रॉपर्टीज़ को डायनामिकली एक्सेस करता है, खासकर जब नाम वेरिएबल में हो। यह लचीलापन देता है। गलत प्रॉपर्टी से undefined। बेस्ट प्रैक्टिस: डायनामिक प्रॉपर्टीज़ के लिए यूज़ करें। उपयोग: वेरिएबल-बेस्ड एक्सेस, जटिल प्रॉपर्टीज़। समस्याएँ: syntax errors, null त्रुटियाँ।
Example:

const prop = "textContent";
const title = document.getElementById("title");
console.log(title[prop]); // Title text

Nested Objects:

Nested Objects objects के अंदर objects को स्टोर करते हैं। Hierarchical data को दर्शाते हैं। जटिल डेटा जैसे पते या प्रोफाइल को व्यवस्थित करने में मदद करते हैं। गलत access chain से TypeError। बेस्ट प्रैक्टिस: optional chaining (?) यूज़ करें, null checks करें। उपयोग: जटिल डेटा मॉडलिंग, JSON संरचनाएँ। समस्याएँ: गहरी नेस्टिंग समस्याएँ, null reference errors
Example:

const person = { name: "Anil", address: { city: "Delhi", zip: 110001 } };
console.log(person.address.city); // Delhi

Destructuring (Basic):

Destructuring object properties को variables में निकालता है। Syntax sugar से कोड पढ़ना आसान होता है। एक लाइन में कई properties को वेरिएबल्स में असाइन कर सकता है। गलत key से undefined। बेस्ट प्रैक्टिस: default values यूज़ करें, rest/spread तलाशें। उपयोग: डेटा निकालना, फंक्शन पैरामीटर्स। समस्याएँ: अनुपस्थित properties, गलत key नाम।
Example:

const user = { name: "Neha", age: 30 };
const { name, age } = user;
console.log(name, age); // Neha 30

Exercise: Create and update a car object

Task: Object बनाएँ जो कार (ब्रांड, मॉडल, वर्ष) को दर्शाए। Properties को अपडेट करें। जाँच करें। गलत इनपुट से type errors। बेस्ट प्रैक्टिस: immutable updates यूज़ करें। उपयोग: डेटा मॉडलिंग, स्थिति प्रबंधन।
Code:

function createCar(brand, model, year) {
  if (typeof brand !== "string" || typeof model !== "string" || !Number.isInteger(year)) {
    return "Invalid input";
  }
  const car = { brand, model, year };
  car.updateYear = function(newYear) {
    if (!Number.isInteger(newYear)) return "Invalid year";
    this.year = newYear;
    return { ...this }; // Immutable return
  };
  return car;
}
const myCar = createCar("Honda", "Civic", 2020);
console.log(myCar); // { brand: "Honda", model: "Civic", year: 2020, updateYear: [Function] }
console.log(myCar.updateYear(2022)); // { brand: "Honda", model: "Civic", year: 2022, updateYear: [Function] }

Quiz: Object-Syntax

  1. What is the output of const obj = { name: "Amit" }; console.log(obj.name);?

    • A) Amit

    • B) undefined

    • C) Error

    • D) null
      Answer: A) Amit

  2. What is the output of const obj = { key: "value" }; console.log(obj["key"]);?

    • A) undefined

    • B) value

    • C) Error

    • D) key
      Answer: B) value

  3. What is the output of const obj = { name: "Ravi", greet: function() { return this.name; } }; console.log(obj.greet());?

    • A) Ravi

    • B) undefined

    • C) Error

    • D) greet
      Answer: A) Ravi

  4. What is the output of const { age } = { name: "Neha" }; console.log(age);?

    • A) Neha

    • B) undefined

    • C) Error

    • D) null
      Answer: B) undefined

  5. “What is the output of const obj = { data: { id: 1 } }; console.log(obj.data.id);?

    • A) 1

    • B) undefined

    • C) Error

    • D) data4
      Answer: A) 1

Mini Project: Student Record System

Task: Object-based छात्र रिकॉर्ड सिस्टम बनाएँ, जो नाम, ग्रेड्स को स्टोर करे और औसत निकाले। जाँच करें। गलत इनपुट से type errors। बेस्ट प्रैक्टिस: immutable returns, इनपुट जाँच। उपयोग: रिकॉर्ड प्रबंधन, डेटा विश्लेषण।
Code:

function createStudentRecord(name, grades) {
  if (typeof name !== "string" || !Array.isArray(grades) || !grades.every(g => typeof g === "number")) {
    return "Invalid input";
  }
  const student = {
    name,
    grades,
    calculateAverage: function() {
      if (this.grades.length === 0) return 0;
      const sum = this.grades.reduce((acc, grade) => acc + grade, 0);
      return sum / this.grades.length;
    },
    addGrade: function(grade) {
      if (typeof grade !== "number") return "Invalid grade";
      this.grades.push(grade);
      return { ...this, grades: [...this.grades] }; // Immutable return
    }
  };
  return student;
}
const student = createStudentRecord("Anil", [85, 90, 95]);
console.log(student.calculateAverage()); // 90
console.log(student.addGrade(88)); // { name: "Anil", grades: [85, 90, 95, 88], ... }

Conclusion

Objects JavaScript में जटिल डेटा को प्रबंधित करने का शक्तिशाली तरीका हैं। Properties, Methods, और Destructuring से डेटा प्रोसेसिंग आसान होती है। HindiStudyHub पर प्रैक्टिस करें और अगले मॉड्यूल में Functions सीखें।

Also Read: 

Leave a Comment

Your email address will not be published. Required fields are marked *