Map vs Object in JavaScript

Question

I just discovered this feature   Map  Map objects are simple key value maps   That confused me  Regular JavaScript objects are dictionaries  so how is a Map different from a dictionary  Conceptually  they re identical  according to  another question on Stackoverflow  The documentation doesn t help either   Map objects are collections of key value pairs where both the keys and values may be arbitrary ECMAScript language values  A distinct key value may only occur in one key value pair within the Map   s collection  Distinct key values as discriminated using the a comparision algorithm that is selected when the Map is created    A Map object can iterate its elements in insertion order  Map object must be implemented using either hash tables or other mechanisms that  on average  provide access times that are sublinear on the number of elements in the collection  The data structures used in this Map objects specification is only intended to describe the required observable semantics of Map objects  It is not intended to be a viable implementation model      still sounds like an object to me  so clearly I ve missed something  Why is JavaScript gaining a  well-supported  Map object  What does it do

User · Answer

I came across this post by Minko Gechev which clearly explains the major differences

User · Answer

According to mozilla   A Map object can iterate its elements in insertion order - a for  of loop will return an array of  key  value  for each iteration   and  Objects are similar to Maps in that both let you set keys to values  retrieve those values  delete keys  and detect whether something is stored at a key  Because of this  Objects have been used as Maps historically  however  there are important differences between Objects and Maps that make using a Map better  An Object has a prototype  so there are default keys in the map  However  this can be bypassed using map   Object create null   The keys of an Object are Strings  where they can be any value for a Map  You can get the size of a Map easily while you have to manually keep track of size for an Object  Use maps over objects when keys are unknown until run time  and when all keys are the same type and all values are the same type  Use objects when there is logic that operates on individual elements   https   developer mozilla org en-US docs Web JavaScript Reference Global Objects Map The iterability-in-order is a feature that has long been wanted by developers  in part because it ensures the same performance in all browsers  So to me that s a big one  The myMap has key  method will be especially handy  and also the myMap size property

User · Answer

According to Mozilla  Object vs Map in JavaScript in short way with examples   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   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   Key differences   The Map is an instance of an object but the vice-versa is not true     x000D   x000D  var map   new Map    x000D  var obj   new Object     x000D  console log obj instanceof Map        false x000D  console log map instanceof Object       true x000D   x000D   x000D     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  an object     x000D   x000D  var map   new Map     Empty  x000D  map set 1  1    x000D  map set  one   1   x000D  map set        name  Hello world     x000D  map set 12 3  12 3  x000D  map set  12   12345   x000D   x000D  for let  key value  of map entries    x000D    console log key  ---  value  x000D   x000D   x000D     In the Map  the original order of elements is preserved  This is not true in case of objects     x000D   x000D  let obj    x000D    1  1   x000D     one  1  x000D           name  Hello world    x000D    12 3 12 3  x000D     12   100  x000D    x000D  console log obj  x000D   x000D   x000D

User · Answer

An object behaves like a dictionary because Javascript is dynamically typed  allowing you to add or remove properties at any time  But Map   is much better because it   Provides get  set  has  and delete methods  Accepts any type for the keys instead of just strings  Provides an iterator for easy for-of usage and maintains order of results  Doesn t have edge cases with prototypes and other properties showing up during iteration or copying  Supports millions of items  Is very fast   If you need a dictionary then you should just use a Map    However  if you re only using string-based keys and need maximum read performance  then objects might be a better choice  This is because Javascript engines compile objects down to C   classes in the background  The access path for properties on these classes is very optimized and much faster than a function call for Map   get    These classes are also cached  so creating a new object with the same exact properties means the engine will reuse an existing background class  Adding or removing a property causes the shape of the class to change and the backing class to be re-compiled  which is why using an object as a dictionary with lots of additions and deletions is very slow  but reads of existing keys without changing the object are very fast  So if you have a write-once read-heavy workload with string keys then you can use an object as a high-performance dictionary  but for everything else use a Map

User · Answer

