Today we are going to show you a tutorial about Map and Set in JavaScript in our JavaScrip ES6+ free crash course 2025 of which key ES6+ features. Before this we have already defined tons of different fundamentals of JavaScript that are primary to understand it completely and methodically. However, laden with relatable and real-life code examples those features are Arrow Functions, Destructuring, Rest Operators, Template Literal Classes & Inheritance, Modules promises, Aync/Await , Const, Let & Block Scoping, Enhanced Object Literals and also default parameters.
Well as far as the Map and Set are concerned they are the new data structures introduced in ES6. So let’s see the code example bellow for Map and Set how effectively we could use it in real-time:
// Map
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // 'value1' console.log(map.has('key2')); // true
console.log(map.size); // 2
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
// Set
const set = new Set([1, 2, 3, 3, 4, 5]);
console.log(set.size); // 5 (duplicate 3 is ignored)
set.add(6);
console.log(set.has(4)); // true set.delete(2);
set.forEach(value => { console.log(value);
});
// Converting Set to Array
const uniqueArray = [...set];Big Takeaways
- So we can use Map when do we need key-value pairs with keys of any type. While we would use Set for storing unique values and efficient lookups.
- Consider WeakMap and WeakSet for objects as keys to avoid memory leaks.
Major Issues That Devs Face
- Forgetting that Map preserves insertion order while regular objects don’t.
- Not using the correct methods (e.g., using map[key] instead of map.get(key)).
