Typescript if, else & nested if statement

Typescript 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 typescript 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.

Source Code

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

Source Code

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 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.

Source Code

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 Typescript. 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 as Truthy.

You can read more about Truthy & falsy

Hence if (a) evaluates to true because value of a is 1 & if (b) evaluates to false because 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 value of a is 0. Hence the if block does not execute. Instead the else block executes

Source Code

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 true. But the first if block that satisfies the condition is executed.

Syntax

Example

Source Code

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

Source Code

References

Leave a Comment

Your email address will not be published.

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

Scroll to Top