[문제 해결] var를 쓰지 말자

처음에는 이런 함수를 만들어놓고, displayTooltip();으로 실행시켰다.

displayTooltip(){
  for (var i = 0; i < data.length; i++) {
    const textElement = document.getElementsByClassName("title")[i];
    const textContent = textElement.textContent;
    const textLength = textContent.length;

    var selectedTitle = document.getElementsByClassName("title");
    selectedTitle = selectedTitle[i];
    var titleTooltip = document.getElementsByClassName("tooltipTitle");
    titleTooltip = titleTooltip[i];

    selectedTitle.addEventListener("mouseover", () => {
      titleTooltip.style.display = "block";
    });
    selectedTitle.addEventListener("mouseout", () => {
      titleTooltip.style.display = "none";
    });
  }
}

문제 없이 잘 돌아갔고.. 실행 시간을 줄이고자 함수 밖으로 빼서 for 문으로 추가해주었다.

for (var i = 0; i < data.length; i++) {

	(다른 코드 생략)

  const textElement = document.getElementsByClassName("title")[i];
  const textContent = textElement.textContent;
  const textLength = textContent.length;

  var selectedTitle = document.getElementsByClassName("title");
  selectedTitle = selectedTitle[i];
  var titleTooltip = document.getElementsByClassName("tooltipTitle");
  titleTooltip = titleTooltip[i];

  selectedTitle.addEventListener("mouseover", () => {
    titleTooltip.style.display = "block";
  });
  selectedTitle.addEventListener("mouseout", () => {
    titleTooltip.style.display = "none";
  });
}

근데 분명 잘되던 얘가 갑자기 title의 마지막 요소에만 이벤트 리스너를 추가하기 시작했다. (다른 코드 생략) 부분에는 분명히 문제의 코드와 같은 로직을 가지고 있는 코드가 있었다. 근데 그 부분은 잘만 실행되고 문제의 저 부분만 작동을 안하는 거다...!

엄청나게 헤매다가 모든게 var 때문이라는 것을 알게 되었다.

var, let과 스코프

1. var는 함수 안에서만 지역 변수로 작동한다.
   for, while 등등에서는 마치 전역 변수처럼 작동한다..
2. 반면 let은 모든 코드 블록에서 지역 변수로 작동한다.
   함수, for, while, if, try/catch 안에서도 지역 변수로 작동한다.

그래서 for문이 돌 때마다.. var selectedTitle[i]는 selectedTitle[1], selectedTitle[2] ... selectedTitle[data.length-1]까지 계속 변했고 이벤트 리스너는 나중에 실행될 때 i의 현재 값에 접근해서 마지막 요소에만 이벤트 리스너가 추가 되었던 것이다.

var selectedTitle -> let selectedTitle
var titleTooltip -> let titleTooltip
로 수정하고 문제가 해결 되었다.

let에서는 고유의 인덱스 i 값이 제대로 전달되어 잘 작동했다.