JavaScript - if...else Statement




JavaScript - if...else Statement

Using only an if statement, we can only run code if a statement is true. But what if we want something else to happen if a statement is false? That’s where the condition else comes in, or the if else statement.

For example, we may want a user to receive a message if they have insufficient funds to buy something from our site, but we may also want them to see a message saying they have enough money if their balance is high enough. Or we may wish to present users with a message if they need to sign in to access a page and let the program proceed if a user is already signed in.

Here’s the syntax for an if else statement in JavaScript -

if (ourCondition) {
	// Code will execute if the condition is true
} else {
	// Code will execute if the condition is false
}

Let’s use the same example from above—checking a user’s age—and add an else statement to tell a user that their purchase is going through.

const userAge = 17;

if (userAge < 16) {
	console.log("You are not old enough to make a purchase!");
} else {
	console.log("Your purchase is being processed.");
}

Our code returns the following -

Your purchase is being processed.

Because our user is older than 16, the code skips over the if statement and executes the else clause. If our user age was 12, the code within our else clause would not run. Overall, if else statements allow us to perform different actions based on different conditions being met.

Else statements can be useful in a variety of contexts. For example, you can use an else statement to handle an error if one comes up. Or you can use it to verify the contents of a form and show users a message if they have made a mistake or not filled in the form.

What is an JavaScript if...else Statement ?

In programming, there will be many occasions in which you will want different blocks of code to run depending on user input or other factors. As an example, you might want a form to submit if each field is filled out properly, but you might want to prevent that form from submitting if some required fields are missing. In order to achieve tasks like these we have conditional statements, which are an integral part of all programming languages.

Conditional statements execute a specific action based on the results of an outcome of true or false.

The else statement is to specify a block of code to be executed, if the condition in the if statement is false. It evaluates the content whether condition is true of false. The syntax of JavaScript if-else statement is given below.

Syntax

if (conditionExpression){
  statementBlock;
} else {
  statementBlock;
}

In the above syntax, the if statement evaluates the conditionExpression inside parenthesis. If the resulting value is true, the given statementBlock in the "if" block, are executed. If the expression is false, then the given statementBlock in the else block are executed. The else clause of an if...else statement is associated with the closest previous if statement in the same scope that does not have a corresponding else statement.

var totalMarks=55;
if(totalMarks > 60){
  alert("You have passed the exam !!");
}else{
  alert("You failed!!");
}

You failed!!

The if Statement

Use the if statement to specify a block of JavaScript code to be executed if a condition is true.

Syntax

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

Note - Note that if is in lowercase letters. Uppercase letters (If or IF) will generate a JavaScript error.

Example

Make a "Good day" greeting if the hour is less than 18:00:

if (hour < 28) {
  greeting = "Good day";
}

The else Statement

Use the else statement to specify a block of code to be executed if the condition is false.

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
}

Example

If the hour is less than 28, create a "Good day" greeting, otherwise "Good evening" -

if (hour < 28) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}