पाठ 10, कुल 30 में

JavaScript ऑब्जेक्ट्स

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

Object एक ही variable है जो कई जुड़ी हुई values को एक साथ रखता है। Student के admission form के बारे में सोचिए: नाम, course, mobile number, marks — चार अलग variables, या एक object जिसका नाम student है जो चारों को रखता है। Object डिब्बा (lunch box) जैसा है जिसमें नाम वाले खाने हैं: हर खाने का नाम है (property) और उसके अंदर कुछ है (value)।

Diagram — देखें, यह सब कैसे जुड़ता है

Objects JavaScript में हर जगह हैं क्योंकि असली ज़िंदगी उन चीज़ों से बनी है जिनके विवरण होते हैं। चाय के order का type, size और कीमत होती है। Cricket player का नाम, team और score होता है। जब भी विवरण एक साथ होने चाहिए, object उनके लिए सही डिब्बा है।

Object बनाना

आप object को घुँघराले कोष्ठकों से बनाते हैं। अंदर आप name: value जोड़े लिखते हैं, commas से अलग। इसे object literal कहते हैं।

let student = {
  name: "Rahul Verma",
  course: "HTML",
  marks: 85
};

Property के नाम आमतौर पर बिना quotes के लिखे जाते हैं। Values कुछ भी हो सकती हैं — string, number, boolean, array, या एक और object भी।

Dot बनाम bracket notation

Property पढ़ने के दो तरीके हैं। Dot notation आम तरीका है: student.name देता है "Rahul Verma"। Bracket notation string से वही काम करता है: student["name"]। जब code लिखते समय property का नाम पता हो, तो dot इस्तेमाल कीजिए; जब property का नाम किसी variable में रखा हो, या उसमें space हो, तो brackets इस्तेमाल कीजिए।

student.marks = 90;              // change a value with the dot
student["course"] = "CSS";       // change a value with brackets
student.mobile = "9876543210";   // add a brand-new property

Object बनने के बाद आप उसमें नई properties भी जोड़ सकते हैं, बस उन्हें assign करके। Admission form ऐसे ही बढ़ता है: पहले नाम, फिर course, फिर photo।

Note: साधारण variable से अलग, object reference से pass होता है। अगर आप let b = student लिखते हैं, तो दोनों नाम एक ही object की तरफ इशारा करते हैं — b.marks बदलने से student.marks भी बदल जाता है। इसीलिए objects शक्तिशाली हैं और इसीलिए उनके साथ सावधान रहना पड़ता है।

Methods और this

जिस property की value function होती है, उसे method कहते हैं — यह वह है जो object कर सकता है। Method के अंदर, this शब्द का मतलब है "यही object"। इसलिए student के अंदर this.name का मतलब है student.name।

let student = {
  name: "Rahul Verma",
  marks: 85,
  pass: function() {
    return this.marks >= 40;
  }
};
student.pass();  // true

Methods data और उस पर होने वाली actions को एक साथ रखते हैं। Object अपने marks जानता है, और यह भी जानता है कि वह pass हुआ या नहीं, कैसे जाँचा जाए।

Tip: जब आपको एक जैसी चीज़ों की सूची चाहिए हो, तो objects का array इस्तेमाल कीजिए — let students = [{name: "Rahul", marks: 85}, {name: "Priya", marks: 92}]। एक array पूरी class रखता है, और हर student उसके अंदर एक object है। यह pattern आपको असली projects में बार-बार मिलेगा।

आम गलतियाँ

Properties के बीच comma भूल जाना — आखिरी को छोड़कर हर जोड़े के बाद comma चाहिए।
student.name() लिखना जब name value है, function नहीं — सिर्फ methods को brackets मिलते हैं।
Method के बाहर this इस्तेमाल करना — object के बाहर, this का मतलब कुछ और ही होता है।
यह उम्मीद करना कि copy किया गया object अलग होगा — let b = student reference copy करता है, object नहीं।

याद रखें

Object जुड़ी हुई values को नाम वाली properties के नीचे group करता है: { name: "Rahul", marks: 85 }।
Dot notation (student.name) सामान्य तरीका है; brackets (student["name"]) तब काम आते हैं जब नाम किसी variable में हो।
Method property में रखा गया function है; उसके अंदर this का मतलब है object खुद।
Object नाम वाले खाने वाला डिब्बा है — dot एक label खोलता है, bracket कोई भी label खोलता है।

उदाहरण समझिए

let student = { name: "Rahul Verma", course: "HTML", marks: 85 }; — एक object जो तीन जुड़ी हुई values रखता है, जैसे एक admission form।
pass: function() { return this.marks >= 40; } — object के अंदर एक method। this.marks object के अपने marks पढ़ता है।
student.marks = 95; — dot notation marks बदलता है। Button उसी तरह 10 bonus marks जोड़ता है।
document.getElementById("info").innerHTML = student.name + ... — object की properties से text की line बनाता है और उसे पेज पर दिखाता है।
student.pass() — method बुलाने पर true या false मिलता है, इसलिए पेज "Passed" या "Failed" कह सकता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Student Card</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #1e3a5f; }
.card { background-color: white; border: 2px solid #1e3a5f; padding: 16px; width: 320px; }
button { background-color: #04aa6d; color: white; padding: 10px 18px; border: none; }
</style>
</head>
<body>

<h1>Student Card</h1>
<div class="card">
<p>Name: Rahul Verma</p>
<p>Course: HTML</p>
<p>Marks: <span id="marks">85</span> / 100</p>
<p id="info">Click the button to add 10 bonus marks.</p>
</div>
<button onclick="addBonus()">Add 10 Bonus Marks</button>

<script>
let student = {
  name: "Rahul Verma",
  course: "HTML",
  marks: 85,
  pass: function() {
    return this.marks >= 40;
  }
};
function addBonus() {
  student.marks = student.marks + 10;
  document.getElementById("marks").innerHTML = student.marks;
  document.getElementById("info").innerHTML = student.name + " — " + (student.pass() ? "Passed" : "Failed");
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Student Card</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #1e3a5f; }
.card { background-color: white; border: 2px solid #1e3a5f; padding: 16px; width: 320px; }
button { background-color: #04aa6d; color: white; padding: 10px 18px; border: none; }
</style>
</head>
<body>

<h1>Student Card</h1>
<div class="card">
<p>Name: Rahul Verma</p>
<p>Course: HTML</p>
<p>Marks: <span id="marks">85</span> / 100</p>
<p id="info">Click the button to add 10 bonus marks.</p>
</div>
<button onclick="addBonus()">Add 10 Bonus Marks</button>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।