JavaScript ES6 Control Flow
Control flow allows you to conditionally run blocks of code based on a set of rules. By using control flow statements like if...else and switch, you can write functions that make decisions based on certain conditions being met. In this tutorial, we'll explore the basic control flow statements including examples and use cases for each.
if
let x = 0
if(x == 0){
console.log("x is zero!")
}
//logs "x is zero!"
This is the most basic control flow statement. It allows you to run a block of code if a certain condition is met. In the example above, we execute the code block console.log("x is zero!") only if the condition x == 0 is met.
if...else
let x = 1
if(x == 0){
console.log("x is zero!")
}
else{
console.log("x is not zero!")
}
//logs "x is not zero!"
In an if...else statement, the code block in the else clause gets executed only if the if condition is not met. In the example above, the else block gets executed because the variable x does not equal 0.
else...if
let x = 2
if(x == 0){
console.log("x is zero!")
}
else if(x == 1){
console.log("x is one!")
}
else {
console.log("x is neither zero or one!")
}
//logs "x is neither zero or one!"
The else...if clause works the same way as if..else and allows for an infinite number of conditionals. Notice how we still use an else clause as a "catch all" for any value of x that doesn't meet the if conditionals. While this isn't required, it's good practice to account for all scenarios.
switch
let a = 0
switch (a + 1){
case 0:
console.log("hello")
break
case 1:
case 2:
console.log("goodbye")
break
case 3:
console.log("adios")
break
ddefault:
console.log("no cases match")
}
//logs "goodbye"
The switch statement is a bit different than if..else and takes some getting used to. You'll notice a condition is first defined, in this case (a + 1). Inside the code block, the case keyword is used along with an expected value. If the condition evaluates to the expected value, then the code for that case executes.
For example, if the expression (a + 1) evaluates to 3, then "adios" will be logged.
Notice how case statements can be grouped together. In this example, case 1 and case 2 share the same execution. If the expression evaluates to either 1 or 2, "goodbye" will be logged.
The break keyword
Notice how we use the break keyword. By using break, you stop the code block from executing more than it needs to. In the above example, we don't have to evaluate the last two case statements since our expression (a + 1) evaluates to 1. While break isn't necessary, it prevents unnecessary execution in switch statements.
The return keyword
We can optionally define a default case as a "catch all". If we omit the default case and none of the case statements match our expression, then the switch statement simply returns undefined.
switch vs if..else
Switch statements can save you a lot of code when you have multiple conditions to check for. If we were to convert our above switch statement example to if...else, it would look like this:
if(a + 1 == 0){
console.log("hello")
}
else if(a + 1 == 1){
console.log("goodbye")
}
else if(a + 1 == 2){
console.log("adios")
}
else {
console.log("no cases match")
}
While the end result is the same, we have to repeat ourselves more with the if...else approach.
Switch statements also have a performance advantage over if...else however if...else statements are easier to read.
Conclusion
Control flow is central to implementing logic in your JavaScript code. Next we'll be looking at classes in JavaScript.
