DEV Community

Cover image for Flow control using JS
Manu Martinez
Manu Martinez

Posted on

Flow control using JS

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

if (condition) {
 // run here is condition is true
} else {
 // run here is condition is false
}
Enter fullscreen mode Exit fullscreen mode

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:

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

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.
// It returns true due to both sides are true.
true===true
Enter fullscreen mode Exit fullscreen mode
  • OR ||: It means that at least one of the conditions must be true to get a final true:
// it returns true due to at least one side is true
true || false
Enter fullscreen mode Exit fullscreen mode

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

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

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.

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;]
}
Enter fullscreen mode Exit fullscreen mode

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:

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');
}
Enter fullscreen mode Exit fullscreen mode

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

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.');
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)