JavaScript #13 — Conditional If/Else
These JavaScript articles are written for people who are interested in coding and are meant to provide an introduction to the programming world.
You are going to learn how to use another fundamental building block in programming, called conditional statements (a.k.a if/else branches).
Conditional (if/else) Statements
The if/else statement executes a block of code if a specified condition is true. If the condition is false, another block of code can be executed. The if/else statement is a part of JavaScript’s “Conditional” Statements, which are used to perform different actions based on different conditions.
— W3Schools
Syntax
There are three ways to define if/else branches.
“If” or nothing
If the value of the condition is true, the code inside of {} is executed.
If the value of the condition is false, the code inside of {} is skipped.
if (condition) {
}Try out this example to experiment and learn how the single if works. If you provide “yes” (lowercased, not “Yes” nor “YES”), then the condition will be evaluated as true and the code inside {} is going to be executed.
<script>
let input = prompt(`Say "yes" or "no"`) if (input === "yes") {
console.log("Oh yeah!")
}
</script>
“If” or “else”
If the value of condition is true, the code inside of {} that is following the if (condition) code is executed.
If the condition if false , the code inside of else {} is executed.
if (condition) {
} else {
}Try out this example to experiment and learn how the if and else works together. If the input is equal to “yes”, then it prints out “Oh yeah!”. Else, it prints out “Oh no!”.
<script>
let input = prompt(`Say "yes" or "no"`) if (input === "yes") {
console.log("Oh yeah!")
} else {
console.log("Oh no!")
}
</script>
“If” or “else if” or “else”
If the value of condition1 is true, the code inside of {} that is following the if (condition1) code is executed.
If the value of condition2 is true, the code inside of {} that is following the if (condition2) code is executed.
If both values condition1 and condition2 are false, the code inside of else {} is executed.
if (condition1) {
} else if (condition2) {
} else {
}Try out this example to experiment and learn how the if, if-else and else works together.
<script>
let input = prompt(`Say "yes" or "no"`) if (input === "yes") {
console.log("Oh yeah!")
} else if (input === "no") {
console.log("Oh no!")
} else {
console.log("Oh, you said something else...")
}
</script>
Coding example
To demonstrate how if/else conditional statements work, let’s define an example and implement it.
First, we need to decide what do we want to solve. Often, the definition of what we want to do is called the requirements. It is the job of a programmer (and other people on the project, in case it is a bigger task) to figure out what code needs to be written to fulfill the requirements.
Requirements
The following are the requirements for the coding example that is going to help with the understanding of if/else logic.
- Ask the person for age.
- If the age is below 10, respond with “You are too young to play this game”.
- If the age is above or equal to 10, respond with “Play this game”
Implementation
The word “implementation” is often used as the term to reflect the fact of programming or coding a requirement. Implementing is making the requirements real in form of code.
First, we need to ask the user for the age and convert that age from string to a number. Then, based on the age, we need to provide two kinds of responses:
- If younger than 10 years, then display “You are too young to play this game”
- If equal to 10 years or older, then display “Welcome to role playing game!”
The grammar for if/else is the following: the keyword if is followed by pair of ( and ) that contains an expression that results in one of the two values: true or false. If the result is true, the code inside { ... } is executed. If false, then the code inside of else { ... } is executed.
<script>
let age = prompt("What is your age?")
let ageAsNumber = Number(age) if (ageAsNumber < 10) {
console.log("You are too young to play this game")
} else {
console.log("Welcome to role playing game!")
}
</script>
Once the code is running, add another question that is going to ask the user for his name. If the provided name is not an empty string, welcome the new player using his name. Else, reject the user with a message saying the name needs to be provided.
Final words
Now you are starting to understand how to build logic in code. It would be good to try to combine what has been explained in JavaScript #12 — Boolean with this article. All the types of comparison will become useful very soon. But don’t worry, there will be enough time to practice comparisons and if/else statements in the next articles.
