Flow control using JS
Tags: javascript, beginners, webdev, tutorial
Published: 2021-12-28 07:38:30

Yes, it's one of the most **important topic** when you are learning how to **write** code with **JS** 🤔

First, you need to understand what does it mean, what is exactly _flow control_, when your code needs to take a decision about which sentence should be run it's made with **FLOW CONTROL** 😇. There are different methods to control flow using JS, let's going to see some examples: 

## if - else clause

This is the most **typical** one, it gives us a lot of control about code execution, we can _decide_ which code should be run

```js
if (condition) {
 // run here is condition is true
} else {
 // run here is condition is false
}
```

This is the _basic syntax_ you must use 😁, it's really easy, you have a condition which is evaluated and depending on that you will run one side or **another**. **OMG!!** Yes, it gives us a lot of power. Let's try one more example:

``` js
const myMum = "Maria";
if (typeof myMum === 'string') {
 console.log("My mum contains a string");
} else {
 console.log("My mum is not a string");
}
```

As you have just seen, this code checks if this `const` is a `string` and run the following sentences according to the condition, **obviously** this condition is `true`, the you will see `My Mum contains a string` in your `console` 😇. 

Moreover you are able to evaluate multiple conditions using `logic operators`, AND `&&` and OR `||`. 

- AND `&&`: It means that all the conditions must be true due to `true` of the entire condition. 

```js
// It returns true due to both sides are true.
true===true
```

- OR `||`: It means that at least one of the conditions must be true to get a final `true`:

```js
// it returns true due to at least one side is true
true || false
```

It gives us more powerful tools to check multiple conditions using the same `if` clause 🤖

```js
const myMum = "Maria";
if (true && typeof myMum === 'string') {
 console.log("My mum contains a string");
} else {
 console.log("My mum is not a string");
}
```

As you have just seen, it will print `My mum contains a string` because two conditions are true and I have used an **AND** logic port. 
I recommend you to practise some conditions using JS to **understand better** ☺️ how to use that.

## Switch-case clause

It allows you to check multiple _static_ conditions and take decisions depending on that value.

```js
switch (condition) {
  case valor1:
    // It will run when the conditions is match `valor1` 
    [break;]
  case valor2:
    // It will run when the conditions is match `valor2` 
    [break;]
  ...
  case valorN:
    // It will run when the conditions is match `valorN` 
    [break;]
  default:
    // It will run when all the conditions are false
    [break;]
}
```

It has a lot of power and bring us the opportunity to check **multiple possible values** easily, instead, we can use multiple `if-else` clauses, but your code will not be legible 🤒. It comes to bring us more **organisation** when we need to check conditions that can take a lot different values, Let's see an example: 

```js
const foo = 0;
switch (foo) {
  case -1:
    console.log('1 negative');
    break;
  case 0: // foo is 0, then the following block will be run
    console.log(0)
  break; // Break allow us not to run case1
  case 1: 
    console.log(1);
    break; // Break allow us not to run case2
  case 2:
    console.log(2);
    break;
  default:
    console.log('default');
}
```

Moreover, you can run the same for conditions that need to perform the same **action**, let's see an example: 

```js
const animal = 'giraffe';
switch (Animal) {
  case 'Dog':
  case 'giraffe':
  case 'Cat':
  case 'Bird':
    console.log('This animal will live.');
    break;
  case 'elephant':
  default:
    console.log('This animal will not.');
}
```

As you have just seen, we will take the same action if animal math **one of the four** case exposed 😇.

Here you have seen how to check conditions and how to make your code take **decisions** in execution time about possible values of your **expressions**.  

That's all for _today_ post!!!

If you really like our post, please don't forget to share with your friends and give us some likes, it'll help us to grow more and get more **advance** content 👨🏼‍💻 to this blog.