JavaScript Arrays and Objects: Methods, Destructuring & Looping

What is an Array?

An array is a data structure used to store multiple values in a single variable.

In automation projects, arrays are commonly used to handle collections of test data, such as usernames, URLs, or expected values. They help reduce duplicate code and make test scripts clean and readable.

Where and Why Used in a Project

In real-time automation, arrays are used when we have fixed-size test data that needs to be iterated using loops.

Real-time Example

In our login automation, I used an array to store multiple invalid passwords and looped through them to validate error messages in a single test.

How to Declare an Array

An array in JavaScript/TypeScript is declared using square brackets ([]) or the Array constructor.

Square brackets are preferred because they are simpler and more readable.

Arrays store multiple related values in one variable.

In automation projects, arrays are frequently used to:

• Store multiple locators

• Handle test data

• Loop through multiple test scenarios

TypeScript also allows type-safe arrays, which help avoid runtime errors.

Playwright JavaScript

const urls = ["https://qa.site.com", "https://stage.site.com"];

Playwright TypeScript

const urls: string[] = ["https://qa.site.com", "https://stage.site.com"];

Quick Summary

Arrays:

• Store multiple values in one variable.

• Are declared using [] or Array().

• Use [] as the most common approach.

• Are very useful for test data and looping in Playwright tests.

Finding the Length of an Array

In JavaScript, we find the length of an array using the .length property, which returns the total number of elements.

It is a property, not a method, so we don't use parentheses.

In Playwright automation, .length is commonly used to:

• Validate the number of elements on a page.

• Control loops for test execution.

• Assert test data count.

This helps write dynamic, reliable tests instead of hard-coded values.

const menuItems = await page.$$(".menu-item");

if (menuItems.length > 0) {
  console.log("Menu items are loaded");
}

map vs forEach

• forEach executes a function on each array element without returning a new array.

• map executes a function and returns a new array with transformed values.

forEach

Iterates over array elements and performs an action for each.

Used when you want to perform actions and don't need a return value.

map

Iterates over array elements and returns a new array.

Useful when you want to transform data (e.g., for assertions).

Real-life Example

• forEach → checking each item in a shopping list.

• map → creating a new list of prices after applying a discount.

Real-time Testing Example

• forEach → performing login with multiple usernames stored in an array.

• map → modifying an array of test URLs to add query parameters before use.

What is an Object?

An object in JavaScript is a collection of key-value pairs used to store data in a structured format using keys (properties) and values.

const obj = {
  key1: value1,
  key2: value2,
  key3: value3
};

In automation, objects let you:

• Pass structured data to functions or page objects.

• Dynamically access or update values during tests.

This makes tests cleaner, more readable, and more maintainable.

Real-time Example

In my Playwright project, I stored multiple user credentials as objects for use across login tests.

How to Create an Object

In JavaScript, objects can be created in two main ways.

Object Literal (Recommended)

Using {}.

Preferred because it is simpler, cleaner, and more readable.

Object Constructor

Using new Object().

Objects store related data as key-value pairs for easy access.

In Playwright, objects are commonly used for:

• Test data

• Configuration

• Passing objects to functions

• Passing objects to page objects

• Supporting modular code

• Using them in loops to perform actions on different objects

Array vs Object

An array stores data as an ordered list of elements, while an object stores data as key-value pairs.

Arrays are used for lists; objects are used for structured data.

Accessing Object Properties

Object properties in JavaScript can be accessed using:

• Dot notation (object.key)

• Bracket notation (object["key"])

Dot Notation

Easy and readable.

Used when the property name is known and fixed.

Bracket Notation

Useful when property names are dynamic or stored in variables.

In Playwright, this is used to:

• Access usernames and passwords stored in objects for login tests.

• Fetch configuration values for dynamic environment handling.

• Update values before performing actions on UI elements.

Destructuring

Destructuring in JavaScript allows you to extract values from arrays or objects into individual variables using a clean, readable syntax.

const { username, password } = user;    // object destructuring

const [qaUrl, stageUrl] = urls;         // array destructuring

In automation, destructuring lets you:

• Access multiple properties of an object (e.g., login credentials) in one line.

• Extract multiple values from arrays (e.g., URLs or test data).

In my Playwright project, I destructured the username and password from a user object for login tests.

Looping Through Object Properties

You can loop through object properties using:

• for...in

• Object.keys()

• Object.values()

• Object.entries()

for...in Loop

Loops over all enumerable keys of an object.

Object.keys() with forEach

Loops over all keys.

Object.keys(user).forEach(key => console.log(key, user[key]));

Object.values() with forEach

Loops over all values.

Object.values(user).forEach(value => console.log(value));

Object.entries() with forEach

Loops over key-value pairs.

Object.entries(user).forEach(([key, value]) => console.log(key, value));

In my Playwright project, I used Object.entries() to loop through test data dynamically, accessing both keys and values.

FAQs

What is an array in JavaScript?

A data structure that stores multiple values in a single variable; in automation, it's used for collections of test data like usernames, URLs, or expected values.

How do you declare an array?

Using square brackets ([]) (preferred for readability) or the Array() constructor.

TypeScript also supports type-safe arrays like string[].

How do you find the length of an array?

With the .length property (not a method), which returns the total number of elements.

What is the difference between map and forEach?

• forEach performs an action on each element and returns nothing.

• map transforms each element and returns a new array.

What is an object in JavaScript?

A collection of key-value pairs used to store structured data via properties (keys) and values.

How do you access object properties?

Using:

• Dot notation (object.key) for known property names.

• Bracket notation (object["key"]) for dynamic ones.

What is destructuring?

A syntax to extract values from arrays or objects into individual variables in one line, commonly used for test data and credentials.

How do you loop through an object's properties?

Using:

• for...in

• Object.keys()

• Object.values()

• Object.entries() combined with forEach

Related articles: JavaScript Variables: var vs let vs const, Scope & Hoisting