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

JavaScript वेरिएबल्स

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

English हिंदी

Variable एक नाम वाला डिब्बा है जो value रखता है। आप उसमें नंबर, text, या हाँ/ना वाला जवाब डालते हैं, डिब्बे को नाम देते हैं, और जब भी value चाहिए, नाम से बुला लेते हैं। Variables के बिना हर program को हर नंबर हाथ से दोहराना पड़ता — और एक कीमत बदलने का मतलब होता पूरे program में उसे ढूँढना।

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

JavaScript में variable बनाने के तीन तरीके हैं: var, let और const। वे एक जैसे दिखते हैं, पर उनका व्यवहार अलग है। आधुनिक code लगभग हमेशा let और const इस्तेमाल करता है; var पुराना तरीका है, सिर्फ इसलिए रखा गया है ताकि पुराने programs चलते रहें।

let — बदलने वाला डिब्बा

let ऐसा variable बनाता है जिसकी value बाद में बदल सकती है। Order में cups की संख्या, student के marks, form में type किया गया नाम — ये सब बदलते हैं, इसलिए ये let डिब्बों में रखे जाते हैं।

let cups = 2;
cups = 5; // the order grew — the same box now holds 5

const — न बदलने वाला डिब्बा

const ऐसा variable बनाता है जिसकी value तय होने के बाद कभी नहीं बदल सकती। एक कप चाय की कीमत, exam के pass marks, आपकी academy का नाम — तय बातें const डिब्बों में रखी जाती हैं। अगर आप बाद में const बदलने की कोशिश करते हैं, तो JavaScript error के साथ रुक जाता है। यह कोई खराबी नहीं, बल्कि एक सुविधा है: यह उन गलतियों को पकड़ लेता है जहाँ आप गलती से कोई value बदल देते हैं जो तय रहनी चाहिए थी।

const price = 10;
const passMarks = 33;
// price = 15;  // error! A const cannot be changed.

var — पुराना तरीका

var 2015 से पहले variables बनाने का इकलौता तरीका था। यह अभी भी काम करता है, पर इसका एक ढीला नियम है — block के अंदर declare किया गया var block से बाहर भी निकल सकता है — जिससे उलझन भरे bugs होते हैं। नए code को let और const इस्तेमाल करना चाहिए। जब आप पुराने tutorials में var देखें, तो जान लीजिए कि ज़्यादातर साधारण मामलों में इसका मतलब let जैसा ही है।

नाम रखने के नियम

Variable का नाम अक्षर, underscore _, या dollar sign $ से शुरू होना चाहिए। उसके बाद उसमें अक्षर, अंक, underscore और dollar sign हो सकते हैं। उसमें spaces नहीं हो सकते, और वह let या function जैसा reserved शब्द नहीं हो सकता। परंपरा है camelCase: पहला शब्द lowercase, उसके बाद हर शब्द capital letter से शुरू — totalBill, studentName, chaiPrice। अच्छे नाम value बताते हैं: price अच्छा है, x किसी को कुछ नहीं बताता।

Note: let या const से बना variable उस line से पहले इस्तेमाल नहीं किया जा सकता जिस line में वह बना है। इसे "temporal dead zone" कहते हैं। var से बना variable अपनी line से पहले इस्तेमाल हो सकता है, पर उसमें value undefined होगी — आधुनिक code के let और const पसंद करने की एक और वजह।

Tip: चुनने का एक साधारण नियम: const से शुरू कीजिए। अगर बाद में लगे कि value बदलनी है, तो उस एक variable को let में बदल दीजिए। यह आदत होने से पहले ही कई तरह की गलतियों से बचा देती है।

आम गलतियाँ

Variable को बनाने से पहले इस्तेमाल करना — alert(total); let total = 40;, let और const के साथ error है।
const बदलने की कोशिश करना — यही const का मतलब है, और JavaScript आपको रोकेगा।
एक ही जगह पर एक ही नाम दो बार let से इस्तेमाल करना — let price = 10; let price = 15; error है। इसकी जगह फिर से assign कीजिए: price = 15;।
Variable का नाम space के साथ या नंबर से शुरू करके रखना — let chai price = 10; और let 2cups = 5; दोनों error हैं।

याद रखें

let — ऐसा variable जिसे आप बाद में बदल सकते हैं।
const — ऐसा variable जिसे आप कभी नहीं बदल सकते। डिफ़ॉल्ट रूप से यहीं से शुरू कीजिए।
var — पुराना तरीका। यह काम करता है, पर let और const पसंद कीजिए।
नाम camelCase में रखिए: totalBill, studentName। कोई space नहीं, शुरुआत में कोई नंबर नहीं।

उदाहरण समझिए

const price = 10; — एक कप की कीमत order के दौरान कभी नहीं बदलती, इसलिए वह const डिब्बे में जाती है।
let cups = 3; — cups की संख्या बदल सकती है (customer और जोड़ सकता है), इसलिए वह let डिब्बे में जाती है।
let total = cups * price; — तीसरा variable, पहले दो से निकाला गया। Cups या price बदलिए, और total उनके साथ बदल जाता है।
document.getElementById("cups").value — input box में visitor ने जो नंबर type किया है, उसे पढ़ता है। Input की value हमेशा text होती है, इसलिए Number(...) उसे असली नंबर में बदल देता है।
"Total: ₹" + total — + text को नंबर से जोड़ता है, पेज के लिए एक संदेश बनाता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Chai Bill with Variables</title>
<style>
body { background-color: #fff8e1; font-family: Verdana, sans-serif; text-align: center; }
h1 { color: #b45309; }
input { padding: 10px; font-size: 16px; width: 80px; text-align: center; }
button { background-color: #e13611; color: white; border: none; padding: 12px 24px; font-size: 16px; cursor: pointer; }
#bill { color: green; font-weight: bold; font-size: 18px; }
</style>
</head>
<body>

<h1>Chai Bill with Variables</h1>
<p>Masala Chai costs ₹10 per cup. How many cups?</p>
<input id="cups" type="number" value="3">
<button onclick="showBill()">Calculate bill</button>
<p id="bill">Enter the cups and click the button.</p>

<script>
function showBill() {
  const price = 10;
  let cups = Number(document.getElementById("cups").value);
  let total = cups * price;
  document.getElementById("bill").textContent = "Total: ₹" + total;
}
</script>

</body>
</html>

परिणाम

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

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

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

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

परिणाम

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

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