I left out "let" when initializing a loop and spent ages debugging. Can someone help me understand scope here?

Thank you for the thorough response! You're spot on with what I thought was happening, and I'm kicking myself for not thinking to log i in the console to troubleshoot -- very useful trick. I had gotten it to work with event.target but didn't understand the why so this is very helpful.

Can you expand on why using let i=0 gives the proper values of [i]? Does this mean that when the function is initially passed to the event listener it's giving the current value of [i] in the loop as opposed to the variable itself? I'm a bit fuzzy on why let seems to "lock in" the variable at the loop value. For an example here's Guil's code from the video:

/* Guil's code copied from video, works with 'listItems[i]' in event handler*/

for (let i = 0; i< listItems.length; i +=1) {
  listItems[i].addEventListener('mouseover', () => {
    listItems[i].textContent = listItems[i].textContent.toUpperCase();
  });
  listItems[i].addEventListener('mouseout', () => {
    listItems[i].textContent = listItems[i].textContent.toLowerCase();
  });
}

No problem! Glad to be of help. Sorry for not responding immediately I just got back from work. So let's (haha) jump into this!

let works because it is a scoped variable that is scoped to the block-level whereas the var variable is scoped to the global-level.

What Does This Mean?

Global level should be self explanatory, it means that the code is reference-able from anywhere in that file. It basically leaked into window (or parent) scope through the use of hoisting.

Block level however, means that the variable is locked to a block. What is a block? Anything in a curly brace. So basically any code in here:

{
// Code found between these curly braces are in the block-level
}

As an example to see this in action (Do this in your workspaces don't do it in the developer console as the developer console is all scoped):

var i = 10;
if(i == 10) {
    var i = 18;
    console.log(i);
}
console.log(i);

When you run this, you'll get 18 for both console logs. Why? Because of hoisting var scoped variables are locked to the global scope, so the interpreter actually sees this:

var i;
i = 10;
if(i == 10) {
    i = 18;
    console.log(i);
}
console.log(i);

This is why when you use code that doesn't run at the same time as other code (promises, timeouts, events), it uses the end result of that scoped variable because the variable has already been set.

So how does let change this? Well let's see, change the code in the previous post to be let instead:

let i = 10;

if(i == 10) {
    let i = 18;
    console.log(i);
}
console.log(i);

When you run this, you'll get: 18, and then respectively 10. What we basically expect, because the code inside the curly braces of that if statement, are it's own thing, the interpreter would basically (not exactly, but you'll get the point) see it like this:

var i;
i = 10;
if(i == 10) {
    var i_2;
    i_2 = 18;
    console.log(i_2);
}
console.log(i);

As you can see the let variable inside the if statement is treated like it's own variable as opposed to the let outside of the if statement.

So why does let work for the loop? Well let's give an example using var and an example using let on a simplified version of your code, and demonstrating the result of what it looks like when the event is fired:

for (i=0; i<2; i++) { // Equivalent to: var i = 0; i < 2; i++
  listItems[i].addEventListener ('mouseover', () => {
    listItems[i].style.textTransform = "capitalize";
  });
  listItems[i].addEventListener ('mouseout', () => {
    listItems[i].style.textTransform = "lowercase";
  });
}

When interpreted looks like this:

var i;
for(i = 0; i < 2; i++) { //first iteration
   i = 1; // second iteration
   i = 2; // end result loop satisfied
   // Loop code goes here .....
}
// When the event is fired:
// it will be the same regardless of the item moused over because they are all referring to i
listItems[i].style.textTransform = "capitalize"; 

See how this will cause problems? Now let's look at let:

for (let i=0; i<2; i++) {
  listItems[i].addEventListener ('mouseover', () => {
    listItems[i].style.textTransform = "capitalize";
  });
  listItems[i].addEventListener ('mouseout', () => {
    listItems[i].style.textTransform = "lowercase";
  });
}

When interpreted looks like this:

for(var i; i < 2; i++) {
    var i;
    var i_2;
    var i_3;
    i = 0; // first iteration
    i_2 = 1; // second iteration
    i_3 = 2; // end result loop satisfied (don't worry about how it determines this for now, you can research it if you want)
}
// When event is fired:
listItems[i].style.textTransform = "capitalize";
// When the second list item is fired
listItems[i_2].style.textTransform = "capitalize";

Now do you see how it would work and why it works for let vs var? (It won't work for const because const cannot be overwritten which is necessary for a loop)

Hope that helps!

You're a legend Dane! I really appreciate you taking the time to help and to write all of it out -- you've cleared up SO much of my confusion here :)

No problem man, glad to be of help. Just keep doing what you're doing, you're asking the right questions and thinking critically, that's the makings of a successful programmer.