Skip to content

Map vs Object JavaScript | Difference

  • by

The very first difference between Map vs Object is Map stores the data in the form of pairs (key and a value) and objects use key pair values to store data but the key values should be purely integers, strings, and symbols (primitive).

Here are basic differences:-

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

Use Map to prevent duplicity as the key pairs are made of unique keys and values that are mapped to the key itself. Map order of elements is not affected, unlike objects. The biggest advantage is the usage of keys of any type.

let map = new Map([iterable]);

Use object to contain data values with properties which can be weight, height, color, shape, or any other attribute. Objects provide flexibility in the declaration and are convenient as there is less coding needed during the declaration.

objectName.propertyName

Map vs Object JavaScript

Simple example code difference between both.

Declaration:

<!DOCTYPE html>
<html>
<body>
  <script>

    // Object
    var obj = {};
    var obj = {1:"Object Name", 2:"Test"};
    console.log(obj);
    
    // Map
    var map = new Map();
    console.log(map);
    var map = new Map([[1, "Sam"], [2, "John"]]); 
    console.log(map);
  </script>
</body>
</html>

Output:

Map vs Object JavaScript Difference

Accessing Element:

map.get(1);
obj.id;
obj[id];

Check if a key exists:

map.has(1);//returns boolean value true or false.
var doExist = obj.1 === undefined; //returns boolean value.

Adding Element:

map.set(4, 5);
obj["Demo"]="Map vs Object"; 

Get the size

console.log(map.size);
console.log(Object.keys(obj).length);

Here is a quick table of comparison detailing the differences between JavaScript map vs object.

ComparisonMapObject
Accidental KeysNo keys by default; only contains the inputHas default values as there is a prototype
Key TypesValues can be functions, objects, or primitiveCan be either string or a symbol
Key OrderOrder is simple and values are iterated in the same order they are insertedThe order of ordinary objects is ordered but the order is complex so reliance on the property order is still done carefully
SizeThe number of items can be collected from the size propertyManually determined
IterationDirectly iterableNot directly iterable and needs Object keys or Object entries methods
PerformanceBest for times when key-value pairs need to be removed or addedNot suitable for additions or removals of key-value pairs
Serialization and parsingNo native support for serialization or parsingNative support for serialization through Object to JSON and native support for parsing from JSON to Object

Key differences

  • The Map is an instance of an object but the vice-versa is not true.
var map = new Map();
var obj = new Object();
console.log(obj instanceof Map);   // false
console.log(map instanceof Object);  // true
  • In Object, the data type of the key-field is restricted to integers, strings, and symbols. Whereas in Map, the key-field can be of any data type (integer, an array, an object)
var map = new Map();//Empty
map.set(1,'1');
map.set('one', 1);
map.set('{}', {name:'Hello, World!'});
map.set(12.3, 12.3)
map.set([12],[12345])

for(let [key,value] of map.entries())
  console.log(key+'---'+value)
  • In the Map, the original order of elements is preserved. This is not true in the case of objects.
let obj ={
  1:'1',
  'one':1,
  '{}': {name:'Hello world'},
  12.3:12.3,
  [12]:[100]
}
console.log(obj)

Do comment if you have any doubts or suggestions on this Js map compared to the object topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading