JavaScript Loops and Conditions: if/else, switch, for & while

What are Conditional Statements?

Conditional statements in JavaScript allow you to execute code based on a condition using if, else if, else, or switch.

They help make decisions in your code and control its flow based on Boolean conditions.

• if executes a block of code if the condition is true.

  Advertisement

• else if executes a block if a previous if condition was false and a new condition is true.

• else executes a block if all previous conditions are false.

• A switch is used to handle multiple conditions based on the value of a variable.

Playwright Automation Use Cases

• Validate whether an element is visible or enabled before interacting.

• Handle dynamic test scenarios such as login success or failure.

• Run different steps based on the environment or page state.

Using conditional statements ensures tests don't fail unexpectedly and can handle dynamic UI behavior.

if vs else if vs else

• if — checks a condition; if true, executes its code block.

• else if — checks another condition if the previous if/else if was false. Multiple else if blocks can exist.

• else — executes code if all previous conditions fail.

Real-life Example

• if → take an umbrella if raining.

• else if → take sunglasses if sunny.

• else → go without accessories if neither.

Real-time Testing Example

• if → click the login button if visible.

• else if → click an alternative button if the main button is missing.

• else → log a warning if neither button is found.

In my Playwright tests, I checked if a primary login button exists using if, an alternative using else if, and logged an error using else.

The switch Statement

A switch statement evaluates an expression and executes code based on matching case values, with an optional default block.

It's often used instead of multiple if/else-if statements to keep code cleaner.

switch (expression) {
  case value1:
    // code to run
    break;

  case value2:
    // code to run
    break;

  default:
    // code to run if no case matches
}

Key Points

• break prevents fall-through to the next case.

• default executes when no cases match.

Real-life Example

Selecting an action based on the day of the week:

• Monday → Work

• Saturday → Relax

• Sunday → Family time

Playwright Automation Use Cases

• Perform different steps based on the environment (QA, Staging, Production).

• Handle multiple UI scenarios dynamically.

• Replace multiple if/else-if statements with cleaner, more readable code.

In my Playwright project, I used a switch statement to run environment-specific setup steps for QA, Staging, and Production.

Truthy and Falsy Values

In JavaScript, values are treated as either truthy (evaluated as true in a boolean context) or falsy (evaluated as false).

Understanding these is important when writing conditions because a condition doesn't need to be strictly true/false—any truthy or falsy value works.

This is useful in Playwright when checking whether data, elements, or values exist before acting on them.

Types of Loops in JavaScript

JavaScript provides several loops:

• for

• for...of

• for...in

• while

• do...while

• forEach

for Loop

A traditional loop using an index.

for...of Loop

Iterates over array values.

for...in Loop

Iterates over object keys.

while Loop

Executes code while a condition is true.

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

do...while Loop

Executes code at least once, then checks the condition.

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

forEach (Array Method)

Executes a function on each array element.

urls.forEach(async url => await page.goto(url));

In my Playwright project, I used for...of to visit multiple URLs and for...in to iterate over object-based user credentials.

for vs while vs do-while

Real-life Example

• while → continue watering plants until the soil is wet.

• do-while → check and take medicine at least once, then repeat if needed.

Real-time Testing Example

In Playwright, I used:

• for to visit multiple URLs.

• while to wait until a modal appeared.

• do-while to retry clicking a submit button until it succeeded.

The for...of Loop

The for...of loop iterates over iterable objects, such as arrays, and provides direct access to their values.

It is simpler and cleaner than a traditional for loop for arrays, and it simplifies iteration when the index is not required.

In Playwright, it is used to iterate over multiple URLs, data sets, or credentials—for example, to visit all environment URLs in a data-driven test.

In my Playwright project, I used for...of to visit all environment URLs.

for...in vs for...of

• for...in → iterates over object keys (property names).

• for...of → iterates over iterable values (like array elements).

Use for...in when you need the keys of an object, and for...of when you need the values of an array or other iterable.

FAQs

What are conditional statements in JavaScript?

Statements (if, else if, else, switch) that execute code based on conditions, controlling the flow of a program.

What is the difference between if, else if, and else?

if runs when its condition is true; else if runs when a previous condition was false and its own is true; else runs when all previous conditions are false.

When should you use a switch statement?

When testing one expression against multiple case values, it's cleaner than many if/else if statements.

• break prevents fall-through.

• default handles unmatched cases.

What are the types of loops in JavaScript?

• for

• for...of

• for...in

• while

• do...while

• forEach array method

What is the difference between for, while, and do-while?

• for is for a fixed number of iterations.

• while runs while a condition is true (possibly zero times).

• do-while runs at least once before checking the condition.

What is the difference between for...in and for...of?

• for...in iterates over object keys (property names).

• for...of iterates over iterable values like array elements.