Control structures in JavaScript - Part 1

We are going to learn about control structures in JavaScript using some cool analogies. Whether you are a coding newbie or a seasoned pro, there's something for everyone here.

Just a heads-up: please don’t hate Dora(from Dora the Explorer), this is the best analogy I could come up with! 😅😅

What we gonna learn?

• what is a control stucture in JavaScript?
• Different types of control structures:
  • Conditional statements
  • Loop statements
  • Jump statements
• Things to remember before using the switch statement
• Differences between if/else...if and switch statement

---

Control Structure in JavaScript:

JavaScript is nothing more than a sequence of statements executed in the order they are written. This default order of execution is linear, meaning line by line. Control structures interrupt or change this flow of execution.

Statement in Javascript is a line or command that makes something to happen.

We can catergorize control structures in javascript into 3 types:

1. Conditional Statements
2. Loop statements
3. Jump statements

We will look into each of these in detail. But first, for better understanding of control structures, let’s use an analogy: think of statements in code as places and the JavaScript interpreter as a visitor.

According to this analogy we can assume that intepreter travels from one line to another in a linear path, visiting all the places.

With this example, let’s explore each type of control structure in JavaScript

---

1. Conditional Statement:

Conditional statements in JavaScript are a part of control structures that execute or skip a block of statements based on a condition.

Statement block - Just like how we can combine simple expressions to create complex expressions, we can combine simple statements together to form a single compound statement enclosed in curly braces.

• A compound statement allows the use of single statement when JavaScript expects a syntax with single statement.

If we use the analogy of statements being places and the interpreter being a visitor, we can think of conditional statements as scenarios where the interpreter visits places only when certain conditions are met.

Instead of visiting in a linear way, the interpreter can skip places when a condition is not met.

It's like in Dora the Explorer(See, i told you all😃), where Dora has to stop at each place to find the clues to proceed further. There are multiple places to visit, but Dora has to follow the path the clues lead to; these clues are the conditions here.

So, the interpreter begins its journey by visiting places in a linear way, executing each line. Then it comes across a conditional statement, evaluates the expression, and based on the result, decides which path to take.

Hoping you got my example, let's understand the syntax for writing conditional statements and the different types of conditional statements in JavaScript.

SYNTAX:

• Conditional expression(clues) - This expression evaluates to a boolean value.
• Statement block(places) - block of code wrapped in curly braces {}.

Types of Conditional Statements in JavaScript:

1. if statement
2. if/else statement
3. if/else...if statement and
4. switch statement

1. If Statement: The simplest form of a conditional statement in Javascipt, if the conditional expression evaluates to true, the code block is executed, if false the intepreter skips the entire if block and continues with next statement in line.

Analogy: It’s simple, Dora gets to visit her favourite place only when she finds the map as a clue for that place; otherwise, she has to continue her journey on a linear path😔.

if(true){
  "Yayy! Dora gets to visit this place"
}

2. if/else Statement: Similar to the if statement but with an additional else block, if the condition evaluates to true, the if block of code is executed; otherwise, the else block of code is executed.

Analogy: Dora is given an option, if she finds map, she gets to visit her favourite place. Otherwise, we're so forgiving(🙂) that we let her visit a different place by default, so she still gets to visit somewhere💃.

if(true) {
  "Dora gets to visit her favourite place"
} else {
  "Even if she can't find the map, we let her visit this place🙂"
}

3. if/else…if statement: Just like how if block takes a condition expression, each els..if blocks takes conditional expression as well. The interpreter evaluates each expression and executes the first block whose expression evaluates to true. The else block is a default block executed when no conditional evaluates to true.

Analogy: Dora has many favourite places, she is given the option to search for the map for each place individually, she gets to visit the first place she finds the map for. If no map is found for all her favourite places, she can still visit the default place.

if (condition1{
  "Dora gets to visit her favourite place1 if she finds the map for this place"
} else if (condition2) {
  "Dora gets to visit her favourite place2 if she finds the map for this place"
} else if (condition3){
  "Dora gets to visit her favourite place3 if she finds the map for this place"
} else {
  "When no map is found, she still gets to visit this place as the final option" 
}

4. Switch statement: when we want single expression to be matched against multiple case expression values, we use the switch statement.

Analogy: Dora has many favourite places, and she gets to pick the map only once. If there exists a place that matches the map, she gets to visit it, otherwise, if there is default place, she gets to visit that. If no default and no matching map found, she has to continue with her journey on the linear path.

swithch(key){
  case value: {
    //code block 1
    break;
  } case value: {
    //code block 2
    break;
  } default: {
    //fallback code block
    break;
  }
}

• key is the expression that is evaluated and matched against each value of the case. The first to match will be excuted.
• Having break statement within each case block is important for the interpreter to exit the statement. Omitting the break will cause the interpreter to continue evaluating next case block in line, even when the case value doens’t match against the key.This behaviour is called “fall-through”
• default is an optional block added at the end(it can be anywhere but end makes sense), Similar to else block of the if/else statement.It acts as a fallback code when none of the key expressions match against the case value.

Things to remember before using Switch:

• It is better to wrap each case block in curly braces. This creates its own block scope so that variables from one case block don’t spill into another case block.
• Keep case value expressions static, the idea is to make the switch statement as predictable as possible.
• Use the return statement which the switch statement is used within a function to exit the code instead of the break statement.

Difference between if/else…if and switch statement:

• if/else..if statement takes multiple conditional expressions, and each condition is evaluated in line. The first block with a condition that evaluates to true is executed.

• In the case of the switch statement, the key expression is evaluated first, and the control is transferred to the first case block whose value match against the key expression. The case value needs to be static without any side effects, as each case expression is not evaluated each time.

• The main point here is when we want to match single evaluated expression against static value, we use switch statement. When we want to evaluate each expression independently from one another, we use an if/else…if statement.

In this part, we've explored how conditional statements work in JavaScript, using the helpful analogy of Dora the Explorer and her quest for clues. We've covered the if, if/else, if/else…if statements, as well as the switch statement. With these understandings, you're well on your way to mastering JavaScript control flow.

Remember to practice and apply this knowledge by coming up with interesting scenarios where these control structures might come in handy.

In the next part of this blog, we'll dive deeper into the world of control structures by exploring loop and jump statements. Stay tuned!👋

For deeper understanding you can refer to MDN Documentation