{"id":"l-js-2-1","courseId":"javascript-fundamentals","lang":"en","kind":"lesson","summary":"Make your program choose between paths with if, else if and else, combine conditions with &&, || and !, pick values with the ternary operator, and predict which values count as truthy or falsy.","html":"

Pocket can add up what you spent. Now it should tell you how you are doing: fine, getting close to your budget, or over it. That means running different code depending on the data, which is what conditions are for.

\n

if, else if, else

\n

An if statement runs a block of code only when its condition is true:

\n
JavaScript
const budgetCents = 2000;\nconst spentCents = 1750;\n\nif (spentCents > budgetCents) {\n  console.log(\"Over budget\");\n} else if (spentCents >= budgetCents * 0.8) {\n  console.log(\"Close to your budget\");\n} else {\n  console.log(\"On track\");\n}
\n

The engine evaluates the first condition, 1750 > 2000, gets false, and moves on. The second, 1750 >= 1600, is true, so that block runs, and the rest of the chain is skipped. The else block runs only when every condition above it was false. At most one block in a chain ever runs.

\n
\n Flow of the budget check: first test spent greater than budget; if yes print Over budget. If no, test spent at least 80 percent of budget; if yes print Close. If no, print On track.\n \n spent > budget?\n \n spent ≥ 80%?\n \n \"On track\"\n \n \"Over budget\"\n \n \"Close\"\n \n true: stop\n \n true: stop\n \n false\n \n false\n
An if chain stops at the first true condition
\n

Because the first true condition wins, order matters. Put the narrowest case first. If you checked “at least 80%” before “over budget”, an over-budget month would also be at least 80%, and you would never see the “Over budget” message. The quiz below has exactly that bug.

\n

The curly braces mark a block, a group of statements that run together. For a one-line body the braces are technically optional, but always write them: adding a second line later without braces is a classic bug where only the first line is conditional.

\n

Combining conditions

\n

Three logical operators let you build bigger conditions:

\n\n
JavaScript
const amountCents = 12500;\nconst category = \"travel\";\nconst isWeekend = false;\n\nif (amountCents > 10000 && category !== \"rent\") {\n  console.log(\"Big purchase: ask yourself twice\");\n}\nif (category === \"food\" || category === \"travel\") {\n  console.log(\"Flexible spending\");\n}\nif (!isWeekend) {\n  console.log(\"Weekday\");\n}
\n

&& is evaluated before ||, just as * is before +. When you mix them, add parentheses so nobody, including future you, has to remember that.

\n

One value, many fixed options: switch

\n

When you compare a single value against a list of exact options, such as a category, a chain of else if (category === …) gets repetitive. The switch statement is built for that case:

\n
JavaScript
const category = \"travel\";\nlet monthlyLimit;\n\nswitch (category) {\n  case \"food\":\n    monthlyLimit = 40000;\n    break;\n  case \"travel\":\n  case \"fun\":\n    monthlyLimit = 15000;\n    break;\n  default:\n    monthlyLimit = 10000;\n}\nconsole.log(monthlyLimit);
\n

switch compares with ===, jumps to the first matching case, and runs from there until it reaches a break. Forget a break and execution “falls through” into the next case, which is a frequent bug. Sometimes it is deliberate, as with "travel" and "fun" sharing one limit above. default runs when nothing matches, like a final else. For two or three conditions, or anything that is not a simple equality check, stay with if.

\n

The ternary: choosing a value

\n

Often you do not want to do different things, you want to pick between two values. The conditional operator, usually called the ternary, does that in one expression:

\n
JavaScript
const spent = 2100;\nconst budget = 2000;\nconst status = spent > budget ? \"Over budget\" : \"On track\";\nconsole.log(status);
\n

Read it as “if spent > budget, then "Over budget", otherwise "On track"”. Because the ternary produces a value, you can store it in a const or drop it into a template literal. Use it for two outcomes. For three or more, an if chain reads better than nested ternaries.

\n

Truthy and falsy

\n

A condition does not have to be a boolean. JavaScript accepts any value and converts it: values that count as true are truthy, values that count as false are falsy. The falsy list is short enough to memorise:

\n

false, 0, -0, 0n, "" (empty string), null, undefined, NaN.

\n

Everything else is truthy, including some that surprise people: "0", "false", " " (a space), and empty lists and objects.

\n
JavaScript
const note = \"\";\nif (note) {\n  console.log(\"Has a note\");\n} else {\n  console.log(\"No note\");\n}\nconsole.log(Boolean(\"0\"), Boolean(0), Boolean(\" \"));
\n

Truthiness makes checks like if (note) short and readable for strings, where “empty” and “missing” both mean “nothing to show”. It is risky for numbers, where 0 is often a real, valid value.

\n\n

&& and || also work with non-boolean values: they return one of their operands. name || "Anonymous" gives name if it is truthy and "Anonymous" otherwise, which is a common way to supply defaults. It has the same zero problem, which is why JavaScript added a better operator for defaults, ??, coming up in section 3.

\n\n

Conditions let Pocket react to one value. Next you will make it handle many values, one after another, with loops.

\n","toc":[{"id":"sec-1","text":"if, else if, else","level":2},{"id":"sec-2","text":"Combining conditions","level":2},{"id":"sec-3","text":"One value, many fixed options: switch","level":2},{"id":"sec-4","text":"The ternary: choosing a value","level":2},{"id":"sec-5","text":"Truthy and falsy","level":2}],"takeaways":["An if chain checks conditions top to bottom and runs only the first block whose condition is true, so put the most specific case first.","&& needs both sides true, || needs at least one, and ! flips a boolean.","[object Object]","Only eight values are falsy (false, 0, -0, 0n, "", null, undefined, NaN); everything else, including "0" and [], is truthy."],"further":[{"title":"if...else (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else"},{"title":"Truthy (MDN glossary)","url":"https://developer.mozilla.org/en-US/docs/Glossary/Truthy"},{"title":"Conditional (ternary) operator (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator"}],"quiz":[{"q":"

With spent = 2100 and budget = 2000, what does this log?

\n
JavaScript
if (spent > budget * 0.8) {\n  console.log(\"close\");\n} else if (spent > budget) {\n  console.log(\"over\");\n} else {\n  console.log(\"ok\");\n}
\n","options":[{"text":"over","why":"The chain stops at the first true condition. 2100 is more than 1600, so the first block runs and the else if is never checked."},{"text":"close","why":"Correct, and it is a bug. The broader condition comes first and swallows the over-budget case. Check spent > budget first."},{"text":"close and then over","why":"An if/else if chain runs at most one block. Only separate if statements could both run."},{"text":"ok","why":"else runs only when every condition above it is false, and the first one is true here."}],"answer":1},{"q":"

Which of these values is truthy?

","options":[{"text":""" (an empty string)","why":"The empty string is one of the eight falsy values."},{"text":"0","why":"Zero is falsy, which is exactly why if (amount) misbehaves for a real amount of 0."},{"text":""0" (a string containing zero)","why":"Correct. Any non-empty string is truthy, even "0" and "false"."},{"text":"NaN","why":"NaN is falsy, along with false, 0, -0, 0n, "", null and undefined."}],"answer":2},{"q":"

A user can set a daily limit, and 0 is a valid choice meaning “no spending today”. What does const limit = userLimit || 5000; do when userLimit is 0?

","options":[{"text":"It keeps 0, because 0 is a number.","why":"|| does not check types; it checks truthiness, and 0 is falsy."},{"text":"It throws, because || only works with booleans.","why":"|| works with any values and returns one of them, not necessarily a boolean."},{"text":"It sets limit to 5000, silently ignoring the user’s choice.","why":"Correct. || falls back whenever the left side is falsy, and 0 is falsy. The ?? operator, covered in section 3, falls back only for null and undefined."}],"answer":2},{"q":"

Which line best uses the ternary operator?

","options":[{"text":"const label = isOver ? "Over budget" : "On track";","why":"Correct. The ternary picks one of two values and the result is stored. That is exactly what it is for."},{"text":"isOver ? sendAlert() : logQuietly();","why":"This works, but it uses a value-picking operator to choose between actions. An if/else states that intent more clearly."},{"text":"const label = a ? b ? "x" : "y" : c ? "z" : "w";","why":"Nested ternaries are legal but hard to read. Use an if/else if chain once there are more than two outcomes."}],"answer":0}],"exercise":{"kind":"web","mode":"js","starter":{"js":"// The function wrapper is written for you (functions get their own lesson soon).\n// spentCents and budgetCents arrive as numbers. Use if / else if / else\n// and `return` the status string.\nfunction budgetStatus(spentCents, budgetCents) {\n return \"ok\";\n}\n\n// Use a ternary to pick the label for one value\nfunction amountLabel(amountCents) {\n return \"\";\n}\n\nconsole.log(budgetStatus(1750, 2000));\nconsole.log(amountLabel(12500));\n"},"solution":{"js":"function budgetStatus(spentCents, budgetCents) {\n if (spentCents > budgetCents) {\n return \"over\";\n } else if (spentCents >= budgetCents * 0.8) {\n return \"close\";\n } else {\n return \"ok\";\n }\n}\n\nfunction amountLabel(amountCents) {\n return amountCents >= 10000 ? \"big\" : \"small\";\n}\n\nconsole.log(budgetStatus(1750, 2000));\nconsole.log(amountLabel(12500));\n"},"checks":[{"id":"over","test":"return budgetStatus(2001, 2000) === 'over' && budgetStatus(5000, 2000) === 'over';\n"},{"id":"close","test":"return budgetStatus(1600, 2000) === 'close' && budgetStatus(2000, 2000) === 'close' && budgetStatus(1750, 2000) === 'close';\n"},{"id":"ok","test":"return budgetStatus(1599, 2000) === 'ok' && budgetStatus(0, 2000) === 'ok';\n"},{"id":"label","test":"return amountLabel(12500) === 'big' && amountLabel(10000) === 'big' && amountLabel(9999) === 'small' && amountLabel(0) === 'small';\n"}],"title":"Is Pocket on budget?","prompt":"

Fill in budgetStatus(spentCents, budgetCents) so it returns "over" when spending is more than the budget, "close" when it is at least 80% of the budget (but not over), and "ok" otherwise. Spending exactly the budget counts as "close", not over.

\n

Then fill in amountLabel(amountCents) with a ternary: return "big" for 10000 cents ($100) or more, and "small" otherwise. Writing return followed by a value hands that value back to whoever called the function.

\n","hints":["Check the narrowest case first. Over budget is also “at least 80%”, so test spentCents > budgetCents before the 80% check.","80% of the budget is budgetCents * 0.8. Use >= so that exactly 80% counts as close.","The ternary reads condition ? valueIfTrue : valueIfFalse, so: return amountCents >= 10000 ? "big" : "small";."],"explanation":"

The chain checks spentCents > budgetCents first because it is the narrowest condition: every over-budget amount is also at least 80% of the budget, so checking the 80% rule first would label overspending as merely “close”. Using > for “over” and >= for “close” makes the boundaries exact: 2000 of 2000 is close, 2001 is over, and 1600 (exactly 80%) is close. The ternary in amountLabel picks one of two values and returns it directly, which is the job it was designed for.

\n","checkLabels":{"over":"Returns “over” when spending is more than the budget","close":"Returns “close” from 80% up to and including the budget","ok":"Returns “ok” below 80%","label":"amountLabel returns “big” from 10000 cents and “small” below"}},"words":720,"readMinutes":3}