JavaScript
Java Script Control flow
Control flow is how the code is controlled to run. The code can be controlld using “if statement”, switch case, for loop, while loop and do while loop
If…else statement:
If condition is used to check the conditions and if true perform an action described else perform another action described. This can be represented as below
If (condition1){Action1}
Else if (condition2) {Action2}
Else {Action3}
Example1: If statement
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>JS Control flow</title>
</head>
<body>
<script>
//If else if else
var x = 10
if (x > 9) {
document.write(“x is greater than 9”)
}
else if (x == 9) {
document.write(“x is equal to 9”)
}
else {
document.write(“x is less than 9”)
}
</script>
</body>
</html>
Output:x is greater than
Switch case:
Switch compares expression with case label and executes the action described if a match is found
Switch (expression){
case label1:
action1;
break;
case label2:
action2;
break;
default:
action3
}
Example2: switch case
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>JS Control flow</title>
</head>
<body>
<script>
//Switch case
var x = 3
var y
switch (x) {
case 1:
y = “A”
break
case 2:
y = “B”
break
case 3:
case 4:
y = “C”
break
default:
y = “N/A”
}
document.write(y)
</script>
</body>
</html>
Output:C
For loop
For loop executes as long as the condition is true. The initialization and increment can also be defined
For (initialize; condition; increment){
Action
}
Example3: for loop
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>JS Control flow</title>
</head>
<body>
<script>
//for loop
for (i = 0; i < 5; i++) {
document.write(i + “<br>”)
}
const arr = [‘a’, ‘b’, ‘c’]
for (i = 0; i < 3; i++) {
document.write(arr[i] + “<br>”)
}
</script>
</body>
</html>
Output:
0
1
2
3
4
a
b
c
While loop
The while loop runs while the condition is true. It runs as long as the condition is true
While (condition){
Action
}
Example4: While loop
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>JS Control flow</title>
</head>
<body>
<script>
//While
i = 0
while (i < 3) {
document.write(i + “<br>”)
i++
}
//this block will not run as i is not greater than 2
i = 0
while (i > 2) {
document.write(i + “<br>”)
i++
}
</script>
</body>
</html>
Output:
0
1
2
Do while loop
The do while loop is same as while loop, but the condition is checked after execution.
Do{
Action
} while (condition)
Example5: Do while loop
<!DOCTYPE html>
<html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta charset=”utf-8″ />
<title>JS Control flow</title>
</head>
<body>
<script>
//Do While
i = 0
do {
document.write(i + “<br>”)
i++
} while (i < 3)
//condition is checked after writing
i = 0
do {
document.write(i + “<br>”)
i++
} while (i > 2)
</script>
</body>
</html>
Output:
0
1
2
0