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); // 3Map 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); // 1but 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
sizeproperty of the map object. sizeupdates when you add or remove elements withset(),delete()orclear().- 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.
