How to use control flow in javascript
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-06-27 20:28:33

When you are programming in Javascript. The lines of code are executed line by line. In order to create useful programs, we will need to learn to intercept this flow of execution and go another direction or even restart in the same direction. 

This is referred to control flow and is made up of a combination of operators, conditionals and/or loops. Let's take a look at how these parts help to control the flow in your Javascript code. 

#### Operators 

Operators are tests for the truth or false values of variables.

*Userful Operators*

operator: ==  description: equal to
```javascript 
const x = 11
x == 11
// returns true 
```

operator: ===  description: equal value and type

```javascript 
1 === '1'
// returns false 
```

operator: !=  description: not equal to

```javascript 
12 != 8
// returns true 
```

operator: <  description: less than

```javascript 
6 < 7
// returns true 
```

operator: >  description: greater than

```javascript 
7 > 6
// returns true 
```

operator: &&  description: logical and 

```javascript 
(7 > 6) && (12 != 8)
// returns true 

(7 > 6) && (12 == 8)
// returns false 
```

operator: ||  description: logical or 

```javascript 
const y = 5
(7 > 6) || (y > 7)
// returns true 

(y < 4) || (2 == 2)
// returns true 
```

#### Conditionals

Statements in code that execute and find out the truthiness value and can be identified by the following: 

if statement
``` javascript
if(statement == true) {
  console.log("execute this code when true")
}
```

else statement
``` javascript
if(statement == true) {
  console.log("execute this code true")
} else {
  console.log("execute this code when false")
}
```

else if statement
``` javascript
const color = "orange"
if(color === "blue") {
  console.log("execute this code when true")
} else if(color === "yellow") {
  console.log("execute this code when true")
} else {
  console.log("execute this code when false")
}

// returns "execute this code when false"
```
#### Loops 

A loop is a way to execute a block of code several times.

The most common loop is the for loop.

for loop
```javascript
const fruits = ["apples", "peaches", "plums"]

for(let i = 0; i < fruits.length; i++){
  console.log("I love " + fruits[i])
}

// returns 
I love apples
I love peaches
I love plums
```

#### Control flow in action

```javascript
// Now let's put this all together

const grades = [75, 44, 92, 98]

for (let i = 0; i < grades.length; i++){
 if(grades[i] > 70){
    console.log("congrats, you passed!")
  } else {
    console.log("sorry, you failed!")
  }
}

// returns 
congrats, you passed!
sorry, you failed!
congrats, you passed!
congrats, you passed!
```

#### Learn More 
[Control flow](https://developer.mozilla.org/en-US/docs/Glossary/Control_flow)

[Ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

[Loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)

#### Let's chat about control flow
We learned about flow control in javascript by using conditionals, operators and loops. If you enjoyed this post feel free to leave a comment about your experience working with control flow in your applications.

Happy Coding,
Terry Threatt