Есть ли связь между for…of и iterable

Да, есть. for...of работает с итерируемыми объектами (iterable). Объект считается итерируемым, если он реализует метод [Symbol.iterator](), который возвращает итератор. Итератор — это объект с методом next(), возвращающим { value, done }.

Пример:

const iterable = {
  [Symbol.iterator]() {
    let step = 0;
    return {
      next() {
        step++;
        if (step <= 3) {
          return { value: step, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (const value of iterable) {
  console.log(value); // 1, 2, 3
}

for...of автоматически вызывает [Symbol.iterator]() и использует возвращённый итератор для перебора значений. Встроенные типы, такие как Array, String, Map, Set — уже iterable.