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 }

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