Conditional Statements in JavaScript

 

Conditional Statements in JavaScript

 

JavaScript Conditional statements allow you to execute specific blocks of

code based on conditions. If the condition meets then a particular block of

action will be executed otherwise it will execute another block of action that 

satisfies that particular condition.

 

There are several methods that can be used to perform Conditional

 Statements in JavaScript.

 

JavaScript - if...else Statement

While writing a program, there may be a situation when you need to adopt

one out of a given set of paths. In such cases, you need to use conditional 

statements that allow your program to make correct decisions and perform 

right actions.

JavaScript supports conditional statements which are used to perform 

different actions based on different conditions. Here we will explain 

the if..else statement.

 

Flow Chart of if-else

The following flow chart shows how the if-else statement works.

JavaScript supports the following forms of if..else statement −

1) if statement

2) if...else statement

3) if...else if... statement.

 

if statement

The if statement is the fundamental control statement that allows JavaScript

to make decisions and execute statements conditionally.

Syntax

The syntax for a basic if statement is as follows −

if (expression) {

Statement(s) to be executed if expression is true

}

 

Here a JavaScript expression is evaluated. If the resulting value is true, the 

given statement(s) are executed. If the expression is false, then no 

statement would be not executed. Most of the times, you will use 

comparison operators while making decisions.

JavaScript Code

Output

 

if...else statement

The 'if...else' statement is the next form of control statement that allows 

JavaScript to execute statements in a more controlled way.

Syntax

if (expression) {

Statement(s) to be executed if expression is true

} else {

Statement(s) to be executed if expression is false

}

Here JavaScript expression is evaluated. If the resulting value is true, the 

given statement(s) in the ‘if’ block, are executed. If the expression is false, 

then the given statement(s) in the else block are executed.

JavaScript Code

Output

 

if...else if... statement

The if...else if... statement is an advanced form of if…else that allows

JavaScript to make a correct decision out of several conditions.

Syntax

The syntax of an if-else-if statement is as follows −

if (expression 1) {

   Statement(s) to be executed if expression 1 is true

} else if (expression 2) {

   Statement(s) to be executed if expression 2 is true

} else if (expression 3) {

   Statement(s) to be executed if expression 3 is true

} else {

   Statement(s) to be executed if no expression is true

}

JavaScript Code

 

Output

There is nothing special about this code. It is just a series of if statements,

 where each if is a part of the else clause of the previous statement.

 Statement(s) are executed based on the true condition, if none of the

 conditions is true, then the else block is executed.

JavaScript - Switch Case

You can use multiple if...else…if statements, as in the previous chapter, to 

perform a multi way branch. However, this is not always the best 

solution, especially when all of the branches depend on the

value of a single variable.

Starting with JavaScript 1.2, you can use a switch statement which 

handles exactly this situation, and it does so more efficiently than 

repeated if...else if statements.

Flow Chart

The following flow chart explains a switch-case statement works.

Syntax

The objective of a switch statement is to give an expression to evaluate 

and several different statements to execute based on the value of the 

expression. The interpreter checks each case against the value of the 

expression until a match is found. If nothing matches, a default condition 

will be used.

switch (expression) {

   case condition 1: statement(s)

   break;

    case condition 2: statement(s)

  break;

   ...

   case condition n: statement(s)

   break;

   default: statement(s)

}

JavaScript Code

Output

The break statements indicate the end of a particular case. If they were 

omitted, the interpreter would continue executing each statement in 

each of the following cases.

We will explain break statement in Loop Control chapter.

 

Break statements play a major role in switch-case statements. Try the

following code that uses switch-case statement without any break statement.

JavaScript Code

Output