Всё время голову ломал как это гуглить))

const style = {
  color: '#000000',
  ':hover': {
    color: '#ffffff'
  }
};

Здравствуйте! Исходя из личного опыта могу ответить почему так происходит. Основная причина, как я понял, более опытные эксперты могут меня поправить, это - область видимости переменных. Дело в том, что если вы пропишите вместо

(const i in names) {
}

(var i in names) {
}

то эту переменную "i" можно будет переопределить где-либо от куда к ней будет доступ. А если у вас в одном блоке кода (функция это или метод) присутствует два цикла итерации, то велика вероятность появления ошибок. Также, eslint учитывает naming conventions. И так, к пр меру, вместо (const i in names) лучше писать (const name in names) или (const card in cards). В связи с этим код становится более читаем и понятен для Ваших будущих коллег, так как если Вы решите строить карьеру в IT, то Вы вынуждены будете работать в команде. Надеюсь я Вам помог