Для чего нужен цикл for...of, если есть цикл for...in

for-of - цикл по ЗНАЧЕНИЯМ. В for-of можно использовать генератор, множество (set), ассоциативный массив (map) и нельзя использовать объект.

for-in - цикл по КЛЮЧАМ. В for-in можно использовать объект и нельзя использовать генератор, множество, ассоциативный массив.

Массив можно использовать и там, и там: for-in эффективнее, когда нужны индексы элементов массива, for-of эффективнее, когда требуются только значения, а индексы не важны.

Генераторы (сопрограммы): https://learn.javascript.ru/generator
Ассоциативные массивы и множества: https://learn.javascript.ru/map-set

Циклы for in, for of это все синтаксический сахар. Отличие заключается в том что for in увеличивает индекс по которому можно получать доступ к элементам массива, а for of сразу же позволяет получить объект массива. Ещё есть отличия по прототипам, for in выводит кастомные методы, но как по мне ситуация достаточно спецефическая...

Циклы for...of используются в итерируемых объектах, где используется метод Symbol.iterator например, строку можно перебрать по символам, используя for(let letter of "hello world") при каждом проходе, переменная letter получает каждый символ, также можно перебрать объект типа Array то есть массивы, можно перебрать любой объект который имеет метод Symbol.iterator.

Цикл for...of работает следующим образом, сначала у итерируемого объекта вызывается метод Symbol.iterator, он возвращает новый объект, который связан с текущим итерируемым объектом, этот объект в свою очередь имеет метод next и другие свойства необходимые для его работы, метод next возвращает ответ в виде объекта return { done: false, value: this.current++ } если перебираемые данные не закончились и return { done: true }; в случае если данные были закончены. Используя эти данные for...of может либо продолжить работу, либо прекратить, если возвращается объект со cвойством done: true; цикл прекращает свою работу, а если наоборот, то он берет значение из свойства value и присваивает в переменную объявленную программистом в цикле for...of

Цикл for...in это стандартный цикл для перебора объектов, он появился еще с самого рождения JavaScript, а for...of появился намного позже.

Вообще чтобы понять всю мощь for...of для начала нужно познакомиться, с перебираемыми или итерируемыми объектами, с этим можно познакомиться в этой
статье учебника https://learn.javascript.ru/iterable

Есть еще функции-генераторы, они по умолчанию возвращают объект содержащий свойство done, который позволяет остановить работу цикла. С генераторами можно ознакомиться здесь https://learn.javascript.ru/generators но прежде чем, лезть в эту тему, стоит сначала познакомиться с понятием итерируемых объектом и тем чем они могут отличаться от других.

Объяснение может показаться сложным и непонятным с первого взгляда, но это нормально для новичка, чтобы во всем разобраться, тебе надо поизучать немного и тогда все эти вопросы отпадут со временем.