if...else

The if statement

The if statement is the most basic conditional statement in JavaScript. It executes a block of code only if a specified condition is truthy.

• The if statement is made up of a condition and a statement.
• The condition is an expression that will be evaluated to be truthy or falsy.
• The condition is placed between parentheses following the if keyword.
• The statement is the block of code within the curly braces, which will be executed if the condition is truthy.

  if(condition){
    // statement, the block of code to be executed if the condition is truthy
  }

Let's look at a scenario

Imagine you are building a site for an e-commerce shop, and you need to apply certain discounts based on the user's product total. We can use conditional statements to calculate the cart total.

Condition: If the product total is greater than or equal to $50
Statement: Apply free shipping

/*
Step 1: Define variables
  - productTotal may be reassigned later, so we use the let declaration
  - shippingFee is always the same, so we use the const declaration
*/
let productTotal = 55
const shippingFee = 15
let cartTotal

cartTotal = productTotal + shippingFee

// Step 2: Check if product total >= 50, if so, apply free shipping

if (productTotal >= 50) {
  // If product total >= 50, remove shipping fee, and do not apply discount
  cartTotal = productTotal
  // will log 55
}
  console.log(cartTotal)

The else statement

The second part of the if...else, is the else statement. This optional statement will execute its block of code only if the condition, from the previous if statement is falsy.

While it is possible to have an if without an else, the reverse is not possible.

Continuing the example above, if the productTotal is greater than or equal to $50 (if the above condition is truthy), then we must remove shipping fees.

/* 
  Note that we changed the productTotal to $30
*/
productTotal = 30

if (productTotal >= 50) 
{
  cartTotal = productTotal
  console.log(cartTotal)
  // this will not run as the productTotal is less than 50
} 
else 
{
  cartTotal
  console.log(cartTotal)
  // will log 45
}

The else if clause

When checking for multiple conditions, if...else statements can be nested to create an else if clause. Each condition will be checked only if the previous condition was falsy.

NOTE

There is no elseif keyword in JavaScript. The use of elseif in place of else if will result in a syntax error.

Continuing the example above, on top of the previous condition, if productTotal is greater than or equal to $100, we must remove shipping fees AND apply a 5% discount

/* 
  Note that we changed the productTotal to $200
*/

productTotal = 200
let discount = 0.05 * productTotal

if (productTotal >= 100) 
{
  cartTotal = productTotal - discount
  console.log(cartTotal)
  // will log 190 (200 - 5% of $200)
} 
else if (productTotal >= 50)
{
  cartTotal = productTotal
  console.log(cartTotal)
} 
else
{
  cartTotal
  console.log(cartTotal)
}

Because an else if condition is only evaluated when the previous condition is falsy, using the else if clause can ensure that only one block of code is executed, which may not be possible when just using if statements.

Using if statements only is not recommended when the conditions are related

  // Note that our productTotal is still $200.

if (productTotal >= 100) 
{
  // this block of code will execute
  cartTotal = productTotal - discount
  console.log(cartTotal)
  
} 

if (productTotal >= 50)
{
  // this block of code will also execute
  cartTotal = cartTotal - shippingFee
  console.log(cartTotal)
} 

This YouTube video was created by Steve Griffith.