Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 2 · 3 / 12Making decisions with if
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Making decisions with if
01 / 09Overview

Making decisions with if

You'll learn to make code choose what to do with if, else if and else.

Why it mattersEvery app makes choices, like showing "Login" or "Logout", or a warning when the balance is low.
about 75 min·needs: Values and variables, Strings and numbers
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Conditional branching: if, '?'javascript.info · 10 min · English
MMamun's noteRead up to and including "Several conditions, else if". The ? operator after that comes later. Skip it for now.
Video
Modern JavaScript Tutorial #3: Control flowYouTube · Net Ninja · 22 min · English
MMamun's noteWatch 17:32–39:05, on if, else, and the logical operators && || !. Stop when switch starts.
VideoOptional
JavaScript == vs ===YouTube · Web Dev Simplified · 4 min · English
MMamun's noteFour minutes on why you should always use three equals signs.
VideoOptional
JavaScript Bangla tutorial #34: conditionsYouTube · Learn with Sumit · 17 min · Bangla
MMamun's noteIn Bangla. Covers if and else, then switch. The switch part is extra; you can stop before it.
03 / 09

Explanation

You want your code to do different things in different cases. If the balance is too low, show a warning. Otherwise, let the payment go through.

A question with a yes or no answer is called a condition. It gives true or false. if runs its block only when the condition is true:

const marks = 72;
if (marks >= 80) {
  console.log("A+");
} else if (marks >= 70) {
  console.log("A");
} else {
  console.log("Keep going");
}

JavaScript checks the conditions from top to bottom and runs only the first one that is true. Here 72 >= 80 is false, 72 >= 70 is true, so it prints A and skips the rest. else catches everything left over.

To compare, use >, <, >=, <=, === (equal) and !== (not equal). Always use three equals signs. == tries to convert types first, so 5 == "5" is true. 5 === "5" is false, which is usually what you mean.

To join conditions, use && (and: both must be true), || (or: at least one is true), and ! (not: flips true and false). marks >= 33 && attended is true only when both parts are true.

if also accepts values that are not true or false. A few count as false: 0, "" (empty text), null, undefined and NaN. Everything else counts as true. So if (name) means "if name is not empty".

People often put the conditions in the wrong order. If you check marks >= 70 before marks >= 80, a 95 stops at the first one and never gets an A+. Put the strictest check first.

When you read an if chain, pick a value and walk down it. Stop at the first condition that is true.

Words to recognise
ifelseelse ifcondition===!==>=&&||!boolean
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const marks = 72;
2const attended = true;
3
if (marks >= 80) {
Mentor note · line 4
The first question. 72 >= 80 is false, so this block is skipped.
5 console.log("A+");
} else if (marks >= 70) {
7 console.log("A");
} else {
9 console.log("Keep going");
10}
11
if (marks >= 33 && attended) {
13 console.log("You passed");
14}
15
console.log(5 == "5", 5 === "5"); // true false
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const balance = 300;
2if (balance > 500) {
3  console.log("Buy the AC seat");
4} else if (balance > 200) {
5  console.log("Buy the normal seat");
6} else {
7  console.log("Save more first");
8}
What does this print?
DrillFind the bug2 / 2
grade should give "A+" for 80 and above, "A" for 70 to 79, "Pass" for 33 to 69, and "Fail" below 33. The first and last lines wrap the code so we can test many marks; you'll learn about functions soon. Fix only the if chain.
1
2
3
4
5
6
7
8
9
10
11
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is 5 === "5"?
  2. 2 / 3With const balance = 300; const pinOk = false;, what is balance > 100 && pinOk?
  3. 3 / 3With const marks = 90;, which line prints? if (marks >= 33) { console.log("Pass") } else if (marks >= 80) { console.log("A+") }
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Making decisions with if?

09 / 09

Done

You can now
Read an if / else if chain and say which branch runs for a given value.
Next: Loops Back to Phase 2
On this page
  1. 01Making decisions with if
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 2JavaScript core
12 topics · 4–6 wks
  1. 1Values and variables
  2. 2Strings and numbers
  3. 3Making decisions with if
  4. 4Loops
  5. 5Functions in, values out
  6. 6Arrays
  7. 7Objects
  8. 8Arrays and map
  9. 9filter and find
  10. 10reduceoptional
  11. 11Scope
  12. 12Reading error messages
JourneyPhase 2Making decisions with if
01 / 09Overview

Making decisions with if

You'll learn to make code choose what to do with if, else if and else.

Why it mattersEvery app makes choices, like showing "Login" or "Logout", or a warning when the balance is low.
about 75 min·needs: Values and variables, Strings and numbers
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Article
Conditional branching: if, '?'javascript.info · 10 min · English
MMamun's noteRead up to and including "Several conditions, else if". The ? operator after that comes later. Skip it for now.
Video
Modern JavaScript Tutorial #3: Control flowYouTube · Net Ninja · 22 min · English
MMamun's noteWatch 17:32–39:05, on if, else, and the logical operators && || !. Stop when switch starts.
VideoOptional
JavaScript == vs ===YouTube · Web Dev Simplified · 4 min · English
MMamun's noteFour minutes on why you should always use three equals signs.
VideoOptional
JavaScript Bangla tutorial #34: conditionsYouTube · Learn with Sumit · 17 min · Bangla
MMamun's noteIn Bangla. Covers if and else, then switch. The switch part is extra; you can stop before it.
03 / 09

Explanation

You want your code to do different things in different cases. If the balance is too low, show a warning. Otherwise, let the payment go through.

