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:-
- 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!)
- The map has the original order of elements preserved. This is not true in the case of objects.
- 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.propertyNameMap 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:
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.
| Comparison | Map | Object |
| Accidental Keys | No keys by default; only contains the input | Has default values as there is a prototype |
| Key Types | Values can be functions, objects, or primitive | Can be either string or a symbol |
| Key Order | Order is simple and values are iterated in the same order they are inserted | The order of ordinary objects is ordered but the order is complex so reliance on the property order is still done carefully |
| Size | The number of items can be collected from the size property | Manually determined |
| Iteration | Directly iterable | Not directly iterable and needs Object keys or Object entries methods |
| Performance | Best for times when key-value pairs need to be removed or added | Not suitable for additions or removals of key-value pairs |
| Serialization and parsing | No native support for serialization or parsing | Native 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