+91 7387620624

Creating Maps

Introduction

A Map is a built-in JavaScript object that stores data as key-value pairs. Unlike regular objects, a Map allows keys of any data type, including strings, numbers, booleans, objects, functions, and even other Maps.

Maps were introduced in ES6 (ECMAScript 2015) to provide a more flexible and efficient way of storing and managing key-value data.

Maps are widely used in web development, Node.js applications, API testing, and automation frameworks such as Selenium, Playwright, and Cypress.

For automation engineers, Maps are useful for storing configuration settings, browser capabilities, API request headers, environment variables, test data, and lookup tables.

What is a Map?

A Map is a collection of key-value pairs where:

  • Each key is unique.

  • Keys can be of any data type.

  • Values can also be of any data type.

  • The insertion order is maintained.

Example:

let student = new Map([

    ["name", "John"],

    ["age", 22],

    ["course", "JavaScript"]

]);

console.log(student);

Output

Map(3) {
  'name' => 'John',
  'age' => 22,
  'course' => 'JavaScript'
}

Why Do We Use Maps?

Maps help developers:

  • Store data as key-value pairs.

  • Use any data type as a key.

  • Preserve insertion order.

  • Perform fast key lookups.

  • Manage dynamic data efficiently.

  • Avoid property name conflicts found with plain objects.

Creating an Empty Map

Use the Map constructor.

Syntax

let mapName = new Map();

Example

let employees = new Map();

console.log(employees);

Output

Map(0) {}

Creating a Map with Initial Values

Pass an array of key-value pairs to the constructor.

let product = new Map([

    ["name", "Laptop"],

    ["price", 65000],

    ["brand", "Dell"]

]);

console.log(product);

Output

Map(3) {
  'name' => 'Laptop',
  'price' => 65000,
  'brand' => 'Dell'
}

Keys Can Be Numbers

let scores = new Map([

    [101, "John"],

    [102, "Alice"]

]);

console.log(scores);

Output

Map(2) {
  101 => 'John',
  102 => 'Alice'
}

Keys Can Be Boolean Values

let status = new Map([

    [true, "Success"],

    [false, "Failed"]

]);

console.log(status);

Output

Map(2) {
  true => 'Success',
  false => 'Failed'
}

Keys Can Be Objects

Objects can also be used as keys.

let user = {

    id: 101

};

let users = new Map();

users.set(user, "Administrator");

console.log(users);

Output

Map(1) {
  { id: 101 } => 'Administrator'
}

Real-World Example

Suppose an application stores employee IDs and names.

let employees = new Map([

    [101, "Rahul"],

    [102, "Priya"],

    [103, "Amit"]

]);

console.log(employees);

Output

Map(3) {
  101 => 'Rahul',
  102 => 'Priya',
  103 => 'Amit'
}

Another example:

Store country codes.

let countryCodes = new Map([

    ["IN", "India"],

    ["US", "United States"],

    ["UK", "United Kingdom"]

]);

console.log(countryCodes);

Output

Map(3) {
  'IN' => 'India',
  'US' => 'United States',
  'UK' => 'United Kingdom'
}

Automation Testing Example

Automation engineers frequently use Maps for storing browser settings, environment variables, request headers, and test configurations.

Playwright Example

Store browser configurations.

const browsers = new Map([

    ["browser", "chromium"],

    ["headless", true]

]);

console.log(browsers);

Output

Map(2) {
  'browser' => 'chromium',
  'headless' => true
}

Selenium Example

Store browser capabilities.

const capabilities = new Map([

    ["browserName", "chrome"],

    ["platform", "Windows"]

]);

console.log(capabilities);

Output

Map(2) {
  'browserName' => 'chrome',
  'platform' => 'Windows'
}

Cypress Example

Store environment settings.

const environment = new Map([

    ["env", "QA"],

    ["baseUrl", "https://example.com"]

]);

console.log(environment);

Output

Map(2) {
  'env' => 'QA',
  'baseUrl' => 'https://example.com'
}

API Testing Example

Store request headers.

const headers = new Map([

    ["Content-Type", "application/json"],

    ["Authorization", "Bearer token"]

]);

console.log(headers);

Output

Map(2) {
  'Content-Type' => 'application/json',
  'Authorization' => 'Bearer token'
}

Data-Driven Testing Example

Store test users.

const users = new Map([

    ["admin", "Admin User"],

    ["tester", "Test User"]

]);

console.log(users);

Output

Map(2) {
  'admin' => 'Admin User',
  'tester' => 'Test User'
}

Common Mistakes

Using Curly Braces Instead of new Map()

Incorrect:

let student = {

    ["name", "John"]

};

This creates an object, not a Map.

Correct:

let student = new Map([

    ["name", "John"]

]);

Forgetting Nested Square Brackets

Incorrect:

let map = new Map([

    "name", "John"

]);

Correct:

let map = new Map([

    ["name", "John"]

]);

Each entry must be a key-value pair inside its own array.

Expecting Duplicate Keys

let map = new Map([

    ["name", "John"],

    ["name", "David"]

]);

console.log(map);

Output

Map(1) {
  'name' => 'David'
}

The second value replaces the first because keys must be unique.

Best Practices

Use Maps for Dynamic Key-Value Data

Maps are better than plain objects when keys are dynamic or are not strings.

Use Meaningful Keys

Choose descriptive keys such as "browser" or "baseUrl" instead of short or unclear names.

Keep Related Data Together

Store related configuration values in a single Map to improve organization.

Use Maps When Key Types Matter

Unlike objects, Maps allow numbers, booleans, objects, and functions as keys without converting them to strings.

Conclusion

Maps provide a powerful and flexible way to store key-value pairs in JavaScript. They support keys of any data type, preserve insertion order, and offer efficient lookup operations, making them more versatile than plain objects for many use cases.

For automation engineers, Maps are especially useful for managing browser configurations, environment variables, API headers, test data, and lookup tables. Understanding how to create Maps is the foundation for using their advanced features effectively in JavaScript and automation projects.

Frequently Asked Questions (FAQs)

What is a Map in JavaScript?

A Map is a collection of key-value pairs where keys can be of any data type.

When was the Map object introduced?

It was introduced in ES6 (ECMAScript 2015).

How do you create an empty Map?

let myMap = new Map();

How do you create a Map with values?

let myMap = new Map([

    ["name", "John"],

    ["age", 22]

]);

Can a Map use objects as keys?

Yes.

let obj = {};

let map = new Map();

map.set(obj, "Value");

Why are Maps important in automation testing?

Automation engineers use Maps to store browser configurations, request headers, environment variables, API data, test users, and other key-value information in a structured and efficient manner.

Key Takeaways

  • A Map stores data as key-value pairs.

  • Maps were introduced in ES6 (ECMAScript 2015).

  • Keys can be of any data type.

  • Values can also be of any data type.

  • Maps preserve the insertion order of entries.

  • Duplicate keys are not allowed; the latest value replaces the previous one.

  • Create Maps using the new Map() constructor.

  • Initial values are passed as an array of key-value pairs.

  • Maps are widely used in modern JavaScript and automation testing.

  • Mastering Map creation is the first step toward efficiently managing key-value data in JavaScript.