JavaScript небольшой вопрос по циклу

Если не ошибаюсь - это передается параметр в самовызываемую функцию

Цикл быстрей отработает чем первый addEventListener выполниться. На тот момент когда отработает первый addEventListener переменная i может в себе содержать последний элемент массива или вообще undefined.

А так можно сказать вы замороживаете переменную i для каждого выполнения addEventListener.

Если я вас правильно понял, то в результате выполнения этого кода

for (var i = 0; i < 20; i++) {

    console.log('outside: '+i);

    (function(i) {

        for (var j = 0; j < 1000000000; j++) {

        }

        console.log('inside: '+i);

    }(i));

}

должно сначала 20 раз вывестить console.log('outside: '+i);

А потом уже выполняться console.log('inside: '+i);

Но во время моего тестирования они чередуются

Потому что событий нет асинхронных. По сути это анонимная функция, ее можно так записать и вызвать

let item = function(){

 console.log('it is function ');

}

item();

а можно вот так:

(function (){

  console.log('it is function ');

})();

Первые () - это функция, вторые () мы ее вызываем.

Можно параметр переедать при вызове во вторых кнопках и использовать в анонимной функции:

let parameter = 'параметр';

(function (parameter){

  console.log('it is function width: '); // выдаст 'it is function width: параметр'

})(parameter);

Вот и вашем втором примере вы передаете в параметр необходимый i в функцию.

К примеру пошла первая итерация цикла i=0

addEventListener - функция асинхронная, когда сработаем вызывается коллбек и первый вызов занимает 50 милисекунд.

Что бы цикл завершился нужно 2 милисекунды.

В итоге в первом примере когда у вас сработает и исполниться первый вызов addEventListener - цикл уже отработает и i не будет равен 0, может уже будет равен 50 или вообще undefined. Тогда как второй пример замыкает i в анонимную функцию и передаст корректный i даже если цикл уже отработается и если даже i вообще не будет существовать.