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

JavaScript डेटा टाइप्स

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

English हिंदी

JavaScript की हर value का एक type होता है — एक प्रकार। Text का टुकड़ा string है, गिनती number है, हाँ/ना वाला जवाब boolean है। Type तय करता है कि आप उस value के साथ क्या कर सकते हैं: दो numbers को जोड़ सकते हैं, पर नंबर को text से जोड़ने पर वे जुड़ जाते हैं। Types जानना यह जानना है कि आपका code क्या कर सकता है।

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

कुल आठ types हैं, पर आप हर दिन छह का इस्तेमाल करेंगे: string, number, boolean, undefined, null और object। Arrays खास आकार वाले objects हैं। Built-in operator typeof किसी भी value का type बता देता है — यह जाँचने का सबसे तेज़ तरीका है कि आप असल में क्या पकड़े हुए हैं।

String, number, boolean — तीन बुनियादी प्रकार

String quotes के अंदर text है — single, double या backtick quotes, सब चलते हैं। Number कोई भी गिनती या माप है, पूरा या decimal; JavaScript में सिर्फ एक number type है, इसलिए 10 और 10.5 एक ही प्रकार के हैं। Boolean true या false है — हाँ/ना वाले सवाल का जवाब, जैसे "क्या student pass हुआ?"

let name = "Rahul Verma";  // string
let marks = 82;            // number
let passed = true;         // boolean

undefined और null — "कुछ नहीं" के दो प्रकार

undefined का मतलब है variable मौजूद है पर उसमें कभी कोई value डाली ही नहीं गई। null का मतलब है value जानबूझकर "कुछ नहीं" रखी गई है। फर्क इरादे का है: undefined एक गलती है जिसे ठीक करना है, null एक चुनाव है — "इस student का middle name नहीं है" null है, जबकि भूल से खाली छोड़ा गया variable undefined है। असल में, जब value गायब हो सकती है, तो दोनों को जाँचिए।

let middleName;           // undefined — never given a value
let nickname = null;      // null — deliberately empty

Object और array — कई values रखने वाले प्रकार

Object जुड़ी हुई values को नाम वाले labels के नीचे group करता है, जिन्हें properties कहते हैं। Student का नाम, उम्र और course है — एक object तीनों को रख सकता है। Array values की सूची को क्रम से रखता है, position से पहुँचा जाता है: पहला item position 0 पर है, दूसरा 1 पर, और आगे भी ऐसे ही।

let student = { name: "Rahul", age: 19, course: "HTML" };
let subjects = ["HTML", "CSS", "JavaScript"];
student.name;    // "Rahul"
subjects[0];     // "HTML" — positions start at 0

typeof — value से पूछना कि वह क्या है

typeof operator type को शब्द में लौटाता है: typeof "Rahul" है "string", typeof 82 है "number", typeof true है "boolean"। इसकी दो मशहूर अजीब बातें हैं: typeof null कहता है "object" (भाषा के पहले version की गलती, जो हमेशा के लिए रह गई), और typeof [] भी कहता है "object" — arrays objects ही हैं। Array को ठीक से जाँचने के लिए Array.isArray() इस्तेमाल कीजिए।

Note: Input box से आने वाले numbers हमेशा strings होते हैं। document.getElementById("marks").value आपको "82" देता है, 82 नहीं — और "82" + 10 है "8210", 92 नहीं। गणित करने से पहले input values को हमेशा Number(...) में लपेटिए।

Tip: जब नतीजा गलत लगे, तो value के साथ type भी print कीजिए: console.log(typeof marks, marks)। शुरुआती लोगों की आधी गलतियाँ इसलिए होती हैं क्योंकि value के अंक सही होते हैं पर type गलत होता है।

आम गलतियाँ

Input box से आए string से गणित करना — पहले उसे Number() से बदलिए।
यह सोचना कि typeof null को "null" कहना चाहिए — वह "object" कहता है, ऐतिहासिक अजीब बात। इसकी जगह === null से जाँचिए।
Array जाँचने के लिए typeof इस्तेमाल करना — वह "object" कहता है। Array.isArray() इस्तेमाल कीजिए।
Array की positions 1 से गिनना — पहला item position 0 पर है, इसलिए 3 items वाली सूची का आखिरी item position 2 पर है।

याद रखें

String = quotes में text, number = गिनती या माप, boolean = true या false।
undefined = कभी value नहीं दी गई; null = जानबूझकर खाली।
Object values को नाम से group करता है; array values को position से सूची में रखता है, 0 से शुरू।
typeof value का type बताता है — null और arrays को छोड़कर, जो दोनों "object" कहते हैं।

उदाहरण समझिए

let student = { name: "Rahul Verma", age: 19, course: "HTML" }; — एक object जो student के बारे में तीन जुड़े तथ्य रखता है, हर एक अपने label के नीचे।
let subjects = ["HTML", "CSS", "JavaScript"]; — तीन strings का array, उसी क्रम में जिस क्रम में student उन्हें सीख रहा है।
typeof student.name — नाम का type पूछता है, और "string" मिलता है।
typeof student.age — उम्र का type पूछता है, और "number" मिलता है।
Array.isArray(subjects) — array जाँचने का सही तरीका, क्योंकि typeof सिर्फ "object" कहता।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Student Profile — Data Types</title>
<style>
body { background-color: #fff8e1; font-family: Verdana, sans-serif; text-align: center; }
h1 { color: #b45309; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 320px; margin: 20px auto; text-align: left; }
button { background-color: #e13611; color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; }
#types { color: green; font-weight: bold; font-size: 16px; }
</style>
</head>
<body>

<h1>Student Profile</h1>
<div class="card">
<p>Name: Rahul Verma</p>
<p>Age: 19</p>
<p>Course: HTML</p>
<p>Subjects: HTML, CSS, JavaScript</p>
</div>
<button onclick="showTypes()">Show the types</button>
<p id="types">Click the button to see the type of each value.</p>

<script>
function showTypes() {
  let student = { name: "Rahul Verma", age: 19, course: "HTML" };
  let subjects = ["HTML", "CSS", "JavaScript"];
  let line1 = "name is a " + typeof student.name;
  let line2 = "age is a " + typeof student.age;
  let line3 = "subjects is an array: " + Array.isArray(subjects);
  document.getElementById("types").textContent = line1 + " | " + line2 + " | " + line3;
}
</script>

</body>
</html>

परिणाम

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Student Profile — Data Types</title>
<style>
body { background-color: #fff8e1; font-family: Verdana, sans-serif; text-align: center; }
h1 { color: #b45309; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 320px; margin: 20px auto; text-align: left; }
button { background-color: #e13611; color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; }
#types { color: green; font-weight: bold; font-size: 16px; }
</style>
</head>
<body>

<h1>Student Profile</h1>
<div class="card">
<p>Name: Rahul Verma</p>
<p>Age: 19</p>
<p>Course: HTML</p>
<p>Subjects: HTML, CSS, JavaScript</p>
</div>
<button onclick="showTypes()">Show the types</button>
<p id="types">Click the button to see the type of each value.</p>

</body>
</html>

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

परिणाम

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

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