A Beginner’s Guide to Javascript Operators and Conditional Statements
Tags: beginners, tutorial, programming, javascript
Published: 2022-12-29 22:38:36

## Contents

- [Introduction](#introduction)
- [Relational operators](#relational-operators)
- [Logical operators](#logical-operators)
- [Conditional operators](#conditional-operators)
- [Conditional statements](#conditional-statements)
  - [if, else if, else statements](#if-else-if-else-statements)
  - [switch statements](#switch-statements)
- [Conclusion](#conclusion)
- [Resources](#resources)

## Introduction

Whether you are a seasoned professional or just starting your journey as a software engineer, one of the first major concepts you will learn is conditional statements. Conditional statements are blocks of code that allow you to be able to control certain actions. Simply put, it helps your program make decisions based on certain information. Every conditional statement contains one or more tests, typically involving the use of relational and logical operators. Before diving into how conditional statements work, we must first understand the relevant relational and logical operators that compose these statements.

> This guide is for those who are just getting started with Javascript. If you are still confused after reading this guide, please read more about these topics in detail at the MDN website. All links are listed in the [Resources](#resources) section.

## Relational operators

Relational operators compare two values and return either `true` or `false` based on the operator. All of these require two variables, each on opposite sides of the operator. Below is a table of the relational operators.
<table>
<tr><th>Operator</th><th>Name</th><th>Use</th><th>Example</th></tr>
<tr><td><code>></code></td><td>Greater than</td><td>Returns <code>true</code> if first value is greater than second value</td><td><pre>1 > 3<br>// false</pre></td></tr>
<tr><td><code><</code></td><td>Less than</td><td>Returns <code>true</code> if first value is less than second value</td><td><pre>1 < 3<br>// true</pre></td></tr>
<tr><td><code>>=</code></td><td>Greater than or equal to</td><td>Returns <code>true</code> if first value is greater than or equal to second value</td><td><pre>3 >= 3<br>// true</pre></td></tr>
<tr><td><code><=</code></td><td>Less than or equal to</td><td>Returns <code>true</code> if first value is less than or equal to second value</td><td><pre>5 <= 3<br>// false</pre></td></tr>
<tr><td><code>===</code></td><td>Strict equality</td><td>Returns <code>true</code> if both values equal each other (no type conversion)</td><td><pre>‘hello’ === ‘hello’<br>// true</pre></td></tr>
<tr><td><code>!==</code></td><td>Strict inequality</td><td>Returns <code>true</code> if both values do not equal each other (no type conversion)</td><td><pre>‘3’ !== ‘3’<br>// false</pre></td></tr>
<tr><td><code>==</code></td><td>Loose equality</td><td>Returns <code>true</code> if both values equal each other after type conversion</td><td><pre>3 == ‘3’<br>// true</pre></td></tr>
<tr><td><code>!=</code></td><td>Loose inequality</td><td>Returns <code>true</code> if both values do not equal each other after type conversion</td><td><pre>3 != true<br>// false</pre></td></tr>
</table>
Table 1: Relational Operators

The difference between the strict and loose operators is that the strict operators will only return `true` if the two values are equal to each other without any type conversions. On the other hand, the loose operator attempts to convert the values into the same type before making the comparison. Since the behind-the-scenes conversion creates more room for errors and bugs, it is best practice to use the strict operators as default over the loose operators.

If you get to a point where you need to check between two values of different types, I recommend converting them into the same type yourself before using the strict operator to compare. It is important to also note that comparing values of different data types using relational operators may yield unpredictable results. This is yet another reason to make sure that the two values being compared are of the same data type before comparison.

## Logical operators

Logical operators can be broken down into two types: unary (one variable) and binary (two variables). The unary operator has one variable to the right of `!` and the binary operators have a variable on both sides of the operator. Below is a table of the logical operators.
<table>
<tr><th>Operator</th><th>Name</th><th>Use</th><th>Example</th></tr>
<tr><td><code>!</code><br>(unary)</td><td>Not (or Bang)</td><td>Returns the opposite boolean</td><td><pre>!3<br>// false</pre></td></tr>
<tr><td><code>&&</code><br>(binary)</td><td>And</td><td>Returns the first value if it is falsy; otherwise return the second value</td><td><pre>0 && false<br>// 0</pre></td></tr>
<tr><td><code>||</code><br>(binary)</td><td>Or</td><td>Returns the first value if it is truthy; otherwise return the second value</td><td><pre>undefined || ‘hello’<br>// ‘hello’</pre></td></tr>
</table>
Table 2: Logical Operators

`!` converts the value into a boolean (if it isn’t one already) and returns the opposite boolean value. Remember that all values are truthy except for:
- `false`
- `undefined`
- `null`
- `NaN`
- `0`
- `“”` or `‘’`

In addition to its uses shown on the table, all three logical operators can be combined inside conditional statements to produce more elaborate tests. This will be shown in more detail in the following sections.

## Conditional operators

A conditional operator returns one of two operands depending on the result of the conditional test. Another name for this is the ternary operator (or ternary expression).
<table>
<tr><th>Operator</th><th>Name</th><th>Use</th><th>Example</th></tr>
<tr><td><pre>condition ? ifTrue : ifFalse </pre></td><td>Ternary</td><td>Returns <code>ifTrue</code> if <code>condition</code> is <code>true</code>; otherwise return <code>ifFalse</code></td><td><pre>let x = 1<br>x > 0 ? x + 3 : x<br>// 4</pre></td></tr>
</table>
Table 3: The Conditional Operator

The ternary operator works the same as a simple `if` and `else ` statement. So if we can just use `if` and `else` statements to accomplish what the ternary operator can do, why bother with it? The answer is conciseness. Traditional `if` and `else` statements will take up more lines than ternary expressions and for that reason, some may opt for this shorthand version in certain cases.

## Conditional statements

Conditional statements combine the relational and logical operators to create a conditional test. Similar to the basic conditional operator, the conditional statement helps manage the flow of certain actions.

### if, else if, else statements

As the heart of Javascript conditionals, the `if` statement is a versatile tool that helps developers control a certain conditional behavior. When combined with `else if` and `else`, it can cover most, if not all, conditional situations. The set-up for these statements are specified below.

```
if(condition1) {
  // execute if condition1 is true
} else if(condition2) {
  // execute if condition1 is false and condition2 is true
} else {
  // execute if previous tests are false
}
```

In the code block above, we have one `if`, `else if` and `else` statement. This suggests that there are three possible outcomes: `condition1`, `condition2` and none of the above. You can add as many `else if` statements after the `if` and before the `else` if there are more outcomes. The `else if` and `else` statements are optional but in order to use them, you need an `if` statement in the beginning.

I mentioned earlier that `&&` and `||` can increase the complexity of conditional statements. This is done by combining one or more conditional tests to generate a single multi-step test. We will start with the and operator, `&&`.

As its name implies, the and operator is used as a two part test. In order to pass the overall test, one must pass ***both*** individual conditions. If any one of the two conditions fail, the overall test will also fail.

```
const x = 5;

if(x > 0 && x < 3) {
  // code1
} else if(x > 5 && x <= 10) {
  // code2
}
```

The first condition tests if `x` is greater than 0 and if `x` is less than 3. If these conditions are fulfilled, we execute `code1` in the first `if` statement. If not, we move on to the next conditional test. This one checks if `x` is greater than 5 and less than or equal to 10. Since `x` = 5, it doesn’t pass either conditions and neither `code1` or `code2` is executed.

We can think of `||` in a similar way but with the word “or” instead of “and.” There are two conditions and if one ***or*** the other passes, the entire condition passes.

```
const x = 3;

if(!x || x !== ‘hello’) {
  // code1
}
```

If `!x` equals true or  `x` does not strictly equal `’hello’`, we run `code1`. In any other case, we run `code2` inside the `else` block. Since `x` equals 3, `!x` (or `!3`) equals false (all numbers are truthy and `!` switches the truthiness of the variable). Moreover, `x` does not equal `’hello’`, as it is assigned to 3. Because one of the two conditions results in `true`, we pass our overall test and `code1` is executed.

### switch statements

A `switch` statement contains an expression that is matched against each `case` value via strict equality. One at a time, it goes down each case until it finds a match. Once it does, it starts the execution from that `case`. If there isn’t a `break` keyword, the execution falls through and runs the block of code inside the next `case`, even if the `case` value doesn’t match. This process repeats until it meets `break` or checks every succeeding clause. The syntax is as follows:

```
switch(expression) {
  case value1:
    // execute if expression matches value1
  case value2:
    // execute if expression matches value2
    break
  default:
    // execute if expression doesn’t match value1 or value2
}
```

The `break` and `default` keywords are optional: the point of `break` is to cease the automatic fall through and immediately stop; `default` is there so it runs when there is no other match or when the execution reaches it from falling through.

```
const x = 3

switch(x + 1) {
  case 3:
    // code1
  case 4:
    // code2
  case 5:
    // code3
    break
  default:
    // code4
}
```

We start with `x` equals 3. The `switch` expression is `x + 1`, which equals 4. Starting from the top, there is no match until it reaches `case 4`. It proceeds to run `code2` then falls through to `case 5`. Even though this isn’t a match, `code3` is executed. The `break` at the end of `case 5` stops the execution from falling through to `default`.

`switch` statements are more situational than `if` statements. They are most commonly utilized when there are many `else if` or `else` statements that need to be matched through strict equality (`===`).

## Conclusion

In the preceding sections, we discussed the role of relational and logical operators within the context of conditional statements. After reviewing all the pertinent operators, we explored how `if`, `else if`, `else` and `switch` can cover almost every conditional test with the right combination of operators and statements.

It is an understatement to make the claim that conditional statements are important in programming. Even beyond the scope of software development, it plays a crucial role in our everyday lives. “I will go on a walk if it doesn’t rain” or “if I plan on going out tomorrow night, I will do my homework tonight” are some real life examples of conditional statements that we set for ourselves, sometimes without even thinking about them. With this in mind, it is paramount that novice software developers have a solid grasp on this concept before trekking forward in their new and exciting career.

> This guide is meant to serve as a learning tool for people who are just starting to learn Javascript (and coding in general as these concepts apply to other languages beyond Javascript). Thank you for reading and if you have any questions or concerns about some of the material mentioned in this guide, please do not hesitate to contact me at jjpark987@gmail.com.

## Resources

- [MDN Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators)
- [MDN Logical NOT (!)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_NOT)
- [MDN Logical AND (&&)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND)
- [MDN Logical OR (||)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_OR)
- [MDN if…else](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else)
- [MDN switch](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch)
- [MDN break](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break)