Google Developer Expert Let’s talk about conditional logic in JavaScript! We’re not going to go all “computer-science” on you and bore you with control flow diagrams - I’m going to tell you a short story about things us developers love - coffee, and sleep!
This will help us understand how to “think” about conditional logic, and the key to refined and clear conditional logic is being able to paint the picture before you write the code. So we’re going to paint the picture with a nice story.
Table of contents
Conditional Logic
Here’s my story about going to bed early - the aim is to be more productive and require less coffee the following morning! (I know it doesn’t all work out, but we tried, right?).
Free eBook
Directives, simple right? Wrong! On the outside they look simple, but even skilled Angular devs haven’t grasped every concept in this eBook.
-
Observables and Async Pipe - Identity Checking and Performance
- Web Components <ng-template> syntax
- <ng-container> and Observable Composition
- Advanced Rendering Patterns
- Setters and Getters for Styles and Class Bindings
Observables and Async Pipe So here is the example, my thought process is something like:
If
> I go to bed before 11pm
Then
> I will only need a small coffee to wake me up
We could also decide it might be a good idea to get that deployment pushed, fix that bug, and stay up a bit too late. We might not, but it’s a possibility, right?
In that case, we’d have something like this:
If
> I go to bed before 11pm
Then
> I will only need a small coffee to wake me up
Alternatively
> I go to bed at 2am and fix that bug
Then
> I will definitely need 7 coffees and probably be late for work… again
We’ve all been there, I know. That “30-minute fix” quickly turns into the sun-rising and you wondering why you haven’t slept just yet. Things don’t always turn out as expected!
What about another scenario, where we decide to go through with the “all-nighter” and call in sick? Of course I’ve never done this, but it’s a possible outcome…
If
> I go to bed before 11pm
Then
> I will only need a small coffee to wake me up
Alternatively
> I go to bed at 2am and fix that bug
Then
> I will definitely need 7 coffees and probably be late for work… again
Otherwise
> I’ve stayed up all night
Then
> I will call in sick
Okay, now we’ve explored all possible (and some terrible) ideas of how late we could go to bed. Let’s turn that thinking into some JavaScript and see what it looks like!
I find learning the concept first and implementation second is key to understanding what you’re doing, learning and writing. Remember, JavaScript is a language and therefore is an implementation of challenges and problems we are trying to solve.
So let’s dive into the implementation layer - the glorious “if” statement and friends…
If Statements
So now we understand the concept behind our if, else if and else decisions - let’s explore real JavaScript. In JavaScript, we don’t have a “Then” - it’s implied by our code. Our first example looked like this:
If
> I go to bed before 11pm
Then
> I will only need a small coffee to wake me up
Converted to JavaScript:
// If I go to bed before 11pm
if (sleepTime === 11) {
// Then I will only need a small coffee
cupsOfCoffeeNeeded = 1;
}
The value we pass into if () {} needs to be either a Boolean or it will be cast to a Boolean (truthy or falsy values).
We’re using the === comparison operator here to give us a straight-up Boolean value. If sleepTime equals 11, we’ve made the sensible choice to go to bed.
Now you know how to write an if statement!
If, Else If Statements
Let’s take the other scenarios where we instead decide to fix that bug and stay up a bit too late. (At this time it might also be appropriate to draft a letter of sickness to your boss).
In JavaScript we don’t directly have “Alternatively” but we do have “Else If” which is the official implementation name. Now we know our example from earlier is essentially just an “Else If”, let’s take a look:
If
> I go to bed before 11pm
Then
> I will only need a small coffee to wake me up
Alternatively
> I go to bed at 2am and fix that bug
Then
> I will definitely need 7 coffees and probably be late for work (again!)
Converting our thinking into code gives us:
if (sleepTime === 11) {
cupsOfCoffeeNeeded = 1;
} else if (sleepTime === 2) {
cupsOfCoffeeNeeded = 7;
}
Great! So now we have two conditions. The first if I sleep at 11pm and the second at 2am. Again, these are both truthy or falsy values. So they will only execute if that particular conditional evaluates to true.
Fun Fact: You can create as many
if elsestatements as you like, essentially creating a chain of conditional checks. You may also embedifstatements insideifstatements.
Moving forward, what happens if I sleep after 2am? We haven’t covered that yet. That’s when our third statement comes in “else”…
Else Statements
Else is our fallback plan. If everything goes wrong! In short - if none of our “if” or “if else” conditions were met, our “else” kicks in.
Looking back to our initial thinking example, let’s say that the bug fix did take longer than expected and I’ve stayed up all night, I’ll then have to call in sick the next day. It’s at this point we can begin to also practice our croaky voice for when we’re miraculously feeling better the next day.
If
> I go to bed before 11pm
Then
> I will only need a small coffee to wake me up
Alternatively
> I go to bed at 2am and fix that bug
Then
> I will definitely need 7 coffees and probably be late for work… again
Otherwise
> I’ve stayed up all night
Then
> I will call in sick
When converted to JavaScript we would use the “else” statement:
if (sleepTime === 11) {
cupsOfCoffeeNeeded = 1;
} else if (sleepTime === 2) {
cupsOfCoffeeNeeded = 7;
} else {
// sends the boss an email and we'll also
// be practicing the croaky voice
callInSick();
}
So there you have it. Our else statement takes no expression to evaluate, it’s the end!
We’ve successfully navigated our way through the developer brain and explored some fun conditional thinking and logic via JavaScript. If you enjoyed the post, please share it! See you in the next one.
