Zmienna wewnątrz funkcji staje się undefined

Cześć,

proszę pomóżcie z kodem poniżej
napisałem to dla pojedynczego, konkretnego checkboxa - odpala prawidłowo
nie rozumiem dlaczego od momentu $a.addEventListener('click', function() { zmienna categories[i] staje się undefined

window.onload = function() {
  categories = ["category1", "category2", "category3", "category4", "category5"];
  for(i = 0; i < categories.length; i++) {
    var $a = document.getElementById(categories[i]);
    if($a !== null) {
      $a.addEventListener('click', function() {
        console.log("categories: "+ categories[i]);
        $cbs = $('.project-types input[type=checkbox]');
        $cbs.each(function() {
          console.log($(this).attr('class') + " <-> "+ categories[i]);
          if($(this).attr('class') == categories[i])
          {
            $(this).click();
          }
        });
      });
    }
  }
}

W drugiej linijce nie powinno być var categories = ...?

W momencie, gdy to się wykonuje pętla już jest zakończona i zmienna i ma wartość 5, czyli jest poza tablicą. W takich sytuacjach dobrze jest zrobić dodatkową funkcję.

window.onload = function() {
  categories = ["category1", "category2", "category3", "category4", "category5"];
  for(const category of categories) {
    var $a = document.getElementById(category);
    if($a !== null) {
      $a.addEventListener('click', function() {
        console.log("categories: "+ category);
        $cbs = $('.project-types input[type=checkbox]');
        $cbs.each(function() {
          console.log($(this).attr('class') + " <-> "+ category);
          if($(this).attr('class') == category)
          {
            $(this).click();
          }
        });
      });
    }
  }
}

Chociaż inny typ pętli for też by chyba zadziałał.

Edit: dobra, nie trzeba funkcji. Nawet zmiana pętli na for(let i = 0; i < categories.length; i++), bo gdy użyjemy let to zmienna istnieje tylko w obrębie bloku.

Edit: zmieniłem na for..of