You're probably familiar with - but did you know there is another way to create sets of data in Javascript, known as ? You might be using Javascript plain old objects right now when a map may be a better solution to your problem. Javascript Objects Maps Javascript maps differ in a few major ways from objects. Although returns , don't let that fool you! Here are some of the major differences from objects: typeof new Map() object , unlike objects, which contain a object. Does not contain any keys by default prototype . Objects are like this too these days, but they don't carry the same guarantee. They are guaranteed to be ordered by the order they were inserted , including a function, or even an object. Whereas in Javascript, it must be a string or symbol. The keys of a map can be anything . They have better performance than objects on tasks that require rapid or frequent removal or addition of data by default, unlike objects. They are iterable Given that maps have so many benefits, let's take a look at how they work. The Basics of How Javascript Maps Work Any map in Javascript is initiated using the constructor. For example, let's create a map called : new Map() myFirstMap let myFirstMap = new Map(); The difference is to set, get, or delete keys from a map, you have to use specific methods that come along with . So to set a new value of with the key , I can run the following method: Map someValue firstKey let myFirstMap = new Map(); myFirstMap.set('firstKey', 'someValue'); Deleting an Item in a Javascript Map If we then wanted to delete a key in a Javascript map, we have to call the method: delete() let myFirstMap = new Map(); myFirstMap.set('firstKey', 'someValue'); myFirstMap.delete('firstKey'); You can also delete the entire map altogether, leaving no items in it using : clear() let myFirstMap = new Map(); myFirstMap.set('firstKey', 'someValue'); myFirstMap.clear(); console.log(myFirstMap); // Returns Map(0) Getting a Key in a Javascript Map Similar in usage to the other methods, to get the value of , we have to use : firstKey get() let myFirstMap = new Map(); myFirstMap.set('firstKey', 'someValue'); myFirstMap.get('firstKey') // 'someValue' Checking if a Key Exists in a Javascript Map Javascript Maps also have a method called , if we want to check if a map has a certain key: has() let myFirstMap = new Map(); myFirstMap.set('firstKey', 'someValue'); myFirstMap.has('firstKey') // true Warning: Don't Use Typical Object Properties With Maps Javascript is full of quirks, and maps are no different. Weirdly, maps can also support object notation. For example, this seems to work: let myFirstMap = new Map(); myFirstMap['firstKey'] = 'someValue'; console.log(myFirstMap); // Map(0) { firstKey: 'someValue' } This is creating new entries in the map itself - you're simply creating an object. So you'll lose all the benefits of Javascript maps. However, you should not do this! not Telling How Big a Javascript Map Is One other useful thing in which maps are a little easier to use than objects is finding out how many keys are in a map. For this, we can use the method, which returns the number of keys: size() let myFirstMap = new Map(); myFirstMap.set('firstKey', 'someValue'); myFirstMap.size // 1 For objects, we typically use a mixture of and to find out the size of an object: Object.keys() length let myObj = { "name" : "John" }; let sizeOfObj = Object.keys(myObj).length; // 1 Using Maps With Non-String Keys As I mentioned, Javascript Maps allow non-conventional keys, like functions and objects, whereas objects only allow strings and symbols. For example, this is valid in a map: let myFirstMap = new Map(); let myFunction = function() { return "someReturn"; } myFirstMap.set(myFunction, "value"); Map keys are . That means although the following will work: based on reference, not value let myFirstMap = new Map(); let myFunction = function() { return "someReturn"; } myFirstMap.set(myFunction, "value"); myFirstMap.get(myFunction); // Returns "someReturn" This will not: let myFirstMap = new Map(); let myFunction = function() { return "someReturn"; } myFirstMap.set(myFunction, "value"); myFirstMap.get(function() { return "someReturn"; }); // Returns undefined myFirstMap.get('someReturn'); // Returns undefined That's because although and are the same in value, they are not the same in terms of where they are stored in system memory. So they are not exactly equivalent. Similarly, maps do not work on return value - so also returns undefined. function() { return "someReturn"; } myFunction myFirstMap.get('someReturn') The same example works for objects, with similar results: let myFirstMap = new Map(); let myObject = { "someKey" : "someValue" } myFirstMap.set(myObject, "value"); myFirstMap.get({ "someKey" : "someValue" }); // Returns undefined myFirstMap.get(myObject); // Returns 'value' Merging Javascript Maps If you have multiple maps you want to merge into one, you can merge them in the same way you merge objects - with the spread syntax. For example, here I merge and into using the spread syntax: myFirstMap mySecondMap myNewMap let myFirstMap = new Map(); myFirstMap.set("some", "value"); let mySecondMap = new Map(); mySecondMap.set("someOther", "value"); let myNewMap = new Map([...myFirstMap, ...mySecondMap]); console.log(myNewMap); // Map(2) { some: "value", someOther: "value" } Iterating on a Map As mentioned, maps are by default. If we want to iterate over objects, we usually have to use a function like . Ultimately this means we can use on any map, like so: iterable Object.keys forEach let myFirstMap = new Map(); myFirstMap.set("some", "value"); myFirstMap.set("someOther", "value"); myFirstMap.forEach(function(value, key, map) { // value -> the value of that key in the map // key -> the key for this item in the map // map -> the entire map console.log(value, key, map); }) Iterating on a Javascript Map Using For You can also iterate on a map using ! If you do that, each item is returned as an array of the key and value. For example: for(let ... of ) let myFirstMap = new Map(); myFirstMap.set("some", "value"); for(let x of myFirstMap) { // Returns [ 'some', 'value' ] console.log(x); } Iterating Over Values or Keys in Javascript Maps Another cool way we can iterate over values or keys in Javascript is to use the or methods. These return a for the values and items in a map respectively. values() entries() new iterator That means we can access the next key or value using functions, just like in . next() generator functions For example, let's look at how works: entries() let myFirstMap = new Map(); myFirstMap.set("some", "value"); myFirstMap.set("someOther", "value"); myFirstMap.set("aFinal", "value"); let allKeys = myFirstMap.entries(); console.log(allKeys); // Returns MapIterator {} object console.log(allKeys.next()); // Returns { value: [ 'some', 'value' ], done: false } console.log(allKeys.next().value); // Returns [ 'some', 'value' ] Our return from is an object. The value in this object is - an array of the first item in our map. We can keep running to get the following items in the map. Pretty cool! We can do the same thing again, with just values: allKeys.next() [ 'some', 'value' ] next() let myFirstMap = new Map(); myFirstMap.set("some", "value"); myFirstMap.set("someOther", "value"); myFirstMap.set("aFinal", "value"); let allValues = myFirstMap.values(); console.log(allValues); // Returns MapIterator {} object console.log(allValues.next()); // Returns { value: 'value' done: false } console.log(allValues.next().value); // Returns 'value' Iterators like this prove useful in some specific situations and can be a cool way to iterate through all the data in your Map. Serialization of Maps in Javascript One of the drawbacks for some people, which maps have, is that they cannot be easily serialized with and . Trying to do so results in an empty object, and this kind of makes sense - since the object of a Map is empty if we only populate it with entries: JSON.parse() JSON.stringify let myFirstMap = new Map(); myFirstMap.set("some", "value"); myFirstMap.set("someOther", "value"); myFirstMap.set("aFinal", "value"); // Returns {} console.log(JSON.stringify(myFirstMap)); The only realistic way to serialize a Map is to convert it to an object or array, which simply means you'll have to maintain some separate helper functions to do this task for you, should you use Maps. For example, we can use to convert our Map to an array, and then use to serialize it: Array.from() JSON.stringify() let myFirstMap = new Map(); myFirstMap.set("some", "value"); myFirstMap.set("someOther", "value"); myFirstMap.set("aFinal", "value"); let arrayMap = Array.from(myFirstMap); // Returns [["some","value"],["someOther","value"],["aFinal","value"]] console.log(JSON.stringify(arrayMap)); Then, if we want to turn it back into a map, we have to use in conjunction with : JSON.parse() new Map() let myFirstMap = new Map(); myFirstMap.set("some", "value"); myFirstMap.set("someOther", "value"); myFirstMap.set("aFinal", "value"); // Turn our map into an array let arrayMap = Array.from(myFirstMap); // The JSON stringed version of our map: let stringifiedMap = JSON.stringify(arrayMap); // Use new Map(JSON.parse...) to turn our stringed map into a map again: let getMap = new Map(JSON.parse(stringifiedMap)); // Returns Map(3) {'some' => 'value', 'someOther' => 'value', 'aFinal' => 'value'} console.log(getMap); Conclusion Javascript Maps are a great way to store data when you don't need all the flexibility of objects and things like the order of your data are incredibly important. They also prove more performant than objects in situations requiring frequent addition and removal of items. In this guide, we've covered everything you need to know about Maps, but if you want to . learn more about Javascript click here Hope you've enjoyed this one - have a great day.
