Operators/Conditional statements: if (youUnderstand) {'Great!'} else {'Read on'}
Tags: codenewbie, webdev, tutorial, javascript
Published: 2020-08-21 20:16:51

First of all, let me just apologise for the blog title layout.. 
How else was I going to grab your attention and help you to understand Operators and Conditional Statements?
<br>
This is my 4th blog post on DEV, I am beginning to write about what I have learned, or gone over again, as it really helps me to learn and embed the fundamentals, whilst also helping others on their journey!

This article is covering the basic Operators, and Conditional statements in JavaScript.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a7nthm7eioail3tiljc5.png)

# ***Conditional statements... Is that you?..*** #

Every day we are making decisions, it could be an easy one like wether to have a tea or a coffee, or an unpopular one for example, wether or not to deploy on a Friday. We call these in Javascript, `If`, `else` statements: If we decide to have a coffee, then we would make one and enjoy, if not we would opt for the tea. A _conditional statement_ checks certain conditions, and then executes the code accordingly based on these conditions.

# ***What happens IF?...*** #

Firstly, lets talk about `IF` statements, think of these as the top layer of a cake, and as we dive into `else` and `if else` statements - these will become our other layers..

We often base our decisions (or conditions!) on something simple, if its Monday, we might work, or if we are tired, we may take a break and rest. In JavaScript, we can execute this based on a condition. see an example of an `if` statement below: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bs8k9moh9a4xn32dtz1c.png)

# ***else if, else if.. Im confused!*** #

Its completely ok to be confused as you begin learning about `conditional statements` - They are quite tricky to learn to begin with, the `else if` statement _always_ comes before the else statement (This is our reliable statement.. You will find out why when you reach that section!) These statements are the middle layers of our cake, you can add as many of them as you like, to make your code as easy, or as complex, as you'd like. This is an example of an `else if` statement:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zsmfl9gnjepkw42up1wh.png)


# ***Anything Else?*** #

Actually yes, there is.. `else` statements, these are added to an `if` statement, so that if the condition within an `if` statement, resolves to `false` then this block of code will execute instead - We could call it a ***reliable*** statement (should all your previous code render `false`- you know you have always got a statement to fall back on!)
Here's an example:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5mqaght1s0lyhxmqhy2x.png)





 


# ***Hello... This is your operator, how may I help you?*** #

There are three types of operators we can use for `Conditional statements` These are:

**<u>Logical Operators<u>**
In Javascript, when we work with conditional statements we use values that are _Boolean_ - This means that the value will either be 'True' or 'False'. There is a certain operator that work directly with these values, this is known as a _Logical Operator_ there are 3 we can use:

`&&` - The _and operator_: This operator checks that both conditions are true. when using this operator, both statements _must_ be `true` resulting in the block executing and therefore printing to the console, however, if either condition is `false` the condition will overall render `false` and result in execution of the `else` block.

`||` - The _Or operator_: This operator allows for a bit more flexibility in conditions, it allows for any of the statements within a code block to be `true` in order to successfully execute and print to the console.

`(!)` - The _Not operator_: Also known as the _bang operator_, this takes a `true` value, and passes back a `false` value - to put it simply, it returns the opposite of what is intended to be printed to the console.
Below is an example of Logical operators in action:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/504ghiecm2kcj9y0i4ru.png)

**<u>Comparison Operators<u>**

These are pretty self explanatory, and quite straightforward to use in conditional statements, there are 6 types of this operator. 
These work by comparing the values from left to right.


`<`   - Less than
`>`   - Greater than
`<=`  - Less than/or equal to
`>=`  - Greater than/or equal to
`===` - Is equal to
`!==` - Is not equal to

**<u>Ternary operator<u>**

A _ternary operator_ simplifies an `if..else` statement like below, these can be used for conditions which return either `true` or `false`:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/js8qzi8fv5bz9sg7j9cc.png)

# ***True or false... Tough call!*** #

In this section Im going to talk about `truthy or falsy values` So we have talked about `boolean` values, so what about `non-boolean types`? Good question!
Sometimes you might just want to check if a particular variable exists, but not actually assign it a value.

So let's look at `non-boolean types`

Non-boolean types include:
* Strings
* Numbers

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0h05ss9ehld8lg5a6a4y.png)

Take the above `conditional statement` - the `if` statement will execute as the  of the variable _slicesOfPizza_ will return _true_ as it has been given a non-falsy value.

Which values are falsy? Lets find out!
* - `0`
* - `Empty strings` like "" or ''
* - `null` which means there is no value at all
* - `undefined` - when a variable isnt given a value
* - `NaN` or `Not a Number`

The second statement will return `false` as it's value is an empty string! Yipee - Looks like your getting that dog! 
Hooray for that particular empty string huh? 

# ***Truth or false assignment... Yes really!*** #

Pssst, If you bring together what you know so far about `logical operators` - I will let you in on a little secret. There is a shortcut you can use! JavaScript will assign a `truthy` variable to the value if you use the `or operator` which if you remember is the `||` syntax.

Remember, statements check the **left** condition first!
Heres an example: 
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wh164bornghzx5n4tcd7.png)

# ***Switch statements*** #

`else if` statements are great if we want to check more than one condition. - Thats great but surely there must be a shorter way to write these condtions you say?

Your totally right - they are called `switch statements`

A `switch statement` give us an alternative syntax than we can use to check multiple conditions and keeps our code looking clean and readable, helping us identify bugs or syntax errors quickly to resolve them.
Example below:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t5j8qonj0p04nqg35dp1.png)

The `break` keyword instructs our computer to stop running the code block and to exit, meaning the computer wont continue to check for any more cases or execute any futher code within that block, without the `break` keyword the code will continue to run without breaking, meaning all blocks of code will run regardless or wether they are correct.

# ***Conclusion... Yes finally!*** #

This is just a basic summary on conditional statements and operators, it is _always_ best to keep practising in order to understand these, but articles definitely help too!

If you made it this far... Thank you so much!

Follow me on Twitter: @miss_lorsx for updates on new blog posts coming soon!