This content originally appeared on DEV Community and was authored by Praveen Sripati
A quick guide to choosing the right data structure over plain Objects and Arrays.
Map vs. Object
Think of a Map as a perfect dictionary.
With a regular JavaScript Object, the "words" (keys) you look up can only be simple text (strings). This is limiting.
A Map is better because the keys can be anything—a number, a boolean, or even another object. It remembers the exact key you used. It also reliably keeps everything in the order you inserted it.
Use Map when you need more than just string keys, care about insertion order, or require frequent additions and deletions.
Map - Quick Reference
// --- Creation ---
const myMap = new Map([
['key1', 'value1'],
[123, 'value2']
]);
// --- Set / Add ---
myMap.set('newKey', 'newValue');
myMap.set({ id: 1 }, 'metadata'); // Object as a key
// --- Get ---
myMap.get('newKey'); // 'newValue'
myMap.get(123); // 'value2'
// --- Check Existence ---
myMap.has('key1'); // true
// --- Delete ---
myMap.delete(123); // true
// --- Size ---
myMap.size; // 2
// --- Iterate ---
for (const [key, value] of myMap) {
console.log(key, value);
}
// --- Clear ---
myMap.clear();
Set vs. Array
Think of a Set as a members-only guest list.
On a guest list, each person is unique; you can’t be on the list twice. The main purpose is to quickly check if someone is on the list.
A Set does exactly this: it only stores unique values. If you try to add something that's already there, it's simply ignored. Its main strength is being incredibly fast at checking for an item with .has(), much faster than searching through a large array.
Use Set when you need to store a collection of unique values and perform fast membership checks.
Set - Quick Reference
// --- Creation / Remove Duplicates ---
const myArr = [1, 2, 2, 3, 4, 4];
const mySet = new Set(myArr); // Set(4) { 1, 2, 3, 4 }
// --- Add ---
mySet.add(5);
mySet.add(1); // Ignored, 1 already exists
// --- Check Existence ---
mySet.has(3); // true
mySet.has(99); // false
// --- Delete ---
mySet.delete(4); // true
// --- Size ---
mySet.size; // 4
// --- Iterate ---
for (const value of mySet) {
console.log(value);
}
// --- Clear ---
mySet.clear();
// --- Convert back to Array ---
const uniqueArray = [...mySet]; // [1, 2, 3, 5]
Want to see a random mix of weekend projects, half-baked ideas, and the occasional useful bit of code? Feel free to follow me on Twitter! https://x.com/praveen_sripati
This content originally appeared on DEV Community and was authored by Praveen Sripati
Praveen Sripati | Sciencx (2025-06-27T13:30:17+00:00) Map, Set, Go! A Quick Guide to Modern JavaScript Data Structures. Retrieved from https://www.scien.cx/2025/06/27/map-set-go-a-quick-guide-to-modern-javascript-data-structures/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.