변수 스코프(Scope)란 무엇인가?
변수의 스코프(scope)란 프로그램 내에서 해당 변수가 정의되어 유효한 영역을 의미합니다. JavaScript의 변수는 크게 두 가지 스코프를 가집니다.
전역 변수(Global Variable)
전역 변수는 전역 스코프를 가지며, JavaScript 코드 어디에서든 접근하고 사용할 수 있습니다. 일반적으로 함수 외부에서 선언된 변수가 전역 변수가 됩니다.
지역 변수(Local Variable)
지역 변수는 자신이 선언된 함수 내부에서만 유효합니다. 함수 밖에서는 이 변수에 접근할 수 없으며, 함수의 매개변수(parameter) 역시 항상 해당 함수에 국한된 지역 변수로 취급됩니다.
이름이 같을 때의 우선순위
함수 본문 안에서는 지역 변수가 같은 이름의 전역 변수보다 우선순위를 가집니다. 즉, 전역 변수와 동일한 이름으로 지역 변수나 함수 매개변수를 선언하면, 함수 내부에서는 전역 변수가 가려지고(shadowing) 지역 변수가 대신 사용됩니다.
예제
다음은 전역 변수와 지역 변수를 함께 선언하는 방법을 보여주는 예제입니다.
<html>
<body onload = checkscope();>
<script>
<!--
var myVar = "global"; // 전역 변수 선언
function checkscope( ) {
var myVar = "local"; // 지역 변수 선언
document.write(myVar);
}
//-->
</script>
</body>
</html>
이 예제에서 myVar는 먼저 전역 변수로 선언되었고, 이후 checkscope() 함수 내부에서 같은 이름의 지역 변수로 다시 선언되었습니다. 페이지가 로드되어 checkscope() 함수가 실행되면 함수 내부에서는 지역 변수가 우선하기 때문에, 화면에는 "global"이 아닌 "local"이 출력됩니다.
참고: var, let, const와 블록 스코프
ES6(ES2015)부터 도입된 let과 const는 함수 스코프뿐 아니라 중괄호({})로 묶인 블록 단위의 스코프도 지원합니다. 반면 var는 함수 스코프만 지원하기 때문에, 반복문 안에서 선언한 변수가 블록 밖에서도 접근 가능하는 등 의도치 않은 동작이 발생할 수 있습니다. 따라서 현대 JavaScript 개발에서는 변수 호이스팅 문제와 불필요한 전역 오염을 방지하기 위해 let과 const 사용을 권장합니다.