var vs let in the for loop explanation

Hi I need an explanation for the following.

When I run the code below, I get: TypeError ListItems[g] is undefined

const listItems = document.getElementsByTagName("li");

for (let g = 0; g < listItems.length; g++ ) {

listItems[g].addEventListener("mouseover", () => { listItems[g].textContent = listItems[g].textContent.toUpperCase(); });

listItems[g].addEventListener("mouseout", () => { listItems[g].textContent = listItems[g].textContent.toLowerCase(); });

}

And when I use this code it runs well:

const listItems = document.getElementsByTagName("li");

for (var g = 0; g < listItems.length; g++ ) {

listItems[g].addEventListener("mouseover", () => { listItems[g].textContent = listItems[g].textContent.toUpperCase(); });

listItems[g].addEventListener("mouseout", () => { listItems[g].textContent = listItems[g].textContent.toLowerCase(); });

}

The difference here is that the first uses 'var' in the for loop and the sencond uses 'let'.

I want to understand why that makes a difference. My understanding is that 'let' limits the variable to the block, whereas var is global and that with complicated programs 'let' is safer to limit the scope of the variable. In this context, why does it matter?

Thanks