If/Else

If

In the code below we are prompting the user to enter a username and password, and the code checks to see whether the user is authorized to access the site. If he is, then we will re-direct him to his dashboard page.

The if keyword indicates an if statement. This is followed by a set of opening and closing parentheses which contains a condition to test. And finally a block of code to execute if the condition is true. The block of code can be a single statement, or a sequence of statements surrounded by curly braces.

let userName = prompt("Enter your username:");
let password = prompt("Enter your password:");
let authorized = isUserAuthorized(userName, password);

if (authorized) {
    goToDashboardPage();
}

If there is only a single statement in the body of the code block, then the curly braces surrounding the code block are not required. Requiring the braces is often a style convention within companies. For example, here is the style-guide from Google for this issue.

Else

In many cases you will want your code to take a different path when the condition evaluated in the if expression is false. In this case you use can add the else block to the if statement.

let userName = prompt("Enter your username:");
let password = prompt("Enter your password:");
let authorized = isUserAuthorized(userName, password);
if (authorized) {
    goToDashboardPage();
}
else {
  alert("Wrong username or password");
}

More Than Two Paths

With the if/else use case above, the condition is evaluated and if it is true, then one path is taken, otherwise an alternate path is taken. If there are multiple pathways that could result then there are two ways to handle that condition.

Nested If Statements

You can use the following structure:

The prompt function returns a string. To convert the string to a number, use the JavaScript parseInt function.

// prompt will return null if user clicks Cancel
let grade = prompt("Enter points out of 100");
if (grade) {
    // convert the string to a number
    grade = parseInt(grade);
    if (grade >=90) {
        alert("A");
    }
    else if (grade >= 80) {
        alert("B");
    }
    else if (grade >= 70) {
        alert("C");
    }
}

You are actually nesting the if statements here. It doesn't look like it because you are not required to use curly braces for the action when the if or else path contains a single statement.

These following two code samples are equivalent. It works because the formatting of the source code makes it very readable, even though it's goes against the style guide of requiring block braces, unless it can all fit on a single line. Most style guides would allow this exception as long as the code is formatted this way.

let grade = prompt("Enter points out of 100");
if (grade) {
    grade = parseInt(grade);
    if (grade >=90) {
        alert("A");
    }
    else if (grade >= 80) {
        alert("B");
    }
    else if (grade >= 70) {
        alert("C");
    }
}

let grade = prompt("Enter points out of 100");
if (grade) {
    grade = parseInt(grade);
    if (grade >=90) {
        alert("A");
    }
    else  {
        if (grade >= 80) {
            alert("B");
        }
        else {
            if (grade >= 70) {
                alert("C");
            }
        }
    }
}