Empowering you to understand your world

JavaScript Basics: Understanding Conditional Statements

If you’re writing programs in JavaScript, conditional statements may be your next best friend. They enable you to control the flow of your programs using conditions, so you can make them more useful with few lines of extra code. There are various types of conditional statements in JavaScript, including ‘if’ statements and ‘switch’ statements.

If statements tell the computer to make decisions based on a condition the programmer specifies. This article focuses on if statements, including ‘else if’ and ‘else’.

The syntax of a JavaScript if statement is:

if (yourcondition == true) {
  //What you type between these curly brackets (this is the block of code mentioned above) will be executed if 'yourcondition' is true.
} 

To put our conditional statement to the test, let us do a basic numerical comparison and print a string, while introducing ‘else’ statements.

var mynumber = 20;
if (mynumber == 20) {
  document.write("The variable mynumber is equal to 20.");
} else {
  document.write("The variable mynumber is not equal to 20.");
}

The ‘Else’ statement means exactly what you think it does. The conditional statement above instructs the browser to check if mynumber is equal to 20. If it is, the browser will print the first line mentioned to the screen: ‘The variable mynumber is equal to 20.’, otherwise (else, see what I did there?) it will print ‘The variable mynumber is not equal to 20.’.

If you need to check multiple conditions, you can use either an ‘else if’ statement at the end of your if statement’s bracket, or use the OR operator, which is ||.

Bear in mind that you can use another if statement instead of else if, but the else if statement won’t execute unless the first if statement returns a false value. Else translates to: otherwise. If you use a second if statement without the else, it will be executed whether you like it or not, regardless of whether the condition of the first if statement is met. This is not always desireable.

var mynumber = 20;
if (mynumber < 500) {
  document.write("The number is less than 500.");
} else if (mynumber >= 500) {
  document.write("The number is greater than 500.");
} else {
  /*This block of code won't be executed, as all numbers are either greater than, equal to, or less than 500. */  
  document.write("Please enter a number.");
}

How To Use Booleans In Your JavaScript If Statements

The boolean is a data type that has only two values: true or false. You can use booleans to make your if statements more English-like. You can incorporate them into your conditional statements’ parenthesis as shown below.

var theskyisblue = true;
if (theskyisblue) {
  //This means that the sky is blue, therefore, the code in this block will be executed.
  document.write("Yes, the sky is blue!");
}

An alternative way to write it is:

var theskyisblue = true;
if (theskyisblue == true) {
  //This means that the sky is blue, therefore, the code in this block will be executed.
  document.write("Yes, the sky is blue!");
}

If I set the value of ‘theskyisblue’ to false, the code in that block would not be executed.

Finally, if you want to execute a block of code only if the condition is not true, you can simply place an exclamation sign at the beginning of your conditional statement as shown below.

var theskyisorange = false;
if (!theskyisorange) {
  //!theskyisorange means: If the sky is not orange, execute the following code.
  document.write("No, the sky is not orange!");
}

If you want to avoid ‘else if’ statements and use the ‘OR’ operator, just use || as shown below. || means ‘or’.

var myvariable = 2;
if (myvariable == 1 || myvariable == 2 || myvariable == 3) {
  //This code block will be executed if one or more of the conditions above are true.
  document.write("The number is less than 3.");
}
Subscribe to our newsletter
Get notified when new content is published