Back to Top

Conditional statements (if)

For a program to work, it must be able to make a decision. How? The so-called conditional statements are needed, such as if

It is based on the fact that a given piece of code will be executed if a given condition occurs or if it is true.

Before you start: after clicking the following links with exercises and examples, select the index.js file (on the left) and press "Run" (above the code window) to generate the code.

Exercise 1

Code for exercise 1. The JavaScript file should display a paragraph with the text "I am working" inside. Nevertheless, nothing is displayed. Why? The variable ex1 is false, and we said that the if statement is executed when the condition given in parentheses is true, which means that it returns true.

Correct the code so that it works correctly.

Excercise 2

Sometimes it happens that in the case of not having fulfilled the condition we also want to trigger some action. Then what?

An else clause comes to the rescue. It works in such a way that if the if statement does not return true, the else part is performed. Its looks like this:

if (condition) {
// follow if the condition returns true
else {
// follow if the condition does not occur, or returns false

Try to correct the code from task 2 so that the code stored in else is executed.

Excercise 3

The conditions we give do not always have to be true or false. You can also save them as logical conditions (mathematical operations). Here's an example:

2 == 2 //true
5 > 3 //true
3 - 5 == 12 //false
5 < 5 //false

Remember that the equality sign is written as "==" because the single "=" sign is used to assign a value.

See the JavaScript code of exercise 3.

There is an expression there that determines whether it is time for food depending on the level of hunger (the variable hungerLevel). This variable will take a random value (in the range from 1 to 10). This means that each time you start the program, its value will be different.

Complete the code. Use logical operators to make the condition come true if the hunger level is lower than 5, and then the program will display the text "I will eat later". In the condition, use a variable instead of the numbers themselves.

Tip: If there is a number stored in the variable, we can use it the same way as numbers.

var variable = 3;
... // the rest of the code
if(variable < 10){} // returns true, because the variable stores the value 3, so 3<10

Excercise 4

And if we want to have more than two answers in response to a condition? We can write the if / else condition several times, but it would be very uncomfortable. In such case else if is used, which takes the condition in parentheses, just like the if statement, and is fulfilled only if the condition from if is not fulfilled. If there are multiple else if conditions, they are performed from top to bottom until one of them is fulfilled.

Look at the example
if(condition) { // If the condition is not fulfilled, the code will not be executed and the program will go further
// code to perform
else if(condition2) { // If the condition2 is not fulfilled, the code will not be executed and the program will go further
//code to perform
else if(condition3) { // If the condition3 is met, the code will be executed and the program will ignore the rest
//code to perform
else {
//code to perform

Look at code for exercise 4.

There is an if, which checks the given color of the traffic light and decides whether it is possible to go further. Fill it with a condition that will cause that when the variable color stores the value 'yellow', the text 'Watch out' will be displayed, and then change the value of the variable color to 'yellow' and check if everything works well. If you want to, you can test the if statement by entering different colors.

Tip: If there is a string in the variable's value, we can compare it with other strings in the same way as numbers.

var variable = "eggplant";
variable == "eggplant"; // returns true, because "eggplant" == "eggplant"