질문있습니다

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

작성

197

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 바깥쪽으로 재 할당해야 출력이 되는건가요?

javascript 인터랙티브-웹

답변 1

코딩일레븐

지식공유자

h1의 경우에는 onload 안에서만 사용을 해서 지역변수로 사용한 겁니다.

밖으로 빼서 전역변수로 사용해도 문제 없습니다.

만약 onload 밖에서도 사용을 하는 cursor_item 을 h1과 같이 지역변수로 지정을 하면

에러가 나게됩니다. x,y, speed 등이 전부 전역변수로 되어 있는 이유도 같습니다.

bigkid young

질문자

제가 지역변수, 전역변수를 안배워서 무슨말인지 잘모르겠는데요..

혹시 제가 이해할 수 있게끔 설명과 이해할 수 있는 지식을 좀 주시면 감사하겠습니다..

코딩일레븐

지식공유자

전역변수는 어디서나 접근이 가능하고, 지역변수는 어느 하나의 함수 내에서만 사용가능한 변수입니다. 예를 들어

function loop(){
let a = 0;
console.log(a);
}

console.log(a);

이라면 a 는 loop() 함수안에서만 사용가능 한거죠.
함수 밖에서는 a 접근이 불가능합니다.
(위 코드를 실행시켜 보세요)

구글에 '전역변수 지역변수 차이' 검색하시면 더 자세한 설명이 많이 나옵니다.

인프런 커뮤니티 질문&답변

질문있습니다