var, let keyword'ünün kullanım farkları.

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <a href="javascript:void(0)" class="var">var 1</a>
    <a href="javascript:void(0)" class="var">var 2</a>
    <a href="javascript:void(0)" class="var">var 3</a>
    
    <a href="javascript:void(0)" class="let">let 1</a>
    <a href="javascript:void(0)" class="let">let 2</a>
    <a href="javascript:void(0)" class="let">let 3</a>
    <script src="script.js"></script>
  </body>

</html>

var links = document.querySelectorAll('a.var');
for(var i = 0, len = links.length; i < len; i++) {
    links[i].addEventListener('click', (e) => {
        alert('var: You clicked on link ' + i)
    }, false)
}

var links = document.querySelectorAll('a.let');
for(let i = 0, len = links.length; i < len; i++) {
    links[i].addEventListener('click', (e) => {
        alert('let: You clicked on link ' + i)
    }, false)
}

a.var, a.let {
  display: block;
  margin: 5px;
  color: white;
  padding: 5px;
  text-decoration: none;
  border-radius: 5px;
}

a.var {
  background-color: blue;
}

a.let {
  background-color: red;
}