Make Decisions with JavaScript Conditionals

A conversion creates a new value in the type you request; it does not change the original value. For the quiz input, keep the original rawScore as the string "80", then create score as a number for later decision-making.

Use Number(...) when digits stored as text need to become a number. Use String(...) when a primitive value needs a text representation.

Here is the running quiz example. rawScore remains available as its original input, while score and scoreText hold newly converted values. Paste this into your local script.js to inspect the types in the console.

An empty string does not prove that a meaningful score was supplied. JavaScript converts both an empty string and a whitespace-only string to the number 0.

The Practice Quiz Feedback example accepts numeric strings without surrounding whitespace. The whitespace case below demonstrates JavaScript behavior, but normalizing whitespace is outside this example's input contract.

A numeric string that cannot be converted produces NaN (Not-a-Number), a special numeric value. The original input is still preserved: converting a value creates a new result; it does not change rawScore.

For quiz input, "eighty" is a string, while Number(rawScore) becomes NaN. Although typeof NaN is "number", NaN is not a usable quiz score. Therefore, typeof alone cannot tell you whether numeric conversion failed.

Use Number.isNaN() on the converted result. It returns true only when its argument is actually NaN; it does not convert a string before checking it.

A missing value and a failed conversion are different concerns. For example, null converts to 0, while undefined converts to NaN. Later, the decision will check the original input to identify missing values rather than treating every conversion result the same way.

Run this in script.js to see why the check must receive the converted value.

A comparison starts with the types of its operands. rawScore is the original string, while score is the deliberately converted number.

Strict equality (===) and strict inequality (!==) compare type and value without converting either side. Therefore, rawScore === 80 is false, but rawScore === "80" is true.

Coercive equality (==) and inequality (!=) may convert values first. They can produce a different result, so use them here only as a labeled contrast—not in decision code.

Compare the same value with strict and coercive equality.

Relational operators describe boundaries: > and < exclude the boundary; >= and <= include it. For example, a score of 80 meets score >= 80 but not score > 80.

Do not compare score strings as though they were numbers. When both operands are strings, JavaScript compares them lexicographically (character by character). Convert score input deliberately before making a numeric boundary comparison.

A failed conversion is also not a valid score. NaN is not strictly equal to itself, and ordered comparisons involving it are false. Use Number.isNaN(score) to detect that result rather than relying on a comparison.

A string comparison can produce a surprising ordering. Numeric conversion gives the intended score comparison.

Ordered comparisons do not identify a failed conversion.

Boolean(value) explicitly converts a value to either true or false. It does not change the original value.

This matters for quiz input: the original rawScore can be a string, while score is its numeric conversion. Their truthiness can differ even when they represent the same characters.

The original input is the string "0"; the converted score is the number 0. Run this in script.js.

A value is falsy when Boolean(value) produces false. Otherwise, it is truthy.

For this quiz example, truthiness is useful information, but it is not a general validity check. In particular, a score of zero is valid even though the number 0 is falsy.

Truthiness is different from strict equality with true.

One condition, two possible branches

An if statement evaluates a condition. When that condition is truthy, JavaScript runs the code inside the if braces. When it is falsy, the optional else braces run instead.

Only one branch runs for one evaluation. After that branch finishes, JavaScript continues with the statement after the conditional.

For quiz feedback, use an explicit comparison such as score >= 80. Avoid if (score): both 49 and 80 are truthy, but they need different feedback.

The original input remains a string, while score is the number used in the comparison. The >= operator includes the boundary: a score of 80 takes the first branch.

The last console.log(...) is outside both braced blocks. It runs after either branch, not just after the if branch.

Run this in your local script.js and inspect the browser console.

Logical operators combine conditions you already know from comparisons.

• && (AND) makes a combined condition truthy only when both conditions are truthy.
• || (OR) makes a combined condition truthy when at least one condition is truthy.
• ! (NOT) produces the Boolean opposite of a value’s truthiness.

Use parentheses to make a compound condition easy to read. They show that the two range comparisons belong together.

For a known numeric score, combine the submission state with an inclusive range check. This is grouping practice, not yet a complete missing-input or invalid-score check.

JavaScript evaluates && and || from left to right. This is short-circuit evaluation.

For &&, a falsy left operand already prevents the whole condition from being truthy, so JavaScript skips the right operand. For ||, a truthy left operand already makes the expression truthy, so JavaScript skips the right operand.

When used with values rather than only Boolean conditions, && and || return a selected operand. They do not always return true or false. In contrast, ! always returns a Boolean.

With the default submission state, inspect an AND result, an OR fallback, and NOT.

For an already-valid numeric score, an if / else if / else chain evaluates conditions from top to bottom. As soon as one condition is truthy, its branch runs and the rest of the chain is skipped.

Put the highest threshold first. A score of 80 meets both score >= 80 and score >= 50, so checking score >= 80 first gives it the more specific feedback.

This chain classifies a score that has already been established as valid.

Convert the score, but keep the original input. A conversion result alone cannot tell you whether a score was supplied.

For this quiz contract, missing input means the original rawScore is exactly "", null, or undefined. This matters because Number("") and Number(null) both produce 0, while Number(undefined) produces NaN.

A numeric string such as "0" is not missing: it converts to the valid number 0. Check missingness against rawScore, not against the converted score.

Create derived Boolean conditions before the branch chain. The missing condition uses strict comparisons on rawScore. The invalid condition applies only to the converted score and covers failed conversion and values outside the inclusive range from 0 through 100.

Derived conditions for the Practice Quiz Feedback example

Put the guards before the score-band branches. An else if chain uses the first matching branch:

1. Missing input gets the missing-input message.
2. Otherwise, a failed conversion or out-of-range number gets the invalid-score message.
3. Only then can a score reach its normal feedback band.

For rawScore = "0", neither guard matches, so zero continues to valid classification. For rawScore = "eighty", conversion produces NaN, so the invalid guard stops it from falling through to a normal band. undefined is both missing and converts to NaN, but the earlier missing branch wins.

A complete decision has a priority order. First, stop when the quiz has not been submitted. Next, separate missing input from an invalid converted score. Only then classify a valid score into one feedback band.

Because an if / else if / else chain executes its first matching branch, a later score-band condition cannot override an earlier guard condition.

Create these two files in the same local folder. The HTML file loads the script after the document is parsed.

In script.js, retain rawScore, explicitly convert it to score, and derive the two Boolean conditions before the conditional. With the default inputs, save both files, refresh index.html, and inspect the browser console.