변수 스코프(Scope)란 무엇인가?
변수의 스코프(scope, 범위)란 프로그램 내에서 해당 변수가 정의되어 있고 접근할 수 있는 영역을 의미합니다. 자바스크립트의 변수는 기본적으로 두 가지 범위를 가집니다.
- 전역 변수(Global Variable) – 전역 범위를 가지므로 자바스크립트 코드 어디에서든 정의되고 접근할 수 있습니다.
- 지역 변수(Local Variable) – 해당 변수가 선언된 함수 내부에서만 보이며, 함수 외부에서는 접근할 수 없습니다. 함수의 매개변수(parameter) 역시 항상 그 함수에 속한 지역 변수로 취급됩니다.
지역 변수와 전역 변수의 우선순위
함수 본문 안에서는 같은 이름을 가진 전역 변수보다 지역 변수가 우선합니다. 즉, 전역 변수와 동일한 이름으로 지역 변수나 함수 매개변수를 선언하면, 함수 내부에서는 전역 변수가 가려지는(shadowing) 현상이 발생하여 지역 변수만 사용됩니다.
예제
<html>
<body onload="checkscope();">
<script>
<!--
var myVar = "global"; // 전역 변수 선언
function checkscope() {
var myVar = "local"; // 지역 변수 선언
document.write(myVar);
}
//-->
</script>
</body>
</html>
이 예제에서 myVar는 두 번 선언됩니다. 하나는 스크립트 최상단의 전역 변수(값: "global")이고, 다른 하나는 checkscope() 함수 내부의 지역 변수(값: "local")입니다.
함수가 실행되어 document.write(myVar)가 호출되면 화면에는 "local"이 출력됩니다. 함수 내부에서는 같은 이름의 지역 변수가 전역 변수보다 우선하기 때문입니다.
추가로 알아두면 좋은 점
ES6(ECMAScript 2015)부터 도입된 let과 const는 함수뿐 아니라 블록({ }) 단위의 스코프를 가집니다. 반면 위 예제처럼 var로 선언한 변수는 함수 단위 스코프를 따르므로, 블록 안에서 선언해도 함수 전체에서 접근 가능합니다. 따라서 현대 자바스크립트에서는 의도치 않은 변수 충돌을 방지하기 위해 let과 const 사용이 권장됩니다.