# Control Flow in JS

If you are coming from a programming language other than JS then the blog would be really beginner level for you, but if you are someone who has just got his hands dirty in the coding journey, this would be a fun and important concept.

Every thing is made of small particles called as atoms, this is true for a software as well, all the code in the application is made up of control flow. Control flow is nothing but a simple decision making job which decides what operation needs to be performed and what operation could be skipped.

It is similar to when you have a lot of options that you could do, like reading this blog, or scrolling through instagram, and you decide to do some mindless scrolling 😭. (Just kidding). So you make a decision either this or that from the two.

In this blog, we would be understanding how we could do the same thing (making decision) in JS.  

## If Statement

The If statement does what it sounds link, i.e. If something then only do something.

```javascript
const isFun = true;

if(isFun){
  console.log("JS is fun")
}

if (isFun) console.log("JS is fun without braces")
```

The if statement executes the code inside it only when the condition inside the parenthesis after the if keyword is `true` .

If there is only a single line that needs to be executed when the if is successful, then in that case you can avoid using the braces and if does it job, however it decreases readability and if you are my coding partner, then we wont be doing that.

## Else Statement

The counterpart of the If statement is the else statement, whose job is to execute things when if fails the conditions.

```javascript
const age = 16;

if(age>=18){
  console.log("Eligible to vote");
} else {
  console.log("Not eligible to vote yet");
}
```

![](https://cdn.hashnode.com/uploads/covers/67823bcd55fb474454c96e0b/815e65aa-8962-49d7-87b8-c85a444022f7.png align="center")

You can have an `else` statement only when you have `if` used earlier.

## If-else Statement

There are times when you could have more than two conditions that need to be handled. One way to do that is through nested checks, Example below:

```javascript
let age = 20;
let hasID = true;

if (age >= 18) {
    if (hasID) {
        console.log("You can enter the club");
    } else {
        console.log("You need an ID to enter");
    }
} else {
    console.log("You are too young to enter");
}
```

Looking at the above example you might think it to be simple, but when the logic has more factors on which it depends, you can be in a nested hell which would decrease readability by a lot, so it is often considered a good practice to use if else-if style of control flow.

![](https://cdn.hashnode.com/uploads/covers/67823bcd55fb474454c96e0b/598ae356-204f-40db-a8d0-9aff6c81a290.png align="center")

```javascript
let age = 20;
let hasID = true;

if (age < 18) {
    console.log("You are too young to enter");
} 
else if (age >= 18 && !hasID) {
    console.log("You need an ID to enter");
} 
else {
    console.log("You can enter the club");
}
```

## Switch Statement

The switch statement is used to choose one block of code from multiple possible options based on the value of a variable or expression. You can say it to be a cleaner alternative to many if ... else if conditions where you are simply checking one value against several cases.

```javascript
let day = 2;

switch (day) {
  case 1:
    console.log("Monday");
    break;

  case 2:
    console.log("Tuesday");
    break;

  case 3:
    console.log("Wednesday");
    break;

  default:
    console.log("Invalid day");
}
```

### How Switch Works:

*   The value of `day` is checked.
    
*   JavaScript compares it with each `case`.
    
*   When a match is found, that block runs.
    
*   `break` stops the switch from checking further cases.
    
*   `default` runs if no case matches.
    

Without `break`, execution falls through to the next case.

```javascript
switch (1) {
  case 1:
    console.log("One");
  case 2:
    console.log("Two");
}

//output:
//One
//Two
```

## When to use what ?

Introducing if..else if and switch statements might seem confusing to a few, because both seem as a good option but it depends on the type of condition you are checking

1.  Use switch when checking one variable against many fixed values
    
2.  use if-else if when conditions are complex i.e. involves range, or multiple variables involved.
    

## Common Mistakes while using Switch (Bonus)

This blog was to introduce you to the control flow in JS, but when I started using them, even I used to do some common mistakes such as:

1.  Forgetting `break` (Fall-through problem): If you don't use break, execution continues into the next case.
    

```javascript
let x = 1;

switch (x) {
  case 1:
    console.log("One");
  case 2:
    console.log("Two");
    break;
}

//Output:
//One
//Two
```

2.  Comparing different types : switch uses strict equality(===), means types must match.
    

```javascript
let x = "1";

switch (x) {
  case 1:
    console.log("Number 1");
    break;

  case "1":
    console.log("String 1");
}

//Output
//String 1
```

3.  sometimes we want that for multiple conditions similar thing to be done, in such a case, I used to repeat the same code block for different cases.
    

```javascript
switch (day) {
  case "Saturday":
    console.log("Weekend");
    break;

  case "Sunday":
    console.log("Weekend");
    break;
}
```

We can use the concept of fallback and avoid code repetition:

```javascript
switch (day) {
  case "Saturday":
  case "Sunday":
    console.log("Weekend");
    break;
}
```