JavaScript 프로그래밍에서 유효범위를 잘 알아야 하는 이유는 무엇일까? 스코프(Scope, 유효범위) 란 JavaScript 뿐만 아니라 모든 프로그래밍 언어 코드의 가장 기본적인 개념의 하나로 반드시 알아야 한다. 유효범위의 개념을 모르면 관련된 다른 개념 역시 혼란스러울 수 있다.
유효범위의 종류는 크게 두 가지가 있는데 하나는 전역 유효범위(Global Scope), 다른 하나는 지역 유효범위(Local Scope)이다. 전역 유효범위는 스크립트 전체에서 참조되는 것을 의미하는데, 말 그대로 스크립트 내 어느 곳에서는 참조된다. 지역 유효범위는 정의된 함수 안에서만 참조되는 것을 의미하며, 함수 밖에서는 참조하지 못한다.
function scopeTest() {
var a = 0; // var a : hoisting
if (true) {
var b = 0; // var b : hoisting
for (var c = 0; c < 5; c++) { // var c : hoisting
console.log("c=" + c);
}
console.log("c=" + c);
}
console.log("b=" + b);
}
scopeTest();
//실행결과
/*
c = 0
c = 1
c = 2
c = 3
c = 4
c = 5
b = 0
*/
위의 코드는 JavaScript의 var의 유효범위 단위가 블록 단위가 아닌 함수 단위로 정의된다는 것을 설명하기 위한 예제 코드이다. let, const 의 유효범위의 단위가 블록 단위이기 때문에 위의 코드와 같은 if문, for문 등 구문들이 사용되었을 때 중괄호 밖의 범위에서는 그 안의 변수를 사용할 수 없다. 하지만 JavaScript의 var의 유효범위는 함수 단위이기 때문에 예제코드의 변수 a,b,c 모두 값은 유효범위를 갖는다.
→ 블록 단위 = 블록 레벨 스코프 (let, const)
→ 함수 단위 = 함수 레벨 스코프 (var)
var scope = 10;
function scopeExam(){
var scope = 20;
console.log("scope = " + scope);
}
scopeExam();
//실행결과
/*
scope =20
*/
JavaScript는 다른 프로그래밍 언어와는 달리 변수명이 중복되어도 에러가 나지 않습니다. 단, 같은 변수명이 여러 개 있는 변수를 참조할 때 가장 가까운 범위의 변수를 참조합니다. 위의 코드의 함수 내에서 scope를 호출했을 때 전역 변수 scope를 참조하는 것이 아니라 같은 함수 내에 있는 지역변수 scope를 참조합니다. → var는 함수 스코프를 가지기 때문에 가능
scope = 10; // 전역변수
function scopeExam() {
scope = 20; // 전역변수가 된다. (전역변수 10을 20으로 덮어 씌워짐)
console.log("scope = " +scope);
}
function scopeExam2() {
console.log("scope = " +scope);
}
scopeExam();
scopeExam2();
//실행결과
/*
scope =20
*/
다른 프로그래밍 언어의 경우 변수를 선언할 때 int나 char와 같은 변수 형을 썼지만, JavaScript는 var 키워드를 사용합니다. 또, 다른 프로그래밍 언어의 경우 변수를 선언할 때 변수형을 쓰지 않을 경우 에러가 나지만 JavaScript는 var 키워드가 생략이 가능합니다. 단, var 키워드를 빼먹고 변수를 선언할 경우 전역 변수로 선언됩니다. 위 코드의 실행 결과를 보면 scope라는 변수가 함수 scopeExam 안에서 변수 선언이 이루어졌지만, var 키워드가 생략된 상태로 선언 되어 함수 scopeExam2에서 호출을 했을 때 전역변수로 참조하게 됩니다.