How to Get the Length of a Map in JavaScript

To get the length of a map in JavaScript, we use it’s size property, e.g., console.log(map.size).

const map = new Map(); map.set('user1', 'John'); map.set('user2', 'Kate'); map.set('user3', 'Peter'); // 👇 Get length of map console.log(map.size); // 3

Subscribe to Coding Beauty Newsletter

Gain useful insights and advance your web development knowledge with weekly tips and tutorials from Coding Beauty. Over 3,000 developers subscribe.

Map size, set(), and delete() methods

A Map object’s size property stores of key-value pairs in the object.

As the set() method adds elements and delete() removes them, the size property changes accordingly.

When we add a new element to a map with the set() method, the size property goes up by 1. In the same way, when we remove an element from the map with delete() the size goes down by 1.

const map = new Map(); map.set('user1', 'John'); console.log(map.size); // 1 map.set('user2', 'Kate'); console.log(map.size); // 2 map.delete('user1'); console.log(map.size); // 1

Map size vs Array length

Of course, a map and an array serve different purposes, but each has a property that gives the length of items it stores, length for arrays, and size for maps.

One key difference between the two is that you can change an array’s length property directly.

const arr = []; arr.push('Pat'); arr.push('Matt'); console.log(arr.length); // 2 // 👇 Array length changed arr.length = 1; console.log(arr.length); // 1

but you can’t do the same for maps:

const map = new Map(); map.set('user1', 'Pat'); map.set('user2', 'Matt'); console.log(map.size); // 2 map.size = 5; // 👇 length can't be modified directly console.log(map.size); // 2

You can only change size with methods like set() and delete(), as we saw earlier.

When you change Array length to a lesser value directly, elements are chopped off the end.

const arr = ['Pat', 'Matt']; // 👇 Length decreased directly arr.length = 1; // No more 'Matt' console.log(arr); // ['Pat']

On the other hand, when you directly change the Array length to a greater value, empty placeholder elements get added from the end of the array:

const arr = ['Pat', 'Matt']; // 👇 Length increase directly arr.length = 3; // Empty item added console.log(arr); // [ 'Pat', 'Matt', <1 empty item> ]

While this works, I would recommend Array splice() to remove elements from an array, so you have greater control over the deletion and can access the deleted elements.

With splice() you can set the start index for the deletion, the number of elements to delete, and new elements that should be inserted in their place.

const arr = ['Pat', 'Matt']; // Delete 1 element at index 1 (2nd element) const deleted = arr.splice(1, 1); console.log(deleted); // ['Matt'] const arr2 = ['Pat', 'Matt']; // Delete 1 element at index 1 (2nd element) and insert 'John' at index 1 const deleted2 = arr2.splice(1, 1, 'John'); console.log(deleted2); // ['Matt']

Clear Map with clear() method

What the Map clear() method does should be pretty obvious from its name; it clears the map of all its elements:

const map = new Map(); map.set('user1', 'John'); map.set('user2', 'Kate'); map.set('user3', 'Peter'); console.log(map.size); // 3 map.clear(); console.log(map.size); // 0

Key takeaways

  • To get the length of a map in JavaScript, use the size property of the map object.
  • size updates when you add or remove elements with set(), delete() or clear().
  • Unlike arrays, you can’t change the size of a map directly.

Every Crazy Thing JavaScript Does

A captivating guide to the subtle caveats and lesser-known parts of JavaScript.

Every Crazy Thing JavaScript Does

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *