🟡 Control Flow · Lesson 14

if...else Statements

The if Statement — making decisions

let age = 20;

if (age >= 18) {
    console.log("You can vote");
}

if runs a block of code ONLY when a condition is true. The structure: the keyword if, a condition in parentheses, and a block in curly braces. JavaScript evaluates the condition (which produces a boolean — exactly what you learned), and if it's true, the code inside the braces runs; if false, that code is skipped entirely. This is where booleans finally earn their keep. Every program that makes a choice — showing an error, unlocking a feature, granting access — starts with if. It's arguably the single most important statement in programming.

Adding else — the other path

let marks = 28;

if (marks >= 33) {
    console.log("Pass");
} else {
    console.log("Fail");        // this runs
}

else provides the alternative: "if the condition is true do THIS, otherwise do THAT." Exactly one of the two blocks will always run — never both, never neither. Note that else takes no condition of its own; it's simply the catch-all for when the if condition was false. This two-way split covers most everyday decisions: pass or fail, logged in or not, in stock or sold out. Written this way, your code reads almost like plain English — which is why if/else feels natural from the start.

else if — checking several conditions

let marks = 85;

if (marks >= 90) {
    console.log("Grade A");
} else if (marks >= 75) {
    console.log("Grade B");     // this runs (85 is >= 75)
} else if (marks >= 33) {
    console.log("Grade C");
} else {
    console.log("Fail");
}

When there are more than two possibilities, chain conditions with else if. JavaScript checks each condition in ORDER, from top to bottom, and runs the FIRST block whose condition is true — then skips all the rest. This "first match wins" behaviour is critical to understand: notice the marks 85 passes >= 75, so Grade B runs and >= 33 is never even checked. Order your conditions from most specific/highest to least, or you'll get wrong results (if >= 33 came first, everyone would get Grade C!). The final else catches everything left over.

Nested if — an if inside an if

let age = 20, hasTicket = true;

if (age >= 18) {
    if (hasTicket) {
        console.log("Welcome in!");
    } else {
        console.log("Please buy a ticket");
    }
} else {
    console.log("Adults only");
}

// Often cleaner with && instead:
if (age >= 18 && hasTicket) { console.log("Welcome in!"); }

You can place an if inside another if to check a second condition only when the first passed. This works, but deep nesting quickly becomes hard to read — code drifts further right and the logic gets tangled. Often you can flatten a nested if using the logical && operator, which reads far more clearly. As a rule of thumb: if you're nesting more than two levels deep, look for a way to simplify with &&, ||, or by handling exceptional cases early.

The Ternary Operator — a one-line if/else

let age = 20;

// The long way:
let status;
if (age >= 18) { status = "Adult"; } else { status = "Minor"; }

// The ternary way (same result, one line):
let status2 = age >= 18 ? "Adult" : "Minor";
//            condition  ? if-true : if-false

The ternary operator is a compact if/else that returns a VALUE. Its shape is condition ? valueIfTrue : valueIfFalse — read the ? as "then" and the : as "otherwise." It's perfect for simple either/or assignments, like picking a label, a colour, or a message. Use it when the logic is short and clear; if your ternary starts needing nested ternaries, switch back to a proper if/else for readability. You'll see ternaries constantly in real JavaScript, especially inside template literals: `${isLoggedIn ? "Logout" : "Login"}`.

Exam Corner

Q: When does an if block run? Only when its condition evaluates to true.

Q: In an else if chain, which block runs? The first one whose condition is true — the rest are skipped.

Q: Why does condition order matter in else if chains? Because the first true condition wins; a broad condition placed first would catch everything.

Q: Write the ternary syntax. condition ? valueIfTrue : valueIfFalse

Q: How can you often avoid a nested if? By combining conditions with the && operator.

if Statement — फैसले करना

let age = 20;

if (age >= 18) {
    console.log("You can vote");
}

if code का block SIRF तब चलाता है जब condition true हो. Structure: keyword if, parentheses में condition, और curly braces में block. JavaScript condition evaluate करता है (जो boolean बनाता है — ठीक वही जो आपने सीखा), और अगर true है, braces के अंदर का code चलता है; false है तो वह code पूरी तरह छूट जाता है. यहीं booleans अपनी कीमत कमाते हैं. हर program जो कोई choice करता है — error दिखाना, feature खोलना, access देना — if से शुरू होता है. यह तर्कसंगत रूप से programming का सबसे ज़रूरी statement है.

