Map vs Set: Modern Alternatives to Objects in JavaScript

Objects are a fundamental part of JavaScript, allowing us to store and manipulate key-value pairs. However, they come with some limitations. To address these shortcomings, Map and Set were introduced in 2015 (ES6). In this post, I'll explain what they are, how they work, and how they differ from traditional objects. Map A Map is a collection of keyed items. What sets it apart from an Object is that keys can be of any type, while keys in Objects must be of type string or symbols. let map = new Map(); map.set("1", "string 1"); map.set(1, "number 1"); map.set(true, "boolean"); console.log(map.get("1")); // string 1 console.log(map.get(1)); // number 1 let obj = { name: "John" }; map.set(obj, "user"); console.log(map.get(obj)); // user Some other differences between Maps and Objects, as listed on MDN, are: Key Order The keys in a Map are ordered by the order of their insertion, while the keys in Objects are not always ordered. Security A Map with user-entered values is safe because those values do not override the existing properties of the Map itself. In contrast, user-entered values in an Object can override its existing properties. MDN Set A Set is a collection of unique values without keys. Each value in a Set is unique --- duplicate values are not allowed. let set = new Set(); let apple = { fruit: "apple"}; let banana = { fruit: "banana"}; let orange = { fruit: "orange"}; set.add(apple); set.add(banana); set.add(orange); set.add(apple); // Ignored set.add(banana); // Ignored set.add(orange); // Ignored console.log(set); // Set(3) { { fruit: "apple" }, { fruit: "banana" }, { fruit: "orange" } } console.log(set.size); // 3 If we add arrays with the same values, they are treated as different entries, even if the content is identical. This is because arrays are reference types, and each array is a distinct object in memory. set.add(["fruit", "apple"]); set.add(["fruit", "apple"]); set.add(["fruit", "apple"]); console.log(set.size); // 3 In summary, Map and Set offer new ways to manage collections of data, providing features like flexible key types and unique value storage. I'll continue learning and writing about objects, including topics like prototypes and classes.

Mar 14, 2025 - 05:38

Map vs Set: Modern Alternatives to Objects in JavaScript

Objects are a fundamental part of JavaScript, allowing us to store and manipulate key-value pairs. However, they come with some limitations. To address these shortcomings, Map and Set were introduced in 2015 (ES6). In this post, I'll explain what they are, how they work, and how they differ from traditional objects.

Map
A Map is a collection of keyed items. What sets it apart from an Object is that keys can be of any type, while keys in Objects must be of type string or symbols.

let map = new Map();

map.set("1", "string 1");
map.set(1, "number 1");
map.set(true, "boolean");

console.log(map.get("1")); // string 1
console.log(map.get(1)); // number 1

let obj = { name: "John" };

map.set(obj, "user");
console.log(map.get(obj)); // user

Some other differences between Maps and Objects, as listed on MDN, are:

Key Order
The keys in a Map are ordered by the order of their insertion, while the keys in Objects are not always ordered.

Security
A Map with user-entered values is safe because those values do not override the existing properties of the Map itself. In contrast, user-entered values in an Object can override its existing properties.

MDN

Set
A Set is a collection of unique values without keys. Each value in a Set is unique --- duplicate values are not allowed.

let set = new Set();

let apple = { fruit: "apple"};
let banana = { fruit: "banana"};
let orange = { fruit: "orange"};

set.add(apple);
set.add(banana);
set.add(orange);
set.add(apple); // Ignored
set.add(banana); // Ignored
set.add(orange); // Ignored

console.log(set); 
// Set(3) { { fruit: "apple" }, { fruit: "banana" }, { fruit: "orange" } }
console.log(set.size);  // 3

If we add arrays with the same values, they are treated as different entries, even if the content is identical. This is because arrays are reference types, and each array is a distinct object in memory.

set.add(["fruit", "apple"]);
set.add(["fruit", "apple"]);
set.add(["fruit", "apple"]);

console.log(set.size);  // 3

In summary, Map and Set offer new ways to manage collections of data, providing features like flexible key types and unique value storage. I'll continue learning and writing about objects, including topics like prototypes and classes.