Introduction

Array iteration is the process of visiting each element of an array one by one to perform a specific task. Instead of accessing individual elements manually, JavaScript provides several ways to loop through an array efficiently.

Array iteration is one of the most important concepts in JavaScript because it allows developers to process collections of data with minimal code. It is widely used in web development, Node.js applications, API testing, and automation frameworks such as Selenium, Playwright, and Cypress.

For automation engineers, array iteration is commonly used to execute the same test on multiple browsers, process API responses, validate test data, iterate through web elements, and perform data-driven testing.

What is Array Iteration?

Array iteration means visiting every element of an array sequentially.

For example:

Array: [10, 20, 30, 40]

During iteration:

Each element is processed one after another.

Why Do We Use Array Iteration?

Array iteration helps developers:

Process multiple values efficiently.
Avoid repetitive code.
Perform calculations.
Validate data.
Search and filter elements.
Execute repeated operations.

Ways to Iterate Through Arrays

JavaScript provides multiple ways to iterate over arrays.

Method	Description
`for` Loop	Traditional loop using an index.
`for...of` Loop	Iterates directly over array values.
`forEach()`	Executes a function for every element.
`map()`	Creates a new array by transforming elements.
`filter()`	Creates a new array with matching elements.

Using the `for` Loop

The traditional for loop is one of the most commonly used methods.

Syntax

for (initialization; condition; increment) {

    // Code

}

Example

let browsers = [

    "Chrome",

    "Firefox",

    "Edge"

];

for (let i = 0; i < browsers.length; i++) {

    console.log(browsers[i]);

}

Output

Chrome
Firefox
Edge

Using the `for...of` Loop

The for...of loop directly accesses array values.

let browsers = [

    "Chrome",

    "Firefox",

    "Edge"

];

for (const browser of browsers) {

    console.log(browser);

}

Output

Chrome
Firefox
Edge

Using `forEach()`

The forEach() method executes a callback function for each array element.

let fruits = [

    "Apple",

    "Mango",

    "Orange"

];

fruits.forEach(function(fruit) {

    console.log(fruit);

});

Output

Apple
Mango
Orange

Using `map()`

The map() method creates a new array after applying a function to every element.

let numbers = [

    1,

    2,

    3

];

let squares = numbers.map(number => number * number);

console.log(squares);

Output

[ 1, 4, 9 ]

Using `filter()`

The filter() method creates a new array containing only elements that satisfy a condition.

let numbers = [

    10,

    15,

    20,

    25

];

let result = numbers.filter(number => number > 15);

console.log(result);

Output

[ 20, 25 ]

Real-World Example

Suppose an application supports multiple browsers.

let browsers = [

    "Chrome",

    "Firefox",

    "Edge"

];

for (const browser of browsers) {

    console.log(browser);

}

Output

Chrome
Firefox
Edge

Another example:

Display employee names.

let employees = [

    "John",

    "Alice",

    "Bob"

];

employees.forEach(employee => console.log(employee));

Output

John
Alice
Bob

Automation Testing Example

Automation engineers frequently iterate through arrays while executing tests on multiple browsers, processing API responses, and validating test data.

Playwright Example

Launch tests on multiple browsers.

const browsers = [

    "chromium",

    "firefox",

    "webkit"

];

for (const browser of browsers) {

    console.log(`Running tests on ${browser}`);

}

Output

Running tests on chromium
Running tests on firefox
Running tests on webkit

Selenium Example

Open multiple URLs.

const urls = [

    "https://qa.example.com",

    "https://prod.example.com"

];

urls.forEach(url => console.log(url));

Output

https://qa.example.com
https://prod.example.com

Cypress Example

Visit multiple pages.

const pages = [

    "login",

    "dashboard",

    "profile"

];

for (const page of pages) {

    console.log(page);

}

Output

login
dashboard
profile

API Testing Example

Display API endpoints.

const endpoints = [

    "/users",

    "/orders",

    "/products"

];

endpoints.forEach(endpoint => console.log(endpoint));

Output

/users
/orders
/products

Data-Driven Testing Example

Execute tests for multiple users.

const users = [

    "admin",

    "manager",

    "tester"

];

users.forEach(user => {

    console.log(`Executing test for ${user}`);

});

Output

Executing test for admin
Executing test for manager
Executing test for tester

Comparison of Iteration Methods

