JavaScript Quiz #07 - Understanding Control Flow in JavaScript

Let's explore the different control flow statements in JavaScript and test the understanding with a quiz.

Follow us on
MediumHashnode

Control flow in JavaScript determines the order in which statements are executed. In this article, we will explore the concept of control flow, including conditional statements, loops, branching techniques, and additional control flow features.

1. Conditional Statements:

  • Conditional statements allow making decisions based on conditions.

  • Common conditional statements: “if,” “else if,” and “else.”

if (condition1) {
 // code executed if condition1 is true
} else if (condition2) {
 // code executed if condition1 is false and condition2 is true
} else {
 // code executed if both condition1 and condition2 are false
}

2. Switch Statements:

  • Switch statements offer an alternative to multiple if-else statements.

  • They evaluate an expression and execute code based on its value.

  • Useful for testing specific values or performing different actions.

switch (expression) {
 case value1:
 // code executed if expression matches value1
 break;
 case value2:
 // code executed if expression matches value2
 break;
 default:
 // code executed if expression doesn't match any case
 break;
}

3. Loops:

  • Loops allow repetitive execution of code.

  • Types of loops: “for,” “while,” and “do-while.”

for (let i =0; i< 10; i++) {
 // code executed repeatedly until condition becomes false
}

while (condition) {
 // code executed repeatedly while condition is true
}

do {
 // code executed at least once and repeatedly while condition is true
} while (condition);

4. Branching Techniques:

Ternary Operator:

  • A concise way to express conditional statements in a single line.

  • Evaluates a condition and returns one of two values.

const result = (condition) ? value1 : value2;

Short-Circuit Evaluation:

  • Uses logical operators “&&” and “||” to conditionally execute code.

  • Relies on truthy or falsy values to determine evaluation.

const value = someVariable || defaultValue;

5. Additional Control Flow Features:

Continue Statement:

  • Used within loops to skip the current iteration and move to the next one.
for (let i = 0; i < 5; i++) {
 if (i === 2) {
 continue; // Skips iteration when i equals 2
 }
 console.log(i);
 }
 // Output: 0, 1, 3, 4

“fallthrough” in Switch Statements:

  • In JavaScript, switch statements have implicit “fallthrough” behavior by default.

  • If a matching case block doesn’t have a “break” statement, execution continues to the next case block.

  • To prevent a “fallthrough,” the “break” statement is used to exit the switch statement.

switch (expression) {
 case value1:
 // code executed if expression matches value1
 break;
 case value2:
 // code executed if expression matches value2
 // fallthrough to the next case intentionally
 case value3:
 // code executed if expression matches value2 or value3
 break;
 default:
 // code executed if expression doesn't match any case
 break;
 }

Control flow is essential in JavaScript for making decisions, repeating tasks, and navigating code execution paths.

Quizzes

1. What is the output?

for (let i = 0; i <= 5; i++) {
  if (i === 3) {
    continue;
  }
  console.log(i);
}

A) 0 1 2 3 4 5

B) 0 1 2 4 5

C) 0 1 2 4

D) 0 1 2 3 4

Answer: B) 0 1 2 4 5

During each iteration, the code checks if i is equal to 3. If it is, then continue the statement is executed, skipping the current iteration

2. What is the output?

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

A) 0 1 2

B) 0 1

C) 0 1 2 3

D) 1 2

Answer: A) 0 1 2

3. What is the output?

const value = null || "Default";
console.log(value);

A) null

B) “Default”

C) true

D) false

Answer: B) “Default”

null is considered falsy in JavaScript. Since the left operand is falsy, the expression moves to evaluate the right operand, which is the string "Default". The string is a truthy value, so it is returned as the final value of the expression.

4. What is the output?

let num = 5;
const result = num && "Value exists";
console.log(result);

A) 5

B) “Value exists”

C) true

D) false

Answer: B) “Value exists”

In this case, the left operand num has a truthy value (since it is a non-zero number). Therefore, the expression moves to evaluate the right operand, which is the string "Value exists". The string is also a truthy value.As a result, the expression num && "Value exists" returns the right operand, which is the string "Value exists"

5. What is the output?

let num = 3;
while (num > 0) {
  console.log(num);
  num -= 2;
}

A) 3 1

B) 3

C) 3 0

D) 3 2 1

Answer: D) 3 1

6. What is the output?

const value = "" || 0 || false || "Fallback";
console.log(value);

A) “ ”

B) 0

C) false

D) “Fallback”

Answer: D) “Fallback”

The logical OR operator (||) performs short-circuit evaluation. It returns the first truthy operand encountered or the last falsy operand if all operands are falsy. In this case, the first three operands ("", 0, and false) are falsy, and the last operand, "Fallback", is the first truthy operand. Therefore, the value assigned to value will be "Fallback".

7. What is the output?

const a = 5;

function foo() {
  if (a === 5) {
    let a = 10;
  }
  console.log(a);
}

foo();

foo();

A) 5

B) 10

C) undefined

Answer: A) 5

The variable a inside the if block is block-scoped using the let keyword, so it does not affect the value of the outer a variable. Therefore, when console.log(a) is executed, it refers to the outer a, which is assigned the value of 5.

8. What is the output?

let x = 0;
while (x < 10) {
  if (x === 5) {
    break;
  }
  x++;
}
console.log(x);

A) 5

B) 6

C) 9

D) 10

Ans: A) 5

The code initializes x with 0 and enters a while loop that continues as long as x is less than 10. Inside the loop, it checks if x is equal to 5. If so, the break statement is executed, terminating the loop. Therefore, the final value of x is 5.

9. What is the output?

let x = 2;
let result = '';
switch (x) {
  case 1:
    result += 'A';
  case 2:
    result += 'B';
  case 3:
    result += 'C';
  default:
    result += 'D';
}
console.log(result);

A) AB

B) ABC

C) BCD

D) BD

Answer: C) BCD

In this switch statement, since the value of x is 2, it matches the case 2 label. When a matching case label is found, the code block for that case is executed, as well as the code blocks for any subsequent cases without a break statement so the flow continues till default printing BCD.