JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript if else and else if

A conditional statement is a set of commands that executes if a specified condition is true.

There will be many occasions in which you will want different blocks of code to run depending on user input or other factors.

Conditional statements are part of the logic, decision making, or flow control of a computer program.

In JavaScript we have the following conditional statements:

  • The if statement
  • The if...else statement
  • The else...if statement
  • The switch statement

We will discuss switch statement in the next chapter.


JavaScript If Statement

An if statement will evaluate whether a statement is true or false, and only run if the statement returns true. The syntax is:

if (condition) {
   block of code to be executed if the condition is true
}
Run code

JavaScript if...else Statement

The if...else statement allows you to execute one block of code if the specified condition is evaluates to true and another block of code if it is evaluates to false. The syntax is:

if (condition) {
   block of code to be executed if the condition is true
} else {
   block of code to be executed if the condition is false
}
Run code

The following example changes the value of the src attribute of an image, if the user clicks on the image:

Run code

JavaScript else...if Statement

With if...else, we can run blocks of code depending on whether a condition is true or false. However, sometimes we might have multiple possible conditions and outputs, and need more than simply two options. One way to do this is with the else...if statement, which can evaluate more than two possible outcomes. The syntax is:

if (condition1) {
   block of code to be executed if the condition1 is true
} else if (condition2) {
    block of code to be executed if the condition1 is false and condition2 is true
} else {
   block of code to be executed if the condition1 is false and condition2 is false
}
Run code

Nested if...else Statements

You can enhance the decision making capabilities of your JavaScript program by using nested if...else statements.

Run code

Ternary Operator

The ternary operator provides a shorthand way of writing the if...else statements.

A ternary operator is written with the syntax of a question mark (?) followed by a colon (:), as demonstrated below:

(condition) ? expression on true : expression on false

In the above syntax, the condition is written first, followed by a ?. The first expression will execute on true, and the second expression will execute on false.

To understand how ternary operator works, consider the following example:

Run code

The above statement assigns the value "adult" to the variable status if age is eighteen or more. Otherwise, it assigns the value "minor" to status.