Как работает for of в javascript?

Question

[Spvrk]

Прохожу задания на html academy. Остановился на испытание с виртуальной клавиатурой, которое так и не понял как делать, но нашёл решение:

let keys = document.querySelectorAll('.key');
let display = document.querySelector('.display');
let clear = document.querySelector('.clear');

for ( let keysCount of keys) {
  keysCount.onclick = function () {
    display.textContent = display.textContent + keysCount.textContent;
  }
};

clear.onclick = function () {
  display.textContent = '';
}

Всё понятно, за исключением цикла for of. Если он просто перебирает элементы, тогда почему останавливается именно на той букве которое вводит пользователь? Или я что-то не понимаю про этот цикл?

Comments

[Adamos]

Или я что-то не понимаю про этот цикл?

Вы, видимо, чего-то не понимаете про конструкцию
.onclick = function

[Spvrk]

Adamos, Действительно, теперь понял почему так, благодарю

Answer 1

[Arman Hovhannisyan]

For of просто перебирает элементы и привязывает ко всем кнопкам событие клик, и все он один раз заработал привязал событие к кнопкам и всё, и уже когда на какую то кнопку нажали вызывается анонимная функция в контексте для конкретной кнопки.
forof просто цыкл как и for и смысла он тут не меняет, и вообще можно было бы сделать более красиво с for использую event или this пример.

for(let i =0; i<keys.length; i++){
keys[i].onclick = function() {
display.textContent +=this.textContent;
  }
}

Comments

[Spvrk]

Большое спасибо, теперь стало намного понятнее

[Arman Hovhannisyan]

Да не за что))

Answer 2

[Валентин Бируля]

Гугл бан?
https://developer.mozilla.org/ru/docs/Web/JavaScri...