else जोड़ना — दूसरा रास्ता

let marks = 28;

if (marks >= 33) {
    console.log("Pass");
} else {
    console.log("Fail");        // yeh chalta hai
}

else विकल्प देता है: "अगर condition true है तो YE करो, वरना WO करो." दोनों blocks में से ठीक एक हमेशा चलेगा — कभी दोनों नहीं, कभी कोई नहीं. ध्यान दीजिए else अपनी कोई condition नहीं लेता; यह बस if condition false होने पर catch-all है. यह दो-तरफा बंटवारा ज़्यादातर रोज़ के फैसले cover करता है: pass या fail, logged in या नहीं, stock में या बिका. ऐसे लिखा, आपका code लगभग सादे अंग्रेज़ी जैसा पढ़ता है — इसीलिए if/else शुरू से स्वाभाविक लगता है.

else if — कई conditions जांचना

let marks = 85;

if (marks >= 90) {
    console.log("Grade A");
} else if (marks >= 75) {
    console.log("Grade B");     // yeh chalta hai (85 >= 75 hai)
} else if (marks >= 33) {
    console.log("Grade C");
} else {
    console.log("Fail");
}

जब दो से ज़्यादा संभावनाएं हों, else if से conditions chain कीजिए. JavaScript हर condition को KRAM में जांचता है, ऊपर से नीचे, और PEHLA block चलाता है जिसकी condition true हो — फिर बाकी सब छोड़ देता है. यह "पहला match जीतता" व्यवहार समझना अहम है: ध्यान दीजिए marks 85 >= 75 पास करता है, तो Grade B चलता है और >= 33 कभी जांचा ही नहीं जाता. अपनी conditions सबसे specific/ऊंची से कम की ओर order कीजिए, वरना गलत नतीजे मिलेंगे (अगर >= 33 पहले आता, सबको Grade C मिलता!). आखिरी else बचा हुआ सब पकड़ता है.

Nested if — if के अंदर if

let age = 20, hasTicket = true;

if (age >= 18) {
    if (hasTicket) {
        console.log("Welcome in!");
    } else {
        console.log("Please buy a ticket");
    }
} else {
    console.log("Adults only");
}

// Aksar && ke saath zyada saaf:
if (age >= 18 && hasTicket) { console.log("Welcome in!"); }

आप एक if को दूसरे if के अंदर रख सकते हैं दूसरी condition सिर्फ तब जांचने को जब पहली पास हो. यह चलता है, पर गहरा nesting जल्दी पढ़ने में मुश्किल हो जाता है — code और दाएं खिसकता है और logic उलझता है. अक्सर आप nested if को logical && operator से समतल कर सकते हैं, जो कहीं साफ पढ़ता है. Thumb rule: अगर दो स्तर से ज़्यादा nest कर रहे हैं, &&, ||, या अपवाद मामलों को जल्दी संभालकर सरल करने का रास्ता खोजिए.

Ternary Operator — एक-line if/else

let age = 20;

// Lamba tarika:
let status;
if (age >= 18) { status = "Adult"; } else { status = "Minor"; }

// Ternary tarika (vahi nateeja, ek line):
let status2 = age >= 18 ? "Adult" : "Minor";
//            condition  ? if-true : if-false

Ternary operator संक्षिप्त if/else है जो VALUE लौटाता है. इसका आकार condition ? valueIfTrue : valueIfFalse है — ? को "तो" और : को "वरना" पढ़िए. यह सरल या-या assignments के लिए perfect है, जैसे label, colour, या message चुनना. Logic छोटा और साफ हो तब use कीजिए; अगर आपके ternary को nested ternaries चाहिए, readability के लिए वापस proper if/else पर जाइए. आप असली JavaScript में ternaries लगातार देखेंगे, खासकर template literals के अंदर: `${isLoggedIn ? "Logout" : "Login"}`.

Exam Corner

Q: if block कब चलता है? सिर्फ जब उसकी condition true evaluate हो.

Q: else if chain में कौन-सा block चलता है? पहला जिसकी condition true हो — बाकी छूट जाते हैं.

Q: else if chains में condition का order क्यों मायने रखता है? क्योंकि पहली true condition जीतती है; पहले रखी व्यापक condition सब कुछ पकड़ लेगी.

Q: Ternary syntax लिखिए. condition ? valueIfTrue : valueIfFalse

Q: Nested if अक्सर कैसे टाल सकते हैं? Conditions को && operator से मिलाकर.

← Back to JavaScript Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.