If Statements 101

If Statements 101

I hate math.

I know it's the key to unlocking the universe, but gosh I hate math. At 25 I still count on my fingers and I need to crack out a pen and paper to divide simple numbers. But do you know who is good at math? Computers, and you're using one so let's put it to work.

JavaScript is a programming language, and it can do both simple and complex math. Let's star off with something fairly simple:

Nice! Now let's make it even more complicated:

2! Who knew!?

It Doesn't Get Any Easier

JavaScript is great at math, but it's only as smart as the person feeding it numbers. Computers don't make mistakes; people make mistakes and then give those mistakes to computers.

JavaScript can decide between choices by using an if statement. If a condition is met, it does one piece of code, or if it is not met it does another.

We can also use less-than (<), greater-than (>), less-than-or-equal (<=) and great-than-or-equal (>=) signs:

Confused about that response? Check the formula again. 1 minus 1 is not greater than or equal to 2. Remember, computers don't make mistakes.

Ors & Ands

But what if we are looking for more than one condition? What if we're looking for num to be either 2 or 4? We would then change the condition to match this by using the "or" (||) condition. When using this condition either one variable or the other has to match.

There is also the "and" (&&) condition. It works similar to "or", but both conditions have to match.

We can also combine "ors" and "ands" to make more complicated statements. To make it easier to read (and to prioritize the order of operations), you can use brackets.

Else If

We're getting pretty complicated now, so let's tone it down to something a little more friendly. Let's pretend to make some cookies:

If for every 2 eggs we have, we need 3 cups of flour, our above statement might not be what we need. After all, we'd be using the same amount of flour regardless of if we have 2 or 4 eggs. We need a way to check for different amounts of eggs. We need to use an else if condition:

Great! Now if we have 2 eggs we need 3 cups of flour, and if we have 4 eggs we need 6 cups of flour. But what if we have 5 eggs? According to our script, then we need 0 cups of flour. We could add a condition for 3 eggs, 5 eggs, 7 eggs, etc, or we could see if we could simplify our code. For example, if we know cups of flour will always be 1.5 times the number of eggs, we can do this:

Now if there are any eggs, we'll need 1.5 times the number for flour, otherwise we need no flour. As you code for different conditions, always try to find an easier way to do something.

Short-Hand If Statement

Now that we simplified what we're doing, we might want to simplify our code. Instead of using this:

We can do this:

The question mark (?) is the if statement and the colon (:) is the else statement. Pretty cool, huh? And yes, for those wondering, we can stack them, but then it gets really hard to read:

I think that's a good place to stop. As your code gets longer, minimization is key, but that got a little crazy.

Have you ever heard of an if statement before? Did you get totally lost in this article? Let me know in the comments below!



Sign-up for inside tips for making
your website more beautiful!

* indicates required


Sign-up for inside tips for making
your website more beautiful!

* indicates required