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).

JavaScript
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

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.

JavaScript
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.

JavaScript
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:

JavaScript
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.

JavaScript
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:

JavaScript
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.

JavaScript
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:

JavaScript
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.


11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

Leave a Comment

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