Condition: A premise upon which the fulfilment of something depends.
When I was younger, my Dad would reward me with books if I did well on a test or exam. But there was always a catch; the score had to be relatively high. So, the condition here was a high score on a test. if I scored 56, I'd have to wait a while to get those books on my list, but if I got around 86, I'd have way too much stuff to read over the weekend.
In JavaScript, we encounter a similar scenario when we need to program something to occur only after a condition has been fulfilled. In this post, I'll be talking about conditional statements and how to use them.
If my Dad had a program that decided whether I could get books or not, it would:
- ask me to enter my test score
- see if the number is > than 70
- tell me whether I get to go book shopping or not
The if statement
To make conditional statements in JavaScript, we use the "if statement". This tells the program to only do something if a condition has been satisfied.
In JavaScript, conditional statements follow this syntax:
if (condition) {
//Run this piece of code when the condition is true
}
The parentheses, (), are always around the conditions. The whole of the code itself is called an "if statement". Here, you're telling the program to execute the code in the curly braces, if the condition in the parentheses are fulfilled.
So, my Dad's program would look something like:
const test_score = Number(prompt("Hey Debbie, what was your test score?"));
if (test_score > 70) {
console.log("Good job! You get to pick any book you want!");
alert("Good job! You get to pick any book you want!");
}
To see what this will look like on your browser, create a new index.html document with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>The Test Score Program</title>
</head>
<body>
<script>
const test_score = Number(prompt("Hey Debbie, what was your test score?"));
if (test_score > 70) {
console.log("Good job! You get to pick any book you want!");
alert("Good job! You get to pick any book you want!");
}
</script>
</body>
</html>
When you open this in the browser, you should see something like:
Here, the browser is asking my test score.
If I go ahead and type a number in the box like this:
I'll get an alert like the one in the image below, because the score, is indeed, greater than 70.
Conditions
In JavaScript, a condition is an expression that tells whether a value is true or false. These two values, "true" and "false" are called boolean values.
If the value in our if statement is true, then, the program will be executed, but if it is false, it will not be executed. Just like the way my Dad's program asks if my test score was > 70, boolean expressions in JavaScript often use "comparison operators". These operators compare the set value to the value you will input, and a longer list of the operators is below:
The else statement
What if my Dad wanted an alert to show up if my score was lower than 70, without writing yet another program?
This is where the "else statement" comes in. It is a way to have a piece of code execute or run instructions if a condition is not satisfied or false.
The syntax for an else statement, looks like this:
if (condition) {
// Run this piece of code when the condition is true
} else {
// But if the condition is false, run this one instead
}
To follow our analogy, if my Dad wanted to add a piece of code to run when my test score was lower than 70, that would look like:
const test_score = Number(prompt("Hey Debbie, what was your test score?"));
if (test_score > 70) {
console.log("Good job! You get to pick any book you want!");
alert("Good job! You get to pick any book you want!");
} else {
console.log("Oh, dear. That won't do.");
alert("Oh, dear. That won't do.");
}
If I go ahead and enter 69, in the prompt box, I'll then get something like this:
And once I click the OK button, the alert below will pop up:
So, this is essentially how the if/else statement works: if the first condition is true, do this; but if it is false, run the next piece of code in its stead.
Nesting Conditions
What if my Dad wanted to program a special alert that only came up if I scored 100%?
Well, that is where nesting will come in. This means that the program will check for its first condition, the second one, and finally show me a special message if I get a perfect score. It is simply a way to place condition after condition.
In JavaScript, the syntax for this looks something like this:
if (condition > a) {
// Run this piece of code when the condition is true
} else if (condition is < a) {
// Run this one instead
} else (condition = a) {
//Then run this one and leave the others be
}
}
If my Dad wanted to add this to his program, it would look like this:
const test_score = Number(prompt("Hey Debbie, what was your test score?"));
if ((test_score >= 70) && (test_score < 100)) {
alert("Good job! You get to pick any book you want!");
} else if (test_score < 70) {
alert("Oh, dear. That won't do.");
} else if(test_score === 100) {
alert("Fantastic! You also get a new toy!");
}
If I go ahead and type in 100, like this:
And when I click OK, I'll get the alert below:
If you noticed, I used two conditions in line 2, because I wanted that to be for any score greater than 70, but also, less than 100. This is how to add more logic/ multiple conditions to your statements.
Well, that is pretty much how to use conditional statements in JavaScript. I hope you found his post really helpful and if you have more questions or would like to see more JavaScript content, follow me on Twitter at @tbrmonster.