This tutorial gives a detailed explanation of conditional operators and statements in JavaScript. Conditional statements like IF, IF-ELSE and IF-ELSE IF-ELSE can be used to create branching in your program code.
JavaScript Conditional Statements
In previous tutorials, we checked out the basics of JavaScript and the various operators we can use to manipulate variables. In this article, I will elaborate more on conditional statements in JavaScript. Conditional statements are used to perform different actions, depending on which conditions are or aren’t met. Each time there is a Yes / No choice, the activity stream branches in two and which branch is chosen depends on whether the condition is met or not.
Here are the basic conditional statements used in JavaScript, along with examples.
IF statement:
Syntax:
if (condition) {This will be executed if condition is true}
Example:
var a=10;if(a==10){document.write(“a is 10”);}
This will print “a is 10” as the condition is true; a = 10.
IF - ELSE statement:
Syntax:
if (condition) {This will be executed if condition is true}
else {This will be executed if the condition is false}
Example:
var a=20;
if(a==10)
{
document.write(“a is 10”);
}
else
{
document.write(“a is not 10”)
}
This will print “a is not 10” as the condition is not true and a = 20.
IF - ELSE IF - ELSE statement:
Syntax:
if (condition) {This will be executed if condition is true}
else {This will be executed if the condition is false}
Example:
var a=20;
if(a==10)
{document.write(“a is 10”);
}
else if_(a==20)_
{
document.write(“a is 20”)
}
else
{
document.write(“a is not 10 or 20”)
}
This will print “a is 20” as the condition a==20 is true. If the value a would have been 30, “a is not 10 or 20” would have been printed. Thus, the IF - ELSE condition statements can be used to execute different code depending on which condition is true.
Specifying Conditions Using Comparison Operators:
To specify the conditions in the conditional statements, you need to use comparison operators. These operators can compare the values of variables and return a boolean value of true or false. Depending on whether the condition is true or false, a different set of statements are executed.
The main logical comparison operators are:
var a = 10;
var b = 20;
Equal to (==)
The expression (a==b) returns false.
Not Equal to (!=)
The expression (a!=b) returns true.
Greater than (>)
The expression (a>b) returns false.
Less than (<)
The expression (a<b) returns true.
Greater than or Equal to (>=)
The expression (a>=b) returns false.
Less than or Equal to (>)
The expression (a>=b) returns true.
- You can also club these expressions together using the logical AND (&&) and logical OR (||) operators.
(condition1 && condition2) returns true only if both the conditions 1 and 2 are true. On the other hand, (condition1 || condition2) returns true if either or both of them are true.
Example:
var a = 10;
var b = 20;
var c = 30;
(a>b && c>b) returns false as a>b is false while c>b is true.
(a>b || c>b) returns true as a>b is false but c>b is true.
This post is part of the series: JavaScript - Tutorials for Beginners
This collection contains several basic JavaScript tutorials for beginners. It explains fundamental concepts, such as operators, variables, loops, events, errors and conditional statements in JavaScript. It assumes no prior programming knowledge.
