⭐ Controlling Flow JS
In JavaScript, control flow is the order in which statements are executed. Think of it as the "path" the JavaScript interpreter takes as it runs your code. Normally, code executes sequentially, from top to bottom. However, control flow statements allow us to change this default behavior, enabling us to write more dynamic and complex programs.
Conditional Statements
Allow you to perform various actions based on various conditions.
if ... else statements
The if and else statements evaluate and expression and then run one block of code if the expression is truthy and another block of code if it's falsy.
Ternary Operator
- A ternary operator is a concise way to express a conditional if ... else statements in one line of code.
- The Ternary operator can only be used with two conditions
if ... else
let isNightTime = true;
if (isNightTime) {
console.log('Turn on the lights!');
} else {
console.log('Turn off the lights!');
}
Ternary Operator
let isNightTime = true;
isNightTime ? console.log('Turn on the lights!') : console.log('Turn off the lights!');
Switch Statements
If your code needs to decide between more than two outcomes, use switch statements.
switch(expression){
case x:
// code to run when expression === x
break;
case y:
// code to run when expression === y
break;
default:
// code to run if nothing else matches expression
}
```
### Making Loops
Imagine that you want to write a program to count to 100 and output each number
to the browser console. One way (one very tedious and inefficient way, I should
say) would be to write 101 statements, like this:
prefix notation
The ++ operator before the variable (x) first increments the value of x by 1, and then returns the incremented value.
```javascript
let x = 0;
console.log(++x);
console.log(++x);
console.log(++x);
console.log(++x);
output: 1,2,3,4
```
postfix notation
The ++ operator after the variable (x) first returns the current value of x, and then increments the value of x by 1.
```javascript
let x = 0;
console.log(x++);
console.log(x++);
console.log(x++);
console.log(x++);
output: 0,1,2,3
```
To make repeating statements easier, JavaScript provides several different types of looping statements, including these:
- for
The for loop is usually used to loop over code a predetermined number of times.
Uses initialization, condition, and final expression to loop.
Example: A for loop to do the counting to 100
```javascript
for(let i=1; i <= 100; ++i) {
console.log(i); }
```
### for ... in
The for ... in loop iterates over the properties of an object and the properties it
inherits from its parent object. B
### for ... of
The for ... of loop creates a loop by iterating over any iterable object. What's an iterable object, you ask? An iterable object is an object that can be iterated over.
Examples of iterable objects include arrays and strings.
Example:
```javascript
const pets = ['cat', 'dog', 'chicken'];
for (let pet of pets) {
console.log(pet);
output:
cat
dog
chicken
}
```
```javascript
let text = "mom";
for (let character of text) {
console.log(character);
}
output:
m
o
m
```
### do ... while
The do...while loop executes the code block at least once, and then it evaluates the condition.This means the code block inside a do...while loop will always run at least one time, regardless of the initial state of the condition.
**"Do this at least once, and continue doing it as long as this condition is true."**
- Use when you need to check a condition before potentially executing a code.
### while
The while loop evaluates its condition before executing the code block inside the loop.If the condition is initially false, the code block within the while loop will never be executed.
- Use when you need to guarantee that a block of code runs at least once, even if the condition is initially false.
- Presenting a menu to a user and ensuring they see it at least once before a condition (like choosing to exit) is checked.
- Implementing input validation where you want to prompt the user for input at least once before checking if it's valid.
### break and continue statements
The break and continue statements can be used to interrupt the execution of a loops
- *Break* causes the current loop or control statement to exit.
- *Continue* halts execution of the current iteration of the loop and goes directly to the next one.
``` javascript
let phoneNumber = "555-757-1212";
for (let digit of phoneNumber) {
if (digit==='-') continue;
console.log(digit);
}