I don t think the following points have been mentioned in the answers so far  and I thought they d be worth mentioning     Maps can be bigger  In chrome I can get 16 7 million key value pairs with Map vs  11 1 million with a regular object  Almost exactly 50  more pairs with a Map  They both take up about 2GB of memory before they crash  and so I think may be to do with memory limiting by chrome  Edit  Yep  try filling 2 Maps and you only get to 8 3 million pairs each before it crashes   You can test it yourself with this code  run them separately and not at the same time  obviously    var m   new Map    var i   0  while 1        m set   10  30  Math random    toString 36     10  30  Math random    toString 36        i        if i 1000     0    console log i 1000  thousand          versus  var m       var i   0  while 1        m   10  30  Math random    toString 36       10  30  Math random    toString 36       i        if i 1000     0    console log i 1000  thousand         Objects have some properties keys already  This one has tripped me up before  Regular objects have toString  constructor  valueOf  hasOwnProperty  isPrototypeOf and a bunch of other pre-existing properties  This may not be a big problem for most use cases  but it has caused problems for me before   Maps can be slower   Due to the  get function call overhead and lack of internal optimisation  Map can be considerably slower than a plain old JavaScript object for some tasks

User · Answer

The key difference is that Objects only support string and Symbol keys where as Maps support more or less any key type  If I do obj 123    true and then Object keys obj  then I will get   quot 123 quot   rather than  123   A Map would preserve the type of the key and return  123  which is great  Maps also allow you to use Objects as keys  Traditionally to do this you would have to give objects some kind of unique identifier to hash them  I don t think I ve ever seen anything like getObjectId in JS as part of the standard   Maps also guarantee preservation of order so are all round better for preservation and can sometimes save you needing to do a few sorts  Between maps and objects in practice there are several pros and cons  Objects gain both advantages and disadvantages being very tightly integrated into the core of JavaScript which sets them apart from significantly Map beyond the difference in key support  An immediate advantage is that you have syntactical support for Objects making it easy to access elements  You also have direct support for it with JSON  When used as a hash it s annoying to get an object without any properties at all  By default if you want to use Objects as a hash table they will be polluted and you will often have to call hasOwnProperty on them when accessing properties  You can see here how by default Objects are polluted and how to create hopefully unpolluted objects for use as hashes       toString     toString      native code    JSON parse       toString     toString      native code     Object create null   toString     undefined JSON parse        k v    gt   typeof v      object   amp  amp  Object setPrototypeOf v  null   v   toString     undefined  Pollution on objects is not only something that makes code more annoying  slower  etc but can also have potential consequences for security  Objects are not pure hash tables but are trying to do more  You have headaches like hasOwnProperty  not being able to get the length easily  Object keys obj  length  and so on  Objects are not meant to purely be used as hash maps but as dynamic extensible Objects as well and so when you use them as pure hash tables problems arise  Comparison List of various common operations      Object         var o              var o   Object create null          o key   1         o key    10         for let k in o  o k            var sum   0         for let v of Object values m   sum    v         if  key  in o          if o hasOwnProperty  key            delete o key          Object keys o  length     Map         var m   new Map           m set  key   1          m set  key   m get  key     10          m foreach  k  v    gt  m set k  m get k    1           for let k of m keys    m set k  m get k    1          var sum   0         for let v of m values    sum    v         if m has  key            m delete  key           m size     There are a few other options  approaches  methodologies  etc with varying ups and downs  performance  terse  portable  extendable  etc   Objects are a bit strange being core to the language so you have a lot of static methods for working with them  Besides the advantage of Maps preserving key types as well as being able to support things like objects as keys they are isolated from the side effects that objects much have  A Map is a pure hash  there s no confusion about trying to be an object at the same time  Maps can also be easily extended with proxy functions  Object s currently have a Proxy class however performance and memory usage is grim  in fact creating your own proxy that looks like Map for Objects currently performs better than Proxy  A substantial disadvantage for Maps is that they are not supported with JSON directly  Parsing is possible but has several hangups  JSON parse str   k v    gt        if typeof v      object   return v      let m   new Map        for k in v  m set k  v k        return m       The above will introduce a serious performance hit and will also not support any string keys  JSON encoding is even more difficult and problematic  this is one of many approaches      An alternative to this it to use a replacer in JSON stringify  Map prototype toJSON   function         return JSON stringify           keys  Array from this keys             values  Array from this values                This is not so bad if you re purely using Maps but will have problems when you are mixing types or using non-scalar values as keys  not that JSON is perfect with that kind of issue as it is  IE circular object reference   I haven t tested it but chances are that it will severely hurt performance compared to stringify  Other scripting languages often don t have such problems as they have explicit non-scalar types for Map  Object and Array  Web development is often a pain with non-scalar types where you have to deal with things like PHP merges Array Map with Object using A M for properties and JS merges Map Object with Array extending M O  Merging complex types is the devil s bane of high level scripting languages  So far these are largely issues around implementation but performance for basic operations is important as well  Performance is also complex because it depends on engine and usage  Take my tests with a grain of salt as I cannot rule out any mistake  I have to rush this   You should also run your own tests to confirm as mine examine only very specific simple scenarios to give a rough indication only  According to tests in Chrome for very large objects maps the performance for objects is worse because of delete which is apparently somehow proportionate to the number of keys rather than O 1   Object Set Took  146 Object Update Took  7 Object Get Took  4 Object Delete Took  8239 Map Set Took  80 Map Update Took  51 Map Get Took  40 Map Delete Took  2  Chrome clearly has a strong advantage with getting and updating but the delete performance is horrific  Maps use a tiny amount more memory in this case  overhead  but with only one Object Map being tested with millions of keys the impact of overhead for maps is not expressed well  With memory management objects also do seem to free earlier if I am reading the profile correctly which might be one benefit in favor of objects  In Firefox for this particular benchmark it is a different story  Object Set Took  435 Object Update Took  126 Object Get Took  50 Object Delete Took  2 Map Set Took  63 Map Update Took  59 Map Get Took  33 Map Delete Took  1  I should immediately point out that in this particular benchmark deleting from objects in Firefox is not causing any problems  however in other benchmarks it has caused problems especially when there are many keys just as in Chrome  Maps are clearly superior in Firefox for large collections  However this is not the end of the story  what about many small objects or maps  I have done a quick benchmark of this but not an exhaustive one  setting getting  of which performs best with a small number of keys in the above operations  This test is more about memory and initialization  Map Create  69       new Map Object Create  34        Again these figures vary but basically Object has a good lead  In some cases the lead for Objects over maps is extreme   10 times better  but on average it was around 2-3 times better  It seems extreme performance spikes can work both ways  I only tested this in Chrome and creation to profile memory usage and overhead  I was quite surprised to see that in Chrome it appears that Maps with one key use around 30 times more memory than Objects with one key  For testing many small objects with all the above operations  4 keys   Chrome Object Took  61 Chrome Map Took  67 Firefox Object Took  54 Firefox Map Took  139  In terms of memory allocation these behaved the same in terms of freeing GC but Map used 5 times more memory  This test used 4 keys where as in the last test I only set one key so this would explain the reduction in memory overhead  I ran this test a few times and Map Object are more or less neck and neck overall for Chrome in terms of overall speed  In Firefox for small Objects there is a definite performance advantage over maps overall  This of course doesn t include the individual options which could vary wildly  I would not advice micro-optimizing with these figures  What you can get out of this is that as a rule of thumb  consider Maps more strongly for very large key value stores and objects for small key value stores  Beyond that the best strategy with these two it to implement it and just make it work first  When profiling it is important to keep in mind that sometimes things that you wouldn t think would be slow when looking at them can be incredibly slow because of engine quirks as seen with the object key deletion case

