Agenda:

In this article we are going to discuss What are Map and Set functions in Javascript. We will also discuss why these two functions are often compared with Object and Array in Javascript respectively. So make sure you have basic understanding of Object and Array in Javascript. Let us get started.

Map:

By definition, Map is collection of keyed data items. We can create a map instance like this:

  1. var obj = new Map();

There are several self explanatory methods and properties to manipulate the map instance.

  1. obj.set('name','Rahul');
  2. //sets key 'name' with value 'Rahul'
  3. //returns map instance
  4.  
  5. obj.get('name');
  6. //gets value of item with key 'name'
  7. //returns value of item
  8.  
  9. obj.has('name');
  10. //Checks if name key data item exist or not.
  11. //returns true if exists else false
  12.  
  13. obj.delete('name');
  14. //delete data item with key name.
  15. //returns true if key exist and deleted else false
  16.  
  17. obj.clear();
  18. //remove all the data items from map instance
  19.  
  20. obj.size;
  21. //property to check size of map instance
  22. //returns length of map instance
  23.  

Map vs Object:

You must be thinking object also does the same, storing keyed data items. So why Map ?

  • Map supports key field of any data types. That just means, you can get/set a value from/in map instance based upon key which is an complex object.

  1. var user = { userName: "Rahul", password: "Passw0rd"}; //object literal
  2.  
  3. var map = new Map(); //map instance
  4.  
  5. map.set(user,true); //set value based upon user object as a key.
  6.  
  7. map.get(user); //using user object to fetch the value
  8.  
Unlikely Objects, where it assign value but converts object key into string.
  1. var obj = new Object(); //Creating an empty object.
  2.  
  3. obj[user] = true; //using user object as key.
  4.  
  5. console.log(obj["[object Object]"]); //prints true;

  • Map keeps the insertion sequence of data items. Now, if you do not know then try inserting differnt types of key in an object. You will notice it rearranges the order of data items. It keeps integers at top of object then strings and symbols at last if any. Well, this is not the case with Map.

Set:

By definition, Set is a collecton of items similar to Array, but maintains uniquness of items. A Set instance can be created like this

  1. var set = new Set();

It exposes various methods and properties to manipulate set instance as follows:

  1. set.add("Rahul");
  2. //add value in set instance;
  3. //returns set instance itself.
  4.  
  5. set.delete("Rahul");
  6. //delete respective value from set instance.
  7. //return true if exist and deleted else false
  8.  
  9. set.has("Rahul");
  10. //checks if value exist or not.
  11. //returns true if exist else false
  12.  
  13. set.clear();
  14. //removes all the values from set instance.
  15.  
  16. set.size;
  17. //property which return size of set instance

Set vs Array:

Set are often compared with Array, because both serves almost same purpose. Lets discuss differences among those.

  • Set maintain uniquness of value being added. i.e. repeated inseration of same value is simply ignored.
  1. set.add("Rahul");
  2.  
  3. set.add("Rahul");
  4.  
  5. //try adding same value two times.
  6.  
  7. console.log(set.size);
  8. //still returns 1
  9.  
  • Set is still a keyed collection but Array are index based collection. Understanding it otherwise, Set maintains the order of insertion but in Array we can rearrange items.

Conclusion:

In this article we learnt about Map and Set function in Javascript and their basic usage. We also compared Map with Object and knew the difference between Set and Array.

Good Bye 👋 !! until I write again. Code well, Cook good.