Flowchart Conditionals

What, Why, and When

Conditionals control behavior in JavaScript and determines whether or not pieces of code will or will not run.

Using conditionals in your websites and webapps will make it far more dynamic.

Let's say you want to check if someone is taller than 4'8". If they are taller than 4'8", then you will allow them on the roller coaster. If they are not, you'll have to regretfully turn them away. That's a conditional! What if you only want to display a discount at checkout if the user provided a valid discount code? That's another conditional!

Flowchart Conditionals

Loops and listeners allow us to control the flow of our program.

So far we've learned two control flow statements - loops and event listeners.

  • Loops allow us to perform the same operation(s) over and over simultaneously.
  • Listeners allow us to define operations that will only run once an event (like a button click) takes place.

Both of these tools allow us to control the order in which operations take place.

There's one more control flow operation that we need to cover - conditionals.

Conditionals allow us to run a certain set of operations only if a certain condition is met. Imagine again that we are building a login page. We only want to grant users access if their username and password match a username/password pair in our database. This requires a conditional.

Any time you are talking through a programming problem and you say if you probably need a conditional.

Conditionals often involve a comparative operator like >, <, or ===.

This is how we represent a conditional in a flowchart.

If num equals 10, we display "best number", otherwise we display "other number".

Remember that = is the assignment operator in JavaScript and assigns a value to the variable on the left. === is the equality comparator and checks to see if two values are equal.