질문있습니다

let cursor_item; 

let x = 0;

let y = 0;

let mx = 0;

let my = 0;

let speed = 0.09;

window.onload = function() {

  let h1 = document.getElementsByTagName("h1")[0];

  cursor_item = document.getElementsByClassName("cursor_item")[0]

  window.addEventListener("click", mouseFunc, false);

function mouseFunc(e) {

  x = e.clientX;

  y = e.clientY;

  h1.innerHTML = "x: "+  x  + "y :" + y;

  }

 loop();

}

function loop() {

  console.log(x);

  mx += (x - mx) * speed;

  my += (y - my) * speed;

  console.log(x, mx)

 cursor_item.style.transform = "translate("+ mx + "px," + my+ "px)";

 window.requestAnimationFrame(loop);

}

window.onload - function () {

let h1

cursor_item  

}

왜 let 변수 h1은 가만히 냅두고 cursor_item은

onload  바깥쪽으로 재 할당해야 출력이 되는건가요?