How to Get the Length of a Map in JavaScript

Maps in JavaScript are data structure that allows you to store key-value pairs. They provide a convenient way to associate values with unique keys. If you’re working with a Map and need to determine its size, or in other words, the number of key-value pairs it contains, you can check following approaches.

Using the size Property

One straightforward method to retrieve the length of a Map is by using its built-in size property. The size property returns the number of key-value pairs in the Map.

// Create a Map
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

// Get the length using the size property
const mapLength = myMap.size;

// Output the result
console.log(`Map length: ${mapLength}`);
// Map length: 3

In this example, myMap.size provides the number of key-value pairs in the Map. This approach is concise and efficient.

Iterating Through the Map

Another way to find the length of a Map is by iterating through its entries using a loop or the forEach method. While this may not be as concise as using the size property, it allows you to perform additional operations during the iteration.

// Create a Map
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

let count = 0;

// Iterate through the Map entries
myMap.forEach(() => {
  count++;
});

// Output the result
console.log(`Map length: ${count}`);
// Map length: 3

Here, we use the forEach method to iterate through each entry in the Map. For every entry, we increment the count variable. After the iteration, count represents the length of the Map.

Converting to an Array

You can also convert the Map’s entries to an array and use the array’s length property to determine the Map length.

// Create a Map
const myMap = new Map([
  ['key1', 'value1'],
  ['key2', 'value2'],
  ['key3', 'value3']
]);

// Convert Map entries to an array and get its length
const mapLength = [...myMap].length;

// Output the result
console.log(`Map length: ${mapLength}`);
// Map length: 3

The spread operator (…) is used to convert the Map entries into an array. Then, the array’s length property provides the Map length.

🧪Practice Coding Problem: Map Length Calculator

In the spirit of Test Driven Development ( 😁), lets test our understanding by solving a problem.

Write a JavaScript function called calculateMapLength that takes a Map object as input and returns the number of key-value pairs in the Map. The function should not use the Map’s size property but should instead iterate through the Map to determine its length.

JavaScript

function calculateMapLength(inputMap) {
  // > > > 👉 Write code here 👈 < < <
}

const sampleMap = new Map([
  ['name', 'Alice'],
  ['age', 25],
  ['city', 'Wonderland']
]);

const mapLength = calculateMapLength(sampleMap);

console.log(mapLength); // Expected output: 3

Constraints:

• The input Map may contain any valid key-value pairs.
• You should not use the size property of the Map object to calculate its length.
• The function should return 0 for an empty Map.
• The order of key-value pairs in the Map doesn’t matter.

function calculateMapLength(inputMap) {
  // Initialize a variable to keep track of the length
  let length = 0;

  // Iterate through the Map using forEach
  inputMap.forEach((_value, _key) => {
    length += 1;
  });

  // Return the calculated length
  return length;
}

Conclusion:

Adding / removing CSS classes is vital, whenever you need to make bulk changes to styling or behavior of multiple elements on your webpage. Whether it’s styling, interaction, or animation, manipulating classes is a possible solution.

Hopefully it will be useful. Keep refining your skills and Happy coding! 😊🚀