 |
In JavaScript, both objects (Object) and maps (Map) can be used to store key-value pairs. However, there are fundamental differences between the two, both in terms of behavior and performance. Knowing these differences is crucial for choosing the most suitable data structure for each situation.
1. Key Types
One of the most obvious differences is the type of keys that can be used.
- Objects: Keys are always converted to strings (or
Symbols). - Maps: Keys can be of any type, including objects, functions, and primitives.
Example:
const obj = {};
const map = new Map();
const keyObj = { id: 1 };
obj[keyObj] = 'value';
map.set(keyObj, 'value');
console.log(obj[keyObj]); // 'value', but the key has been converted to "[object Object]"
console.log(map.get(keyObj)); // 'value', the key is kept intact
2. Iteration Order
- Objects: The order of properties is not guaranteed (although in modern browsers it is predictable for most cases).
- Maps: They maintain the insertion order of keys.
Example:
const obj = { b: 2, a: 1 };
const map = new Map([['b', 2], ['a', 1]]);
console.log(Object.keys(obj)); // ['b', 'a'] (but not guaranteed in all JS engines)
console.log([...map.keys()]); // ['b', 'a'] — guaranteed
3. Performance
- Objects: Optimized for simple property sets and gets.
- Maps: Optimized for frequent add/remove operations and dynamic key collections.
General: If you have a large number of dynamic operations (inserts/deletes), a Map will perform better.
4. Methods and properties
- Objects: They have a limited set of useful methods (such as
Object.keys,Object.entries, etc.). - Maps: They offer very convenient built-in methods (
set,get,has,delete,clear, etc.).
Example:
const map = new Map();
map.set('name', 'Alice');
map.set('age', 30);
console.log(map.has('name')); // true
map.delete('age');
console.log(map.size); // 1
5. Prototype Pollution and Inheritance
- Objects: They inherit from
Object.prototype, which can cause problems (e.g.,obj['toString']). - Maps: They have no inherited properties by default; they are "clean."
Problematic example:
const obj = {};
console.log(obj['toString']); // function, inherited
With Map, this doesn't happen:
const map = new Map();
console.log(map.get('toString')); // undefined
When to use Map
Use a MapWhen:
- You need non-string keys (e.g., objects, functions).
- You need to maintain the insertion order of the keys.
- You have a dynamic collection and frequent add/remove operations.
- You want to avoid interference with inherited properties.
- You need better performance on set/get/has/delete.
When to use Object
Use an object when:
- You need to represent entities with known, static properties.
- You want to use literal notation (
{}) for simplicity. - The keys are all strings and known a priori.
- You want to benefit from techniques like destructuring or object spread.
Classic example:
const user = {
name: 'Alice',
age: 30,
role: 'admin'
};
console.log(user.name); // 'Alice'
Conclusion
In modern JavaScript, Map is often preferable to Object for dynamic and complex data structures, due to its flexibility and better performance. However, objects remain ideal for representing entities with known properties, in a simple and readable way.
The choice between Map and Object is not only technical, but also semantic: ask yourself what you are representing and how you will interact with that data.
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
