JavaScript if, else & nested if statement

JavaScript if statements run a block of code only if an evaluation of a given condition results in true. If statements can be used with else clause, If else if clause and as nested if to control the flow of the program execution.

If statement

The JavaScript if statement executes a block of code if the evaluation of condition results in truthy.

Syntax

The if statement starts with a if followed by condition in parentheses. We place the statements (conditional code) that we want to execute, immediately after the condition and inside curly brackets.

The following flowchart shows how the if statement work.

If statement Example

In the following example, (a > 0) is our condition. Since the value of a is 1 this condition evaluates to true. Hence the statements in the Conditional code ( inside the { } ) is executed.

Similarly in the following example, since a < 0 evaluates to false, the if statement does not execute the conditional code.

We can make use of logical operators like AND (&&), OR (||), & NOT (!) to construct complex conditions

If the if block consists of only one statement, then you do not need to include it inside the curly braces

But, curly braces are a must if the if block has more than one statement.

Truthy & falsy

Consider the following example, where we are not doing any comparison in the if statement.

The If (a) evaluates to true and if (b) evaluates to false.

This is because the underlying JavaScript coerces everything into either true or false.

Those values, which convert to false are Falsy values. There are eight falsy values in JavaScript. They are 

  1. false, 
  2. 0 (zero), 
  3. -0 (minus zero) , 
  4. 0n (BigInt zero)
  5. " " (empty string), 
  6. null
  7. undefined 
  8. NaN

Everything else converts to true, hence we call them Truthy.

You can read more about Truthy & falsy

Hence if (a) evaluates to true because the value of a is 1 & if (b) evaluates to false because the value of a is 1

If Else Statement

We can follow if block with an optional else block. The else block will execute only if the if condition evaluates to false.

Syntax

Example

In this example a > 0 evaluates to false as the value of a is 0. Hence the if block does not execute. Instead, the else block executes

A simpler if-else statement can also be written using a Ternary Conditional Operator.

Multiple conditions using else if

We can attach another If condition to an Else Block, thus creating a chain of blocks. This is particularly useful when you want to test multiple related conditions.

Note that conditions are tested in the order they appear in the code. It is possible that more than one If condition can evaluate to be true. But the first if block that satisfies the condition is executed.

Syntax

Example

In the following example both first and second if conditions evaluate to true. But only the first If block is executed and the second If block is never executed.

Nested if

A nested if is an if statement, which is present inside the body of another if or else statement.

Syntax

Example

References

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top