A question with a yes or no answer is called a condition. It gives true or false. if runs its block only when the condition is true:

const marks = 72;
if (marks >= 80) {
  console.log("A+");
} else if (marks >= 70) {
  console.log("A");
} else {
  console.log("Keep going");
}

JavaScript checks the conditions from top to bottom and runs only the first one that is true. Here 72 >= 80 is false, 72 >= 70 is true, so it prints A and skips the rest. else catches everything left over.

To compare, use >, <, >=, <=, === (equal) and !== (not equal). Always use three equals signs. == tries to convert types first, so 5 == "5" is true. 5 === "5" is false, which is usually what you mean.

To join conditions, use && (and: both must be true), || (or: at least one is true), and ! (not: flips true and false). marks >= 33 && attended is true only when both parts are true.

if also accepts values that are not true or false. A few count as false: 0, "" (empty text), null, undefined and NaN. Everything else counts as true. So if (name) means "if name is not empty".

People often put the conditions in the wrong order. If you check marks >= 70 before marks >= 80, a 95 stops at the first one and never gets an A+. Put the strictest check first.

When you read an if chain, pick a value and walk down it. Stop at the first condition that is true.

Words to recognise
ifelseelse ifcondition===!==>=&&||!boolean
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

script.js5 notes
1const marks = 72;
2const attended = true;
3
if (marks >= 80) {
Mentor note · line 4
The first question. 72 >= 80 is false, so this block is skipped.
5 console.log("A+");
} else if (marks >= 70) {
7 console.log("A");
} else {
9 console.log("Keep going");
10}
11
if (marks >= 33 && attended) {
13 console.log("You passed");
14}
15
console.log(5 == "5", 5 === "5"); // true false
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 2
1const balance = 300;
2if (balance > 500) {
3  console.log("Buy the AC seat");
4} else if (balance > 200) {
5  console.log("Buy the normal seat");
6} else {
7  console.log("Save more first");
8}
What does this print?
DrillFind the bug2 / 2
grade should give "A+" for 80 and above, "A" for 70 to 79, "Pass" for 33 to 69, and "Fail" below 33. The first and last lines wrap the code so we can test many marks; you'll learn about functions soon. Fix only the if chain.
1
2
3
4
5
6
7
8
9
10
11
Try 1 of 3 · solution unlocks after 3
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3What is 5 === "5"?
  2. 2 / 3With const balance = 300; const pinOk = false;, what is balance > 100 && pinOk?
  3. 3 / 3With const marks = 90;, which line prints? if (marks >= 33) { console.log("Pass") } else if (marks >= 80) { console.log("A+") }
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Making decisions with if?

09 / 09

Done

You can now
Read an if / else if chain and say which branch runs for a given value.
Next: Loops Back to Phase 2
On this page
  1. 01Making decisions with if
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want your code to do different things in different cases. If the balance is too low, show a warning. Otherwise, let the payment go through.

A question with a yes or no answer is called a condition. It gives true or false. if runs its block only when the condition is true:

const marks = 72;
if (marks >= 80) {
  console.log("A+");
} else if (marks >= 70) {
  console.log("A");
} else {
  console.log("Keep going");
}

JavaScript checks the conditions from top to bottom and runs only the first one that is true. Here 72 >= 80 is false, 72 >= 70 is true, so it prints A and skips the rest. else catches everything left over.

To compare, use >, <, >=, <=, === (equal) and !== (not equal). Always use three equals signs. == tries to convert types first, so 5 == "5" is true. 5 === "5" is false, which is usually what you mean.

To join conditions, use && (and: both must be true), || (or: at least one is true), and ! (not: flips true and false). marks >= 33 && attended is true only when both parts are true.

if also accepts values that are not true or false. A few count as false: 0, "" (empty text), null, undefined and NaN. Everything else counts as true. So if (name) means "if name is not empty".

People often put the conditions in the wrong order. If you check marks >= 70 before marks >= 80, a 95 stops at the first one and never gets an A+. Put the strictest check first.

When you read an if chain, pick a value and walk down it. Stop at the first condition that is true.

Words to recognise
ifelseelse ifcondition===!==>=&&||!boolean

You want your code to do different things in different cases. If the balance is too low, show a warning. Otherwise, let the payment go through.

A question with a yes or no answer is called a condition. It gives true or false. if runs its block only when the condition is true:

const marks = 72;
if (marks >= 80) {
  console.log("A+");
} else if (marks >= 70) {
  console.log("A");
} else {
  console.log("Keep going");
}

JavaScript checks the conditions from top to bottom and runs only the first one that is true. Here 72 >= 80 is false, 72 >= 70 is true, so it prints A and skips the rest. else catches everything left over.

To compare, use >, <, >=, <=, === (equal) and !== (not equal). Always use three equals signs. == tries to convert types first, so 5 == "5" is true. 5 === "5" is false, which is usually what you mean.

To join conditions, use && (and: both must be true), || (or: at least one is true), and ! (not: flips true and false). marks >= 33 && attended is true only when both parts are true.

if also accepts values that are not true or false. A few count as false: 0, "" (empty text), null, undefined and NaN. Everything else counts as true. So if (name) means "if name is not empty".

People often put the conditions in the wrong order. If you check marks >= 70 before marks >= 80, a 95 stops at the first one and never gets an A+. Put the strictest check first.

When you read an if chain, pick a value and walk down it. Stop at the first condition that is true.

Words to recognise
ifelseelse ifcondition===!==>=&&||!boolean