User · Answer

One aspect of the Map that is not given much press here is lookup  According to the spec   A Map object must be implemented using either hash tables or other mechanisms that  on average  provide access times that are sublinear on the number of elements in the collection  The data structures used in this Map objects specification is only intended to describe the required observable semantics of Map objects  It is not intended to be a viable implementation model   For collections that have a huge number of items and require item lookups  this is a huge performance boost  TL DR - Object lookup is not specified  so it can be on order of the number of elements in the object  i e   O n   Map lookup must use a hash table or similar  so Map lookup is the same regardless of Map size  i e  O 1

User · Answer

Additionally to being iterable in a well-defined order  and the ability to use arbitrary values as keys  except -0   maps can be useful because of the following reasons    The spec enforces map operations to be sublinear on average   Any non-stupid implementation of object will use a hash table or similar  so property lookups will probably be constant on average  Then objects could be even faster than maps  But that is not required by the spec  Objects can have nasty unexpected behaviors   For example  let s say you didn t set any foo property to a newly created object obj  so you expect obj foo to return undefined  But foo could be built-in property inherited from Object prototype  Or you attempt to create obj foo by using an assignment  but some setter in Object prototype runs instead of storing your value   Maps prevent these kind of things  Well  unless some script messes up with Map prototype  And Object create null  would work too  but then you lose the simple object initializer syntax

User · Answer

