Page 21 -
P. 21
반면에 어휘적 유효 범위를 따르는 변수를 선언한 경우에는 함수 내부 어디서
든 접근할 수 있습니다. 이 경우 if 블록 내부에서 생성한 변수를 함수 내부의
*
다른 곳에서 접근할 수 있습니다. 사실은 호이스팅(hoisting) 이라는 컴파일 과
정 덕분에 변수가 선언되기도 전에 접근할 수 있습니다.
설명이 너무 추상적이었나요? 예제를 보면 더 이해하기 쉽습니다. 혹시 어휘적
유효 범위로 인한 문제를 경험한 적이 있다면, 아마도 다음 예제처럼 여러 개의
DOM 요소에 클릭 함수를 연결하는 경우였을지도 모르겠습니다.
variables/scope/scope.html
<!doctype html>
<html lang="ko">
<body>
<ul style="cursor:pointer">
<li> 클릭하면 0 </li>
<li> 클릭하면 1 </li>
<li> 클릭하면 2 </li>
</ul>
</body>
<script>
const items = document.querySelectorAll('li');
for(var i = 0; i< items.length; i++) {
items[i].addEventListener('click', () => {
alert(i);
})
};
</script>
</html>
브라우저에서 코드를 열고 목록 요소를 하나씩 클릭해봅시다. 모든 요소가 동
일하게 알림 창으로 3을 표시합니다.
* https://developer.mozilla.org/ko/docs/Glossary/Hoisting (단축 URL: https://mzl.la/36JekV1)
034
코딩의기술_자바_07.indd 34 2019-12-13 오전 10:27:03
