[JS] 유효범위

변수 혹은 함수에는 유효범위(Scope)가 있다.

Javascript같은 경우에는 var형은 function scope고, let과 const는 block scope다.

 

function scope란 말 그대로 함수 내에서 유효한 범위를 말하고, block scope는 중괄호를 기준으로 유효한 범위를 말한다.

function test(){ 
	var a = 10; 
} 
console.log(a); //Error 

for(var i = 10; i<11; i++){
console.log(i); //10 
} 
console.log(i); //11

위 예제를 보면 function scope가 무엇인지 알 수 있다.

test() 라는 함수 안에서 선언 된 a는 함수 밖에서 호출하지 못하지만 for문 안에서 선언 된 i는 변수 호이스팅으로 인해 i는 전역 변수가 됐으므로 어디서든 호출이 가능하다.

 

호이스팅이란 변수를 유효범위 최상단으로 옮기는 행위다.

자세한건  내 개인 블로그에 있으니 모르면 참고바란다(https://sdass.tistory.com/5).

 

이번엔 block scope에 대해서 알아보겠다.

block scope는 위에서도 말했지만 중괄호([])를 기준으로 한다.

JAVA를 안다면 동일하다고 생각하면 된다.

for(let i = 10; i<11; i++){ 
console.log(i); //10 
} 
console.log(i); //Error

위 예제는 기존 예제와 동일하지만 var를 let으로만 바꿨을 뿐이다.

하지만 let은 block scope기 때문에 for문 밖에서는 i를 호출할 수 없다.

참고로 let과 const는 ES6(ECMAScript6)에서 추가된 변수 선언 방법이다.

 

또한 자바스크립트는 정적 유효범위(static scope) 혹은 렉시컬(lexical scope)이 있는데 이는 함수가 선언된 시점에서의 유효한 범위를 뜻한다.

var i = 5;
 
function a(){
    var i = 10;
    b();
}
 
function b(){
    document.write(i);
}
 
a();

위 코드를 돌려보면 5가 출력되는 것을 확인할 수 있다.

왜냐하면 b가 실행되는 시점에서의 i는 지역변수인 10이 아닌 전역변수인 5를 가리키기 때문이다.

 

참고 : https://opentutorials.org/course/743/6495 

        https://sdass.tistory.com/5