[FC] 변수의 유효범위 및 호이스팅 / 키보드 관련 이벤트 Day-12

변수의 유효범위

전역변수

• 코드 블록 밖에서 선언된 변수
• 해당 코드 전역에 걸쳐서 접근 가능
• 여러개의 서로 다른 함수들이 같은 값을 공유해야 될 때 전역변수 사용
• 전역변수가 많아지면 오염이 발생하기 때문에 꼭 필요한 경우에만 사용 (따라서 오염을 방지하기 위해 지역변수를 사용한다.

지역변수 (코드 블록)

• 코드블록 안에서 선언된 변수
• 해당 코드블록 안에서만 접근 가능
• 변수값이 해당 코드블록 안에서만 전용으로 써야 할 때 지역변수를 사용한다.

호이스팅(hoisting)

• 블록 안에서 선언된 지역변수가 코드블록 밖으로 끌어 올려지면서 강제로 전역변수가 되는 현상

<ul>
	<li>버튼1</li>
  	<li>버튼1</li>
    <li>버튼1</li>
</ul>

<script>main.js</script>

ex) main.js

function test(){
	var num = 5;
    console.log(num);
}

test(); // 5를 출력한다.

console.log(num); // 현재 num은 지역변수이기 때문에 코드블록 밖에서 접근할 수 없다. (에러를 발생 시킴)

const btns = document.querySelectorAll("ul li");

for(let i = 0; i < btns.length; i++){
	btns[i].addEventListener("click", (e) => {
    	console.log(i);
    }
}

ex) 전역변수를 통해 변수 받아오기

var num = null;

function test(){
	num = 5;
    console.log(num);
}

test(); // 5를 출력한다.

console.log(num); // 5를 출력한다.
num이 function test를 통해서 num=5를 대입받았고 5로 변경된 상태다.

ex) 호이스팅 예시 (잘못 사용하면 에러를 발생시킨다.)

따라서 var를 사용하기보다는 let을 사용해야 좋다.

const btns = document.querySelectorAll("ul li");

for(var i = 0; i<btns.length; i++){
	btns[i].addEventListener("click", (e) => {
    	console.log(i);
    }
}

키보드 관련 이벤트

• keydown: 특정 버튼을 누르고 있을 때
• keyup: 특정 버튼을 누르고 뗐을 때
• keypress: 키를 누르고 있을 때 (문자 관련 키만 동작) 일반적으로 keydown을 더 많이 사용하고, keydown보다 keyup을 많이 사용한다.

window.addEventListener("keydown", (e) => {
	console.log("keydown");
} // 특정 버튼을 눌렀을 때 console에 찍힌다.

window.addEventListener("keyup", (e) => {
	console.log("keyup");
}

// 특정 버튼을 누르고 떼면 작동한다.
```![](https://velog.velcdn.com/images%2Fcptkuk91%2Fpost%2F1bb3bdbf-48ab-4a53-9585-2c140c4c0c64%2Fclout.jpeg)