for...of, Sets & Maps Essentials
ES6 added cleaner loops and two collection types: Set (unique values) and Map (key-value with any key type). Useful for tags, permissions, and caching.
for...of — loop values cleanly
const lessons = ['let/const', 'arrows', 'async'];
for (const lesson of lessons) {
console.log('Study:', lesson);
}
for (const char of 'ES6') {
console.log(char); // E, S, 6
}Use for...of on arrays and strings. Use for...in only for object keys (less common in modern code).
Set — unique list
const tags = new Set(['javascript', 'es6', 'react', 'es6']);
tags.add('node');
tags.has('react'); // true
tags.size; // 4 — duplicate 'es6' stored once
const uniqueEmails = [...new Set(emailList)];Map — dictionary with any keys
const lessonProgress = new Map();
lessonProgress.set('user-42', { completed: 5, total: 12 });
lessonProgress.set('user-99', { completed: 12, total: 12 });
lessonProgress.get('user-42'); // { completed: 5, total: 12 }🌍 Real-world example — Track unique visitors per day
function countUniqueVisitors(visitLog) {
const visitors = new Set(visitLog.map(v => v.userId));
return visitors.size;
}
countUniqueVisitors([
{ userId: 'a1', page: '/tutorials' },
{ userId: 'a2', page: '/ebooks' },
{ userId: 'a1', page: '/blogs' }
]); // 2 unique users💡 Tip: Convert Set to array:
[...mySet] — spread works on iterables.⚠️ Common Mistake: Using Set or Map without new:
Set() throws — always new Set().👨🏫 Teaching note: Compare object {} vs Map when keys are dynamic strings vs numeric IDs — Map wins for frequent add/delete.