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

JavaScript कंडीशन्स

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

English हिंदी

JavaScript मैथ JavaScript स्विच

अब तक आपने जो कोड लिखा है, वह हमेशा एक सीध में चलता था, ऊपर से नीचे, एक बार, और कभी कोई चक्कर नहीं लगाता था। लेकिन असली प्रोग्राम फैसले लेते हैं। अगर नंबर 40 या उससे ज़्यादा हैं, तो "पास" छापो। वरना "फेल" छापो। अगर रात है, तो डार्क मोड चालू करो। अगर यूज़र ने सारे सवाल सही किए, तो सर्टिफ़िकेट दिखाओ। कंडीशन्स से प्रोग्राम सोचना सीखते हैं।

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

कंडीशन एक सवाल है, जिसका जवाब सिर्फ हाँ या ना में होता है। marks >= 40 — हाँ है या ना है, बीच का कोई रास्ता नहीं। if पूछता है, और अगर जवाब हाँ है, तो उसका ब्लॉक चलता है। else if फिर पूछता है, और else बाकी सब को समेट लेता है। इसे ऐसे याद रखें: if पूछता है, else if दोबारा पूछता है, else बाकी सब संभाल लेता है।

if — एक सवाल

if statement कंडीशन को जाँचता है। अगर वह true है, तो curly braces के अंदर का कोड चलता है। अगर वह false है, तो प्रोग्राम ब्लॉक को छोड़कर आगे बढ़ जाता है।

let marks = 75;
if (marks >= 40) {
  console.log("Passed");
}

कंडीशन किसी भी comparison हो सकती है: >, <, >=, <=, === या !==। नोट करें कि === तीन = का इस्तेमाल करता है — एक = assign करता है, दो == बराबरी को छूट के साथ जाँचते हैं, तीन === सख्ती से जाँचते हैं। कंडीशन में हमेशा === इस्तेमाल करें; एक = बग बना देता है।

else — नहीं तो

else वह है जो कंडीशन false होने पर होता है। यह if से बँधा होता है और बिना कंडीशन के आता है — यह "बाकी सब" है।

if (marks >= 40) {
  console.log("Passed");
} else {
  console.log("Failed");
}

यह पक्का करता है कि दो में से एक संदेश हमेशा छपे। बिना else के, एक फेल छात्र को कोई संदेश ही नहीं मिलता।

else if — फिर से पूछो

कभी-कभी दो से ज़्यादा जवाब होते हैं। पास, distinction, या फेल? आप कंडीशनों को else if से जोड़ते हैं। JavaScript उन्हें ऊपर से नीचे जाँचता है और पहली true वाली कंडीशन पर रुक जाता है — बाकी को कभी जाँचा ही नहीं जाता।

if (marks >= 75) {
  console.log("Distinction");
} else if (marks >= 40) {
  console.log("Passed");
} else {
  console.log("Failed");
}

Note: कंडीशनों का क्रम मायने रखता है। अगर आप marks >= 40 पहले और marks >= 75 बाद में जाँचें, तो 90 नंबर वाला छात्र पहले >= 40 वाले ब्लॉक में फँस जाएगा और उसे कभी "Distinction" नहीं मिलेगा। हमेशा सबसे सख्त कंडीशन पहले रखें — सबसे पहले सबसे बड़ी संख्या।

टर्नरी ऑपरेटर — छोटा if-else

जब आपके पास सिर्फ दो जवाब हों और दोनों छोटे हों, तो आप if / else को एक लाइन में लिख सकते हैं: condition ? valueIfTrue : valueIfFalse। इसे टर्नरी (ternary) operator कहते हैं, क्योंकि यह तीन हिस्सों से बनता है।

let marks = 75;
let result = marks >= 40 ? "Passed" : "Failed";
// result है "Passed"

यह if का छोटा रूप है, ज़्यादातर तब इस्तेमाल होता है जब आप variable को मान दे रहे हों। अगर लॉजिक लंबा हो जाता है, तो टर्नरी को नेस्ट न करें — उसे वापस सामान्य if / else में लिखें, जो इंसानों के पढ़ने में आसान है।

Tip: जब आपके पास सिर्फ दो ही संभावनाएँ हों, तो else को छोड़ने के लालच से बचें। if (loggedIn) { showDashboard(); } लिखने से logged-out यूज़र को कुछ नहीं दिखता — सिर्फ एक खाली पेज। else जोड़कर उन्हें login पेज दिखाएँ। हर रास्ते के लिए कोई संदेश होना चाहिए, नहीं तो यूज़र को लगेगा कि पेज टूट गया है।

