Home » JavaScript

If and Else statement in JavaScript (Vanilla)

Learn: Condition based programming | If and Else Statements | Decision making | Nested if-else in JavaScript.
Submitted by Himanshu Bhatt, on July 17, 2018

The if statement

Generally if statements have the following syntax:

if(condition){
	Our code;
}

The condition, here can be anything from the mathematical expression, Boolean, relation operations etc.

In any case, the final value of any condition will either true or false. Once condition become true "Our code" will run that is in if block.

Example 1

//condition: is 2 is less than 3? Yes so, condition = true
if(2 < 3) 
{
	console.log("I am in if");
}

Output

    I am in if

Example 2

//400 is greater than 20 thus, condition = true
if(400 > 20)  
{
	console.log("I am again in if block");
}

Output

    I am again in if block

Example 3

if(4-5+1 ==0) 
{
	console.log("Hey there I am back in if block");
}

Output

    Hey there I am back in if block

Note: We used == in condition instead of = because = is an assignment operator where as == is comparison operator is compares both operands and if they are equal then condition = true. Also != is a comparison operator which returns true if operands are not equal.

The if else Statement

But, what if condition will be false then if block will not execute the code within its blocks, so how can we deal with it? Then we can use else statement,

if(false)
{
	console.log("I am in if block");
} 
else
{
	console.log("I am  in ELSE block");
}

Output

    I am in ELSE block

Now, thing to keep in mind here is when if condition will be false then only else block will execute, and when if block will execute else block will not execute.

When we need to check multiple conditions we can use multiple if statements,

Example

let number = 12
if(number<20){
	console.log("condition 1 is true");
}
if(number>20){
	console.log("condition 2 is true");
}
if(number==12){
	console.log("condition 3 is true");
}

Output

    condition 1 is true
    condition 3 is true

Alternatively, above code can be written using logical operators,

Logical operators:

&& (AND) and || (OR) are two logical operators which allow us to use multiple conditions using single if statement.

With && (AND) it will be true when all conditions will true while in case of || (OR) it will be true even when any condition will be true out of all conditions.

Example:

let num= 5

if(num<6 && num>2){
	console.log("This will work");
}	
if(num<7 || num ==2){
	console.log("This will also work");
}

Here, both block will execute

Nested if-else Statement

Using nested if-else we can use check several cases, let us demonstrate nested if-else with following example:

We generally use JS in Web application Development where we need to make decisions as per the situation. For example, let a user visits IncludeHelp website and that user want to comment on a discussion forum, but only registered user can comment on the forum, so How can we achieve this? Well, nested If and else can be use here.

Example

var aboutVisitor = 'abc';

if (aboutVisitor == 'user'){
	console.log("Comments Enable");
} else if (aboutVisitor == 'guest'){
	console.log("Comments Disable, view-only");
} else {
	console.log("Please Verify");
}

JavaScript Tutorial »

---