These two tips can help you to decide whether to use a Map or an Object    Use maps over objects when keys are unknown until run time  and when all keys are the same type and all values are the same type  Use maps in case if there is a need to store primitive values as keys because object treats each key as a string either its a number value  boolean value or any other primitive value  Use objects when there is logic that operates on individual elements    Source  https   developer mozilla org en-US docs Web JavaScript Guide Keyed Collections Object and Map compared

User · Answer

This is a short way for me to remember it  KOI   Keys  Object key is strings or symbols  Map keys can also be numbers  1 and  1  are different   objects  NaN  etc  It uses     to distinguish between keys  with one exception NaN     NaN but you can use NaN as a key  Order  The insertion order is remembered  So     map  or     map keys    has a particular order  Interface  Object  obj key  or obj a  in some language     and     are really part of the interface   Map has get    set    has    delete   etc  Note that you can use map 123  but that is using it as a plain JS object

User · Answer

Summary    Object  A data structure in which data is stored as key value pairs  In an object the key has to be a number  string  or symbol  The value can be anything so also other objects  functions etc  A object is an non ordered data structure  i e  the sequence of insertion of key value pairs is not remembered ES6 Map  A data structure in which data is stored as key value pairs  In which a unique key maps to a value  Both the key and the value can be in any data type  A map is a iterable data structure  this means that the sequence of insertion is remembered and that we can access the elements in e g  a for  of loop   Key differences    A Map is ordered and iterable  whereas a objects is not ordered and not iterable We can put any type of data as a Map key  whereas objects can only have a number  string  or symbol as a key  A Map inherits from Map prototype  This offers all sorts of utility functions and properties which makes working with Map objects a lot easier    Example   object    x000D   x000D  let obj       x000D   x000D     adding properties to a object x000D  obj prop1   1  x000D  obj 2        2  x000D   x000D     getting nr of properties of the object x000D  console log Object keys obj  length  x000D   x000D     deleting a property x000D  delete obj 2  x000D   x000D  console log obj  x000D   x000D   x000D    Map    x000D   x000D  const myMap   new Map    x000D   x000D  const keyString    a string   x000D      keyObj       x000D      keyFunc   function       x000D   x000D     setting the values x000D  myMap set keyString   value associated with  a string     x000D  myMap set keyObj   value associated with keyObj    x000D  myMap set keyFunc   value associated with keyFunc    x000D   x000D  console log myMap size      3 x000D   x000D     getting the values x000D  console log myMap get keyString           value associated with  a string   x000D  console log myMap get keyObj              value associated with keyObj  x000D  console log myMap get keyFunc             value associated with keyFunc  x000D   x000D  console log myMap get  a string           value associated with  a string   x000D                              because keyString      a string  x000D  console log myMap get                    undefined  because keyObj        x000D  console log myMap get function           undefined  because keyFunc     function       x000D   x000D   x000D    source  MDN

User · Answer

In addition to the other answers  I ve found that Maps are more unwieldy and verbose to operate with than objects   obj key     x    vs  map set map get key    x    This is important  because shorter code is faster to read  more directly expressive  and better kept in the programmer s head   Another aspect  because set   returns the map  not the value  it s impossible to chain assignments   foo   obj key    x      Does what you expect foo   map set key  x      foo     x  foo     map   Debugging maps is also more painful  Below  you can t actually see what keys are in the map  You d have to write code to do that     Objects can be evaluated by any IDE

User · Answer

