JavaScript Conditionals
Tags: javascript, beginners
Published: 2019-12-29 03:57:53

---
title: JavaScript Conditionals
published: true
description: A beginners guide to JavaScript conditional statements
tags: javascript, beginner
series: FrontEnd Development Zero to Hero 
---

Naturally if you are hungry you tend to look for food and when you do find it, you eat. This is the basic analogy of conditional statements in most programming languages, JavaScript included.

The execution path of most programs is not a _one way street_ and when you write code for a program, the program can act differently when a certain condition is met. This condition can be the result of a previous computation or a statement at that very point of execution.

Programming constructs that execute certain code based on conditions are called _conditional statements_ or simply _conditionals_.

Their structure is similar in most high level programming languages with slight differences.

Let's discuss the theory behind them and we will give code examples.

_All screenshots are from <b>Firefox 71.0</b> and its Developer Tools. One particular feature in Firefox 71.0 that's worthy of mention is the <b>multi-line code editor</b> in the console._

<hr>

Technically speaking conditional statements execute or skip other statements depending on the value of a specified expression. These statements are the decision points of your code.

Example of an expression is:

```javascript
var a = 20;
```

JavaScript conditional statements are:
* `if`
* `else/if`
* `switch`

###__`if`__
The if statement is the fundamental control statement that allows JavaScript to make decisions or to execute statements conditionally.

This statement has two forms. The first is:

```javascript
if (expression) {
   // statement;
}
```

In this form the _statement_ will execute if the expression is evaluated and the resulting value is _truthy_. If the resulting value is false, the statement will not execute. Lets take an example.

```javascript
/**
  * The console will log the string
  * "This code will execute"
  */
var a = 2;
if ( a == 2 ) {
  console.log('This code will execute');
}
```

When executed in the console:

![A simple if statement in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/3rd4ijb5p7sspoy3jein.PNG)

If the statement is _a single statement_ you can omit the parentheses (the curly brackets) and the code will execute just fine.

![A simple if statement in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/en0vzlohh0nwlj46aplr.PNG)

You should note that __the expression can be another value that is truthy__ and not necessarily an equality check.

```javascript
/**
  * The console will log the string
  * "This code will execute because the variable
  * "a" holds a truthy value which is the number 2
  */
var a = 2;
if ( a ) {
  console.log('This code will execute');
}
```

On the other hand if the expression is false the statement will not execute.

Then what happens if the code is false? That is the second form of the `if` statement called `if/else` statement. The format is

```javascript
if (expression) {
    // statement
} else { 
   // this will be executed if expression evaluates to false
  statement
}
```

Lets revisit our last example by adding an `else` clause.

```javascript
/**
  * The console will log the string "The expression
  * evaluated to false"
  */
var a = 2;
if ( a == 4 ) {
  console.log('This code will not execute');
} else {
  console.log('The expression evaluated to false');
}
```

When executed in the console:

![An if else statement in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/wlifxk2cx4rb771po1w1.PNG)

_Note: you can have more than one statement in the if and else clause._

###__`else/if`__

The `else if`statement is used when you want to test multiple expressions and execute a piece of code based on the result of the expression.

The `else if` statement results when repeated `if/else` statements are used. 

Let's look at an example.

```javascript
/**
  * In this section of code we check for multiple expression
  * before executing a piece of code.
  */
var a = 3;
if ( a == 1 ) {
  console.log('This code will not execute');
} else if (a == 2){
  console.log('The code will not execute');
} else if (a == 4) {
  console.log('The code will not execute');
} else if (a == 3) {
  console.log('The code will execute because the expression evaluates to true');
} else {
  
  // if all else fails, the code here will execute
  console.log('All else code evaluated to false');
}
```

When executed in the console:

![else if statements in JavaScript](https://thepracticaldev.s3.amazonaws.com/i/h0zw9gza6zuseus7nxek.PNG)

###__`switch`__
The `switch` statement is a complicated statement to explain. The basic syntax is:

```javascript
switch (expression) {
  //statements
}
```

However, the full syntax of a switch statement is more complex than this. Various locations in the block of code are labeled with the `case` keyword.

When a switch executes, it computes the value of the expression and then looks for a `case` label whose expression evaluates to the same value.

The value is placed in front of the `case` keyword before the colon (`:`).
After the colon, we write the code that will be executed if the case is a match followed by a `break` statement.

The `break` statement causes the interpreter to jump to the end of the switch statement and continue with the statement that follows it.

We can have multiple `case` label with code and `break` statement, this is similar to the `if else if` statement we demonstrated in the last section.

If there is no matching case label, the interpreter looks for a statement labeled `default:` which is similar to the `else`clause after multiple `else if` statements.

If there is no `default:` label, the switch statement skips the block of code altogether.

Armed with this knowledge we can rewrite or previous example using a switch statement.

```javascript
/**
  * In this section of code we check for multiple expression
  * using a switch statement before executing a piece of code.
  */
var a = 3;

switch (a) {
    case 1: // if a == 1
      console.log('This code will not execute');
      break;
    case 2: // if a == 2
      console.log('The code will not execute');
      break;
    case 4: // if a == 4
      console.log('The code will not execute');
      break;
    case 3: // if a == 3
      console.log('The code will execute because the expression evaluates to true');
      break;
    default: // no match found
    // if all else fails, the code here will execute
    console.log('All else code evaluated to false');
}
```

When executed in the console:

![JavaScript switch statement](https://thepracticaldev.s3.amazonaws.com/i/aemgplfjih44ipzv6ums.PNG)

That's it for now.

Up next, Loops.