For с массивом

Суть цикла в том, чтобы несколько раз повторить некоторые действия.

В случае с вашим циклом for каждый повтор действия совершается со своим значением i.
При первом прохождении i = 0, при втором - i = 1, при третьем - i = 2 и так далее.
Цикл продолжает выполняться, пока соблюдается условие i < userNames.length.

 for (a ; b ; c) { d; } 

эквивалентно (за исключением нюансов) конструкции:

 { a; while (b) { d; c; } } 

Т.е. твой код полностью эквивалентен коду:

 let i = 0; // Перед началом цикла i равно 0

while (i < userNames.length) { // повторяем, пока i меньше userNames.length

  console.log(userNames[i]);

  i += 1; // Увеличиваем i на 1

} 

Но в твоём случае проще и эффективнее использовать другой вид цикла:

 for (let name of userNames.length) {

  console.log(name);

} 

, который обходит элементы массива без возни с индексами.

i нужен для работы цикла, это просто переменная со значением 0, к которой дальше прибавляется 1, для последующего цикличного выведения элементов в массиве, обычно просто пишут i++

 for (объявление переменной; условие продолжения цикла; изменение переменной) {блок} 

В Вашем примере начальное значение равно 0 и первый раз блок выполнится с i=0. После выполнения блока произойдет изменение i+=1 и она станет равной 1. Далее будет проверка условия i < userNames.length, и если оно верно, то блок снова выполнится, но уже с i=1. И так далее, пока будет верно условие.