if...else

This YouTube video was created by Steve Griffith.

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.

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

Conditions:
  - If the product total is greater than or equal to $50, 
    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
let discount = 0.05 * productTotal

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
  console.log(cartTotal)
  // will log 55
}

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 a 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)
} 
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
discount = 0.05 * productTotal

if (productTotal >= 100) 
{
  cartTotal = productTotal - shippingFee - 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

  // 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)
}