변수의 범위(Scope, 스코프)란 프로그램 내에서 해당 변수가 정의되어 있고 접근할 수 있는 영역을 의미합니다. 즉, 어떤 변수를 코드의 어느 부분에서 사용할 수 있는지를 결정하는 규칙입니다. 자바스크립트의 변수는 크게 두 가지 범위를 가집니다.
1. 전역 변수(Global Variables)
전역 변수는 전역 범위(global scope)를 가지며, 스크립트 전체 어디에서든 선언 위치와 관계없이 접근하고 사용할 수 있습니다. 함수 외부에서 var 키워드로 선언한 변수는 모두 전역 변수가 됩니다.
2. 지역 변수(Local Variables)
지역 변수는 오직 해당 변수가 선언된 함수 내부에서만 유효합니다. 함수 밖에서는 이 변수에 접근할 수 없으며, 함수의 매개변수(parameter) 역시 항상 그 함수에 국한된 지역 변수로 취급됩니다.
전역 변수와 지역 변수의 우선순위
함수 본문 안에서는 같은 이름을 가진 전역 변수보다 지역 변수가 우선합니다. 만약 전역 변수와 동일한 이름으로 지역 변수나 함수 매개변수를 선언하면, 함수 내부에서는 전역 변수가 가려져(shadowing) 지역 변수만 참조하게 됩니다.
예제 코드
아래 코드를 실행하면 자바스크립트에서 변수 스코프가 어떻게 동작하는지 확인할 수 있습니다.
<html>
<body onload = checkscope();>
<script>
<!--
var myVar = "global"; // 전역 변수 선언
function checkscope( ) {
var myVar = "local"; // 지역 변수 선언
document.write(myVar); // "local" 출력
}
//-->
</script>
</body>
</html>
이 예제에서 myVar는 전역 변수와 지역 변수로 각각 한 번씩 선언되어 있습니다. checkscope() 함수가 실행되면 함수 내부의 지역 변수가 우선하기 때문에 화면에는 "local"이 출력됩니다.
참고: ES6의 블록 레벨 스코프
ES6(ECMAScript 2015)부터 도입된 let과 const는 함수 단위가 아닌 블록 단위({ })의 스코프를 가집니다. 따라서 if문이나 for문 같은 코드 블록 안에서 선언된 변수는 블록 밖에서 접근할 수 없습니다. 반면 기존의 var는 함수 레벨 스코프를 따르므로, 의도치 않은 변수 노출을 방지하려면 let과 const 사용을 권장합니다.