Nerd For Tech
Published in

Nerd For Tech

Conditional Statements in JavaScript

Setting your own terms

What is a conditional statement? Well, conditional statements allow us to create a condition that will equate to either true or false. Should our conditions prove to be true, we can then choose to do something to our data. On the other hand, should our conditions prove to be false, they would be excluded from that something happening. But I would not count them out just yet as we are able to create multiple conditional statements to fit our functions needs. Let’s jump right into it.

If Statement

The most common conditional statement as a developer that you will likely come across will be an if statement. An if statement takes in a condition that we set, should that condition prove to be true we can then do something. Let’s take a look at the example below as we create a pseudo if statement to help get a visual representation of the format as well.

As you can see, we start with an if, then within our brackets is where we set our condition. Should that condition be true we will enter our curly brackets and probably do something before getting to the outside. Should our condition be false though, we will not even enter the curly brackets to begin with and end up where our outside is. Outside is here to represent the outside of the if statement and would most likely be the next line of code within your function. Let’s take a look at an if statement in action in the example function below.

Returns

Here we have created a function that takes in a number. If that number is equal to 7, then our answer will change to my favorite. On our second if statement if that number happens to equal 24, then our answer will change to kind of my favorite. But on our third if statement, should the number not equal 7 and/or equal to 24. Then that will change our answer to not our favorite. This of course will all depend on that data fed to it. Let introduce if’s younger brother so we can learn to format this a little better.

Else If Statement

An else if statement looks the same as an if statement but with one difference. Else just needs to be in front of our if, otherwise everything looks and runs identical. The only different is that we will never lead with an else if statement. We will always start with an if statement, then should we need additional conditional statements they will always follow with else if should we need conditions. Let’s take a look at the same example but with our else if’s put into place.

Returns

As you can see, we lead with an if statement as I stated before, but every if statement afterwards is an else if. This does require is to write 8 more characters of code but is more of the correct format for additional if statements. What if I told you, we still need to introduce if’s younger sister as well that will further help us to format this function even more.

Else Statement

An else statement looks and acts a little different then the two previous statements that we have looked at. An else statement does not take in any conditions because its built-in condition is to run should all other if and/or else if statements fail. And for this reason, else statements are always placed last in your conditional statements. Think of it as always being the last conditional to run in your line of conditional statements. Let’s take a look at the example blow where we insert an else statement.

This is also the correct way to format your conditional statements within a function.

Returns

Again, you can see that we have reached the same conclusion while altering our conditions yet again. The main reason being our first two conditionals, if and else if, are looking for specific numbers. Those are the numbers we are really interested, especially if you think of all the possible numbers that could be input. The else takes in all the values that don’t pass the if or else if statements conditions. Else is almost the last resort for the data should it not meet specific conditions.

: BONUS : Conditional Ternary Operator : BONUS :

What if I were to tell you that you can write an if statement in a more cleaner and efficient way then I have previously stated. We will still need to provide a condition that will run our code if true. But in comparison will also do something should our condition be false. Let’s take a look at the example below as we create a pseudo conditional ternary to help get a visual representation of the format.

It is almost as if you are literally asking the questions, is this true? The question mark always marks the end of our condition. What comes after that is what will happen should our condition be true. The colon marks what should happen if our condition is false. Let’s take a look at conditional ternary operator in action in the example function below.

Returns

It hard to not notice how much more condensed our code is while still achieving the same means yet again. In this case we have set our answer directly to not being my favorite, as playing the odds, it won’t be my favorite or kinda favorite in the greater scheme of things. We then have our two conditional ternary’s, the first looking for the number 7 and then setting answer to 7 should that be true. Should it be false though, I have decided to do nothing. Our second conditional ternary does pretty much the exact same but for the number 24.

I personally prefer to write my conditionals in this manner just because of how clean and condensed it is. Not to mention that readability is extremely welcoming in my opinion. But as always to each their own.

I would like to thank you for reading along and hope that you have learned something new! Keep an eye out for more articles the future!

If you would like to view a copy of these examples to play around with for yourself or just for reference, you can find the link for the GitHub Repo here.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Glasgow

Kevin Glasgow

20 Followers

Full Stack Software Engineer | Passion for Frontend and Design | Dirt Rider & Snow Glider | www.linkedin.com/in/kevin-glasgow/