DEV Community

loading...

Ways to control flow...

Frankie
・2 min read

Today, I'm gonna talk about how to control the flow of your code. Since I'm more of a JavaScript developer, all of the examples are going to be in JavaScript.

When I started up as a self taught developer, the first thing I was taught about was if and else. This is the simplest of control options. It usually shakes out to something like...

let a = 10;

if (a >= 10) {
  alert('yippee');
} else {
  alert("guess it's not quite 10");
}
/* will alert 'yippee' */
Enter fullscreen mode Exit fullscreen mode

I'm sure this is something several beginner/junior developers have seen before.

My step 2 was the Conditional Operator, or Ternary Operator. This is a short hand for the above example.

let a = 11;

a === 10 ? alert('heck yeah!') : alert('whomp whomp');
/* will alert 'whomp whomp' */
Enter fullscreen mode Exit fullscreen mode

I like this because of how clear and succinct it is. It is useful in situations where all you need to check is if a statement is or isn't.

But it's important to know when you should use one. A switch statement is always going to be better at being a switch statement than other control flow methods. For example, you can nest an if else if you need to, but if you start nesting Ternary Operators without care, things are going to get hairy really quickly .

The final one I learned about is called a Short Circuit Evaluation. This is probably the most succinct of flow control. I think I once heard it described as more of a glitch than an intended feature.

let a = 10;

/* If true, evaluate next statement */
a === 10 && alert('* air horn noise *');
/* If false, evaluate next statement */
a === 10 || alert('* slowly dying air horn noise *');
/* will alert '* air horn noise *' */
Enter fullscreen mode Exit fullscreen mode

This works because a conditional statement, anything that tests for a logic outcome, returns true or false (or undefined or any other number of options, but lets ignore that for now). By placing && after one of these conditions, the "computer" sees that as 'if the last thing evaluated to true, you need to evaluate the next statement.'

The inverse of this, ||, will basically try the opposite. If the statement you just evaluated was false, you need to evaluate the next statement.

This is really nice for some of the functional programming I've done recently.

function runIfMoreThanTen(num) {
    return num > 10 && alert('woohoo');
}
Enter fullscreen mode Exit fullscreen mode

What I'm basically saying is, 'As long as num is more than 10, run the alert, otherwise return false.'

So essentially I wrote this:

function runIfMoreThanTen(num) {
    if (num > 10) {
        return alert('woohoo');
    }
    return false;
}
Enter fullscreen mode Exit fullscreen mode

Which one is better? It doesn't matter. I have had coworkers who love code golfing, which I have dabbled in myself, and will use Short Circuit all the time. When I'm on the job, I don't think it is helpful to use things like Short Circuit. It requires a little more brain power and raises the barrier to entry for you codeb-ase. There are use cases, it's useful in React (or at least that was the first example I saw of it).

I hope that this gave a little bit better of an understanding of how to control flow in simple and succinct ways!

Discussion (0)