आम गलतियाँ

कंडीशन में === की जगह = लिखना — if (marks = 40) marks को 40 बना देता है, और यह हमेशा true होता है। = assign करता है, === तुलना करता है।
else if कंडीशनों को गलत क्रम में रखना — व्यापक कंडीशन सख्त वाली से पहले आकर उसे छिपा देती है। सबसे सख्त पहले।
if और else के बीच कुछ लिख देना — else if से ठीक बाद आना चाहिए, नहीं तो JavaScript परेशान हो जाता है।
कंडीशन के बाद semicolon लगा देना — if (marks >= 40); ब्लॉक को खाली कर देता है और उसके बाद का कोड हमेशा चलता है।
टर्नरी को ज़रूरत से ज़्यादा नेस्ट करना — टर्नरी के अंदर टर्नरी पढ़ना लगभग असंभव है। उसके लिए सामान्य if / else इस्तेमाल करें।

याद रखें

if पूछता है, else if दोबारा पूछता है, else बाकी सब संभाल लेता है।
तुलना में हमेशा === इस्तेमाल करें; एक = assign करता है, तुलना नहीं करता।
else if की श्रृंखला में सबसे सख्त कंडीशन पहले आती है।
टर्नरी condition ? ifTrue : ifFalse दो छोटे जवाबों के लिए छोटा if-else है।
हर रास्ते के लिए कोई संदेश होना चाहिए — बिना else के यूज़र को खाली पेज दिखता है।

उदाहरण समझिए

Number(document.getElementById("marks").value) — input से आए नंबर स्ट्रिंग होते हैं, इसलिए Number() उन्हें तुलना से पहले असली नंबर में बदल देता है।
if (marks >= 75) — सबसे सख्त कंडीशन पहले जाँची जाती है, ताकि 90 नंबर वाले छात्र को Distinction मिले, सिर्फ Pass नहीं।
else if (marks >= 40) — यह तभी चलता है जब पहली कंडीशन fail हो गई हो, इसलिए यह 40 से 74 के बीच वाले छात्रों को पकड़ता है।
else — बिना कंडीशन के, बाकी सब को पकड़ता है: 40 से कम नंबर वाले छात्र फेल हैं।
document.getElementById("result").innerHTML = ... — बटन क्लिक करने पर सही संदेश पेज में लिखता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Result Checker — JavaScript Conditions</title>
<style>
body { font-family: Verdana, sans-serif; padding: 20px; }
h1 { color: #1e3a5f; }
button { background-color: #e13611; color: white; border: none; padding: 10px 18px; font-size: 16px; cursor: pointer; }
p { font-size: 18px; }
.result { background-color: #f1f5f9; padding: 12px; }
</style>
</head>
<body>

<h1>Result Checker</h1>
<p>Marks: 82 out of 100</p>
<button onclick="checkResult()">Check Result</button>
<p class="result" id="result">Click the button to see the division.</p>

<script>
function checkResult() {
  let marks = 82;
  let division;
  if (marks >= 90) {
    division = "Distinction";
  } else if (marks >= 60) {
    division = "First division";
  } else if (marks >= 40) {
    division = "Second division";
  } else {
    division = "Fail";
  }
  let status = (marks >= 40) ? "Pass" : "Fail";
  document.getElementById("result").innerHTML =
    "Marks: " + marks +
    "<br>Division: " + division +
    "<br>Status: " + status;
}
</script>

</body>
</html>

परिणाम

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

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

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

<!DOCTYPE html>
<html>
<head>
<title>Result Checker — JavaScript Conditions</title>
<style>
body { font-family: Verdana, sans-serif; padding: 20px; }
h1 { color: #1e3a5f; }
button { background-color: #e13611; color: white; border: none; padding: 10px 18px; font-size: 16px; cursor: pointer; }
p { font-size: 18px; }
.result { background-color: #f1f5f9; padding: 12px; }
</style>
</head>
<body>

<h1>Result Checker</h1>
<p>Marks: 82 out of 100</p>
<button onclick="checkResult()">Check Result</button>
<p class="result" id="result">Click the button to see the division.</p>

</body>
</html>

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

परिणाम

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

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