Basic Syntax: Control Flow

Using conditional logic to create paths in your JavaScript code.

Scroll down...




In this lesson, we'll cover JavaScript's control flow—sometimes know as flow control. But if you’re cool, you’ll call it control flow.

Codecademy Interlude

It’s once again time to run through the Codecademy lessons. Finish everything in the Control Flow section before you show your face around here again! See you soon.

Control Flow with Conditionals

The if statement is similar in both shape and behavior to the while loop. Of course, there is no looping here. If the predicate evaluates to a truthy value, then the block will be executed once. The optional else block will only be executed when the predicate evaluates to something falsy.

There is also the one-liner ternary statement, which is what happens when you drop an if/else statement into a trash compactor.

predicate ? ifTrue : ifFalse

Terse code does not always make for readable code, so be mindful when using a ternary. If any one of its three components grows to be too complicated, consider converting the whole thing back to a plain old if/else statement.

With JavaScript conditionals, just remember that you need to use explicit parentheses and brackets:

// standard IF with some nesting
if ( true || false ){
  if ( false ){
    console.log("nope, won't display");
  } else {
    console.log("this will display");
} else {
  console.log("this will not");

// one-line ternary If
var foo = true ? 1 : 0;
foo //=> 1

Switch Statements

If you find yourself using a handful of if statements whose predicates all check against the same value, then you’ll likely be better served by a switch statement. The switch statement allows you to switch paths based on the value of the predicate.

// A standard `switch`  (out of favor)
switch ( dog.breed ) {
  case "Golden Retriever":
    alert( "Good boy!" );
  case "Labradoodle":
    alert( "Go away." );
    alert( "I love you!" );


We’ve already mentioned this, but it bears repeating. There are several things inJavaScriptthat evaluate to FALSE. You only need to remember which things evaluate to FALSE and then assume anything else is true.

NaN // JavaScript's "not-a-number" variable.

// ... everything else, including:
// Everything else evaluates to true, some examples:
"0"           // the String version
"any string"
[]            // An empty array.
{}            // An empty object.
1             // Any non-zero number.

Wrapping Up

Control flow is the culprit behind complexity in code. If only every program simply needed to perform the same exact action every time, independent of any input or context, then you wouldn’t need conditionals. One could read the code from start to finish and be done with it. It would be much simpler to build a mental model of any program.

You don’t need to think too hard to anticipate the result of dropping something in a blender. A blender doesn’t have to make any decisions; whatever you put in it is going to get liquefied. The blender doesn’t even care if you give it something to blend, it’s going to keep blending the air in vain. Likewise, a program that just blends isn’t too difficult to understand or change. Should it blend faster or slower? Change the variable and walk away. There is no interlocking web of decisions and consequences to stultify you.

So control flow is a powerful thing, it is how we express decision making in programming. Just beware that decisions feed complexity.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Basic Syntax: Arrays