Method	Returns New Array	Best Use Case
`for`	No	General-purpose iteration with index access.
`for...of`	No	Reading array values.
`forEach()`	No	Executing an action for each element.
`map()`	Yes	Transforming array elements.
`filter()`	Yes	Selecting elements based on a condition.

Common Mistakes

Using `for...in` Instead of `for...of`

Incorrect:

let browsers = [

    "Chrome",

    "Firefox"

];

for (const browser in browsers) {

    console.log(browser);

}

Output

0
1

for...in returns indexes, not values.

Correct:

for (const browser of browsers) {

    console.log(browser);

}

Expecting `forEach()` to Return a New Array

Incorrect:

let numbers = [

    1,

    2,

    3

];

let result = numbers.forEach(number => number * 2);

console.log(result);

Output

undefined

Use map() if you need a new transformed array.

Modifying an Array While Iterating

Changing the array during iteration can produce unexpected results.

Whenever possible, avoid modifying the array you are currently iterating through.

Best Practices

Use `for...of` for Simple Iteration

It is clean, readable, and easy to understand.

Use `forEach()` for Side Effects

Use forEach() when performing actions like logging, printing, or updating values outside the array.

Use `map()` for Data Transformation

Use map() whenever a new transformed array is required.

Use `filter()` for Selecting Data

Instead of writing manual filtering logic, use filter().

Use Meaningful Variable Names

Instead of:

let arr = [

    "Chrome",

    "Firefox"

];

Use:

let supportedBrowsers = [

    "Chrome",

    "Firefox"

];

This improves code readability.

Conclusion

Array iteration is a fundamental JavaScript concept that enables developers to process every element of an array efficiently. JavaScript provides several iteration techniques, including for, for...of, forEach(), map(), and filter(), each designed for specific use cases.

For automation engineers, array iteration is essential for running tests across multiple browsers, processing API responses, validating data, and executing data-driven test cases. Choosing the appropriate iteration method results in cleaner, more efficient, and easier-to-maintain automation scripts.

Frequently Asked Questions (FAQs)

What is array iteration?

Array iteration is the process of accessing each element of an array one by one.

Which loop is most commonly used for arrays?

The for loop and the for...of loop are the most commonly used.

Which method executes a function for every element?

array.forEach(callback)

Which method creates a new transformed array?

array.map(callback)

Which method selects elements based on a condition?

array.filter(callback)

Why is array iteration important in automation testing?

Automation engineers use array iteration to execute tests on multiple browsers, process API responses, validate collections of data, iterate through web elements, and perform data-driven testing efficiently.

Key Takeaways

Array iteration processes each element of an array sequentially.
JavaScript provides multiple iteration techniques.
for loops provide full control with index access.
for...of is ideal for iterating over array values.
forEach() executes a function for every element.
map() creates a new transformed array.
filter() creates a new array containing matching elements.
Choose the appropriate iteration method based on the task.
Array iteration is widely used in JavaScript development and automation testing.
Mastering array iteration is essential for writing efficient and maintainable JavaScript code.

Introduction

What is Array Iteration?

Why Do We Use Array Iteration?

Ways to Iterate Through Arrays

Using the for Loop

Syntax

Example

Output

Using the for...of Loop

Output

Using forEach()

Output

Using map()

Output

Using filter()

Output

Real-World Example

Output

Output

Automation Testing Example

Playwright Example

Output

Selenium Example

Output

Cypress Example

Output

API Testing Example

Output

Data-Driven Testing Example

Output

Comparison of Iteration Methods

Common Mistakes

Using for...in Instead of for...of

Output

Expecting forEach() to Return a New Array

Output

Modifying an Array While Iterating

Best Practices

Use for...of for Simple Iteration

Use forEach() for Side Effects

Use map() for Data Transformation

Use filter() for Selecting Data

Use Meaningful Variable Names

Conclusion

Frequently Asked Questions (FAQs)

What is array iteration?

Which loop is most commonly used for arrays?

Which method executes a function for every element?

Which method creates a new transformed array?

Which method selects elements based on a condition?

Why is array iteration important in automation testing?

Key Takeaways

Using the `for` Loop

Using the `for...of` Loop

Using `forEach()`

Using `map()`

Using `filter()`

Using `for...in` Instead of `for...of`

Expecting `forEach()` to Return a New Array

Use `for...of` for Simple Iteration

Use `forEach()` for Side Effects

Use `map()` for Data Transformation

Use `filter()` for Selecting Data