freeCodeCamp/guide/english/javascript/if-else-statement/index.md

title
If-Else Statement

Introduction

The if statement executes a statement if a specified condition is true. If the condition is false, another statement can be executed using the else statement.

Note: The else statement is optional.

if (condition) {
    /* do something */
} else {
    /* do something else */
}

Multiple if...else statements can be chained to create an else if clause. This specifies a new condition to test and can be repeated to test multiple conditions, checking until a true statement is presented to execute.

if (condition1) {
    /* do something */
} else if (condition2) {
    /* do something else */
} else if (condition3) {
    /* do something else */
} else {
    /* final statement */
}

Note: If you want to execute more than one statement in the if, else or else if part, curly braces are required around the statements:

if (condition) {
    /* do */
    /* something */
    /* with multiple statements */
} else {
    /* do something */
    /* else */
}

MDN link | MSDN link

Additional ternary operator

For a simple operation like assigning a value to a variable conditionally you can use a ternary operator, which is a shorthand syntax for an if...else clause in JavaScript

// Normal if...else
let num  = 1;
if (someCondition){
    num = 1;
} else {
    num = 0;
}

// Using ternary operator
const num = someCondition ? 1 : 2;
// condition ? true case : false case

Examples

Using if...else:

// If x is equal to 5, then the condition is TRUE. This results in z being set to 7 and q being set to 42.
// If x does not equal to 5, then the condition is FALSE. This results in z being set to 19.
if (x == 5) {
  z = 7;
  q = 42
} else {
  z = 19;
}

Using else if:

if (x < 10) {
  return "Small number";
} else if (x < 50) {
  return "Medium number";
} else if (x < 100) {
  return "Large number";
} else {
  flag = 1;
  return "Invalid number";
}

Using if alone:

    // This function can also act as a Boolean
    if (x < 30) {
        return "true";
    }