If Else Statements & Nesting

Open the project folder

The if statement

We have used if statements already during previous examples. They are used run some code between the curly braces if a condition is true.

let user = { name: ‘Chris’, role: ‘admin’};
if (user) {
  console.log(‘user logged in…’)
}

Here we have a user object. This presence of the object would result in true, meaning our console log will run.

If the user was logged out, we would set the user variable to be null. This would result in false and the code would not run. But, if it was false, we often need a way to run some code for this situation too. And this is where else statements come in.

The else statement

We place these immediately after the if statement, and this block of code will run in all other cases which are not covered by the if section:

let user = { name: ‘Chris’, role: ‘admin’};
if (user) {
  console.log(‘user logged in…’)
}
else {
  console.log(‘user logged out’)
}

Example

Over to the starter files, we have a similar example set up:

let user = { name: 'Chris', role: 'admin' };
if (user) {
  console.log('user logged in...');
}

Here we are only handling the condition if the user is logged in. You may be thinking, why not just handle the logged out condition below this?

And this can be done like this:

let user = { name: 'Chris', role: 'admin' };
if (user) {
  console.log('user logged in...');
}
// handle user logged out below the if statement
console.log('user logged out');

But you may remember an issue with this from earlier. If the user is present, both console logs will run. One inside the if statement, then the second one because there is nothing stopping it running. We only want to show one of these log's, and to do this, we can wrap the logged-out section in an else statement:

let user = { name: 'Chris', role: 'admin' };
if (user) {
  console.log('user logged in...');
}
else {
  console.log('user logged out');
}

This will cause only one of the logs to run.

Multiple if statements

If we wanted, we could also add multiple if statements too:

let user = { name: "Chris", role: "admin" };
if (user) {
  console.log("user logged in...");
}
if (user.role === "admin") {
  console.log("hey admin!");
} else {
  console.log("user logged out");
}

This would look like this in the console:

user logged in...
hey admin!

We need to be careful with this because the else statement immediately follows the second if statement. This means now the else section will only run if the user’s role is not admin, which makes no sense.

If we had the user as null:

let user = null;

The result would be an error because we are checking the user.role when no role property now exists:

What we should be doing here is to only check if the role is equal to admin, when we know the user object exists.

Nesting if statements

And we can do this by nesting our if statements. This involves moving the second if statement inside the first:

let user = null;
if (user) {
  console.log('user logged in...');
  if (user.role === 'admin') {
    console.log('hey admin!');
  }
} else {
  console.log('user logged out');
}

Now we are only checking the role if we know the user is logged in. We can then follow up with a nested else section too:

let user = { name: 'Chris', role: 'subscriber' };
if (user) {
  console.log('user logged in...');
  if (user.role === 'admin') {
    console.log('hey admin!');
  }
  // nested else section
  else {
    console.log('hey user!');
  }
} else {
  console.log('user logged out');
}

Try this out by changing the role, and also setting the user to be null, causing different code blocks to run. We can go as deep as we wanted but be careful to not go overboard and make the code hard to understand.