Map vs Object in JavaScript

Map is a data structure which helps in storing the data in the form of pairs. The pair consists of a unique key and a value mapped to the key. It helps prevent duplicity.
Object follows the same concept as that of map i.e. using key-value pair for storing data. But there are slight differences which makes map a better performer in certain situations.

Few basic differences are as follows:

  1. In Object, the data-type of the key-field is restricted to integer, strings, and symbols. Whereas in Map, the key-field can be of any data-type (integer, an array, even an object!)
  2. In the Map, the original order of elements is preserved. This is not true in case of objects.
  3. The Map is an instance of an object but the vice-versa is not true.

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<script>
    var map = new Map([
        [5, 4],
        [7, 9]
    ]);
  
    //output:true
    console.log(map instanceof Object); 
  
    //output:false
    var obj = new Object();
    console.log(obj instanceof Map); 
</script>

chevron_right


Output:

true
false

Let’s dive deep into some more concepts which makes Object different than Map.

  1. Declaration:
    In JavaScript, there are many ways to create an object. For example:

    • By using direct literal:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      var obj = {};
      var obj = {1:"Object Name", 2:"Test"};
      console.log(obj);

      chevron_right

      
      

      Output:

      Object
    • Use of constructor:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      var obj = new Object(); //Empty object
      var obj = new Object;
      console.log(obj);

      chevron_right

      
      

      Output:

      Object
    • Using object.create
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      function fruits() {
              this.name = 'fruit 1';
              this.season = 'summer';
              }
        
              function apple() {
              fruits.call(this);
              }
        
              apple.prototype = Object.create(fruits.prototype);
              const app = new apple();
              console.log(app.name);
              console.log(app.season);

      chevron_right

      
      

      fruit 1
      summer
    • On the other hand, the Map has only one way of creation.

    • filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      var map = new Map();//Empty
      console.log(map);
      var map = new Map([[1, "Sam"], [2, "John"]]); // 1-> Sam, 2->John
      console.log(map);

      chevron_right

      
      

      Output:

      Map(0)
      Map(2)
  2. Accessing Element:
    • Map uses its inbuilt get() method for accessing its elements.
      map.get(1);
    • Object simply uses the ‘key’ name with a dot operator to access its elements.
      obj.id;
      obj[id];
  3. Check if a key already exists:
    • Map uses it’s inbuilt has() function for this.
      map.has(1);//returns boolean value true or false.
    • Object uses ‘===’ operator for performing the task.
      var doExist = obj.1 === undefined; //returns boolean value.
  4. Adding new Element:
    • Map uses set() method to add new element.
      map.set(4, 5); //{5->4, 7->9, 4->5}
    • In object, it is done directly.
      obj["Demo"]="Map vs Object"; //{1->Object Name, 2->Test, Demo->Map vs Object}
  5. Getting the size:
    • Map automatically updates its size and get the easiest.
      console.log(map.size);
    • In object, the size needs to be calculated manually with the help object.keys().
      console.log(object.keys(obj).length);

Hence we can see Map is having better performance and less to write code structure which gives it an edge over Object. However, there are some scenarios which requires object to be used. Let us see.
WHEN AND WHERE TO USE OBJECT:

  • Objects are a great choice for situations where we need simple structure to store data and the type of keys needed is either an integer, strings or symbols.
  • Scenarios which needs the application of separate logic to individual property element, the object is definitely the choice.
  • JSON gives direct support for object but not with map(yet).
  • Map is completely hash whereas Object is more than that.

Although Map tends to have more advantages over objects, at the end the day it depends on the kind of data being used and the operation needs to be performed.
However, of all the advantages of map over object, map cannot replace object in JavaScript because Object is much more than a hash table. It shouldn’t be used just for the purpose of hashing if there exists another choice.



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.