When to use Maps instead of plain JavaScript Objects    The plain JavaScript Object   key   value    holds structured data  But plain JS object has its limitations      Only strings and symbols can be used as keys of Objects  If we use any other things say  numbers as keys of an object then during accessing those keys we will see those keys will be converted into strings implicitly causing us to lose consistency of types  const names   1   one   2   two     Object keys names          1    2   There are chances of accidentally overwriting inherited properties from prototypes by writing JS identifiers as key names of an object  e g  toString  constructor etc   Another object cannot be used as key of an object  so no extra information can be written for an object by writing that object as key of another object and value of that another object will contain the extra information  Objects are not iterators  The size of an object cannot be determined directly   These limitations of Objects are solved by Maps but we must consider Maps as complement for Objects instead of replacement  Basically Map is just array of arrays but we must pass that array of arrays to the Map object as argument with new keyword otherwise only for array of arrays the useful properties and methods of Map aren t available  And remember key-value pairs inside the array of arrays or the Map must be separated by commas only  no colons like in plain objects   3 tips to decide whether to use a Map or an Object     Use maps over objects when keys are unknown until run time because keys formed by user input or unknowingly can break the code which uses the object if those keys overwrite the inherited properties of the object  so map is safer in those cases  Also use maps when all keys are the same type and all maps are the same type   Use maps if there is a need to store primitive values as keys  Use objects if we need to operate on individual elements    Benefits of using Maps are    1  Map accepts any key type and preserves the type of key    We know that if the object s key is not a string or symbol then JS implicitly transforms it into a string  On the contrary  Map accepts any type of keys   string  number  boolean  symbol etc  and Map preserves the original key type  Here we will use number as key inside a Map and it will remain a number    const numbersMap  new Map     numbersMap set 1   one     numbersMap set 2   two     const keysOfMap      numbersMap keys      console log keysOfMap                              1  2    Inside a Map we can even use an entire object as a key  There may be times when we want to store some object related data  without attaching this data inside the object itself so that we can work with lean objects but want to store some information about the object  In those cases we need to use Map so that we can make Object as key and related data of the object as value    const foo   name  foo    const bar   name  bar    const kindOfMap    foo   Foo related data     bar   Bar related data       But the downside of this approach is the complexity of accessing the value by key  as we have to loop through the entire array to get the desired value    function getBy Key kindOfMap  key        for  const  k  v   of kindOfMap            if key     k                return v                      return undefined     getByKey kindOfMap  foo                  Foo related data    We can solve this problem of not getting direct access to the value by using a proper Map    const foo   name   foo     const bar   name   bar     const myMap  new Map     myMap set foo   Foo related data    myMap set bar   Bar related data     console log myMap get foo                   Foo related data    We could have done this using WeakMap  just have to write  const myMap  new WeakMap     The differences between Map and WeakMap are that WeakMap allows for garbage collection of keys  here objects  so it prevents memory leaks  WeakMap accepts only objects as keys  and WeakMap has reduced set of methods    2  Map has no restriction over key names    For plain JS objects we can accidentally overwrite property inherited from the prototype and it can be dangerous  Here we will overwrite the toString    property of the actor object    const actor        name   Harrison Ford       toString   Actor  Harrison Ford       Now let s define a fn isPlainObject    to determine if the supplied argument is a plain object and this fn uses toString    method to check it     function isPlainObject value        return value toString         object Object       isPlainObject actor             TypeError   value toString is not a function     this is because inside actor object toString property is a string instead of inherited method from prototype   The Map does not have any restrictions on the key names  we can use key names like toString  constructor etc  Here although actorMap object has a property named toString but the method toString    inherited from prototype of actorMap object works perfectly   const actorMap  new Map     actorMap set  name    Harrison Ford     actorMap set  toString    Actor  Harrison Ford     function isMap value      return value toString         object Map       console log isMap actorMap           true   If we have a situation where user input creates keys then we must take those keys inside a Map instead of a plain object  This is because user may choose a custom field name like  toString  constructor etc  then such key names in a plain object can potentially break the code that later uses this object  So the right solution is to bind the user interface state to a map  there is no way to break the Map    const userCustomFieldsMap  new Map    color    blue      size    medium      toString    A blue box        3  Map is iterable    To iterate a plain object s properties we need Object entries    or Object keys     The Object entries plainObject  returns an array of key value pairs extracted from the object  we can then destructure those keys and values and can get normal keys and values output    const colorHex       white     FFFFFF      black     000000     for const  color  hex  of Object entries colorHex       console log color  hex         white    FFFFFF      black    000000    As Maps are iterable that s why we do not need entries    methods to iterate over a Map and destructuring of key  value array can be done directly on the Map as inside a Map each element lives as an array of key value pairs separated by commas    const colorHexMap  new Map    colorHexMap set  white     FFFFFF    colorHexMap set  black     000000      for const  color  hex  of colorHexMap      console log color  hex        white    FFFFFF     black    000000    Also map keys    returns an iterator over keys and map values    returns an iterator over values   4  We can easily know the size of a Map  We cannot directly determine the number of properties in a plain object  We need a helper fn like  Object keys    which returns an array with keys of the object then using length property we can get the number of keys or the size of the plain object    const exams    John Rambo    80     James Bond    60      const sizeOfObj  Object keys exams  length   console log sizeOfObj            2   But in the case of Maps we can have direct access to the size of the Map using map size property   const examsMap  new Map    John Rambo    80       James Bond    60        console log examsMap size

[javascript] Map vs Object in JavaScript

Examples related to javascript

Examples related to dictionary

Examples related to ecmascript-6