JavaScript for Kids: Conditionals if and switch

We continue our tutorial with conditions and loops. I hope you learned something in our beginners tutorial about variables and math operations.

Let's start!

1. Conditionals: "if"

Imagine you're deciding whether to wear a coat

let isRainy = true;

if (isRainy) {
  alert("It's raining! Don't forget your coat!");
} else {
  alert("No rain today. You don't need a coat.");
}

A pop-up box will appear with "It's raining! Don't forget your coat!" message. Notice that "if" was in small letters followed by (isRainy) and the code we want to be run is inside curly braces "{}".

Here's why:

let isRainy = true;

In the above code, we set "isRainy" variable to "true". This variable is now called a boolean variable. It only accepts "true" or "false" value.

if (isRainy) {
  alert("It's raining! Don't forget your coat!");
} else {
  alert("No rain today. You don't need a coat.");
}

With "isRainy" equals "true", the first condition will be selected. If we set it to "false" then the second condition will be selected in that case "else". Think of it like simple english.

"I will buy you ice cream if you behave or else I will not buy you ice cream."

We can write it in code as:

let isBehave = true;
if(isBehave){
	alert("I will buy you ice cream");
}else{
	alert("I will not buy you ice cream");
}

A pop-up box will show "I will buy you ice cream".

A boolean variable is like an on/off switch. It can only have two possible values: true or false.

2 Conditionals: "switch-case"

let day = "Wednesday";

switch (day) {
  case "Monday":
    alert("It's the start of the school week!");
    break;
  case "Tuesday":
    alert("Time for art class!");
    break;
  case "Wednesday":
    alert("Halfway through the week - we have music today!");
    break;
  case "Thursday":
    alert("PE day - don't forget your sneakers!");
    break;
  case "Friday":
    alert("Last day of school for the week!");
    break;
  case "Saturday":
  case "Sunday":
    alert("Weekend! Time to play!");
    break;
  default:
    alert("Hmm, I'm not sure what day it is.");
}

This switch statement checks the value of the day variable and runs different code depending on what day it is. The break statement tells JavaScript to stop checking other cases once it finds a match.

Notice how Saturday and Sunday share the same code - we can do this by listing cases one after another without a break.

The default case at the end runs if none of the other cases match, kind of like an "else" in an if-else statement.

A pop-box will appear with a message "Halfway through the week - we have music today!"

Here's what happened:

let day = "Wednesday";

We assigned a string "Wednesday" to the "day" variable.

switch (day) {
  case "Monday":

In the above code, switch(day) is searching the cases that matches the "day" value which is "Wednesday". It will check it one by one and stop when the match is found and run the code after the colon (:) and stop because of the "break" statement.

case "Wednesday":
    alert("Halfway through the week - we have music today!");
    break;

So the code above will be the one that will be run because of 'case "Wednesday"' statement.

Imagine you have a special toy vending machine. This machine has different colored buttons, and each color gives you a different toy.

Getting back to our code, if we did not assign a value to the "day" variable, the last case will be run. The message will be "Hmm, I'm not sure what day it is." in a pop-up box will be shown.

Homework:

Superhero Power Selector

Your task:

1. Choose a superpower for your hero

2. Use if statements and a switch to describe what your hero can do.

3. If the superhero was not assigned a power then show a message saying "Hmm, I don't know my power yet."

Write your answers in the comments and don't forget to share!