JavaScript

javaScript-스코프2 (지역 스코프, 전역 스코프)

용용it 2023. 2. 28. 20:47

코드는 전역과 지역으로 구분할 수 있다.

구분 설명 스코프 변수
전역 코드의 가장 바깥 영역 전역 스코프  전역 변수
지역 함수 몸체 내부 지역 스코프  

 

이때 변수는 자신이 선언된 위치(전역 또는 지역)에 의해 자신이 유효한 범위인 스코프가 결정된다.

즉, 전역에서 선언된 변수는 전역 스코프를 갖는 전역 변수이고,

지역에서 선언된 변수는 지역 스코프를 갖는 지역 변수다.

var x = "global x";
var y = "global y"; 

function outer(){
	var z = "outer's local z";
    
    console.log(x); // 1 global x 
    console.log(y); // 2 global y
    console.log(z); // 3 outer's local z
    
    funtion inner(){
			var x = "inner's local x"
        
			console.log(x); // 4 inner's local x
			console.log(y); // 5 global y
			console.log(z); // 6 outer's local z
    }
    
    inner();
}

outer();

console.log(x); // 7 global x 
console.log(z); // 8 ReferenceError: z in not defined

 

전역이란 코드의 가장 바깥 영역을 말한다. 전역은 전역 스코프를 만든다.

전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다.

지역이란 함수 몸체 내부를 말한다.

지역은 지역 스코프를 만든다.

지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.

지역 변수는 자신이 선언된 지역과 하위 지역(중첩 함수)에서만 참조할 수 있다.

즉, 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

 

위의 그림에서 outer 함수 내부에서 선언된 z 변수는 지역 변수다.

지역 변수 z는 자신의 지역 스코프인 outer 함수 내부와 하위 지역 스코프인 inner 함수 내부에서 참조할 수 있다.

하지만 지역 변수 z를 전역에서 참조하면 참조 에러가 발생한다.

 

inner 함수 내부에서 선언된 x 변수도 지역 변수다.

 

지역 변수 x는 자신의 지역 스코프인 함수 inner 내부에서만 참조할 수 있다.

하지만 지역 변수 x를 전역 또는 inner 함수 내부 이외의 지역에서 참조하면 참조 에러가 발생한다.

 

그런데 inner 함수 내부에서 선언된 x 변수 이외에 이름이 같은 전역 변수 이외에 이름이 같은 전역 변수 x가 존재한다.

이때  inner 함수 내부에서 x 변수를 참조하면 전역 변수 x를 참조하는 것이 아니라 inner 함수 내부에서 선언된 x 변수를 참조한다.

 

이는 자바스크립트 엔진이 스코프 체인을 통해 참조할 변수를 검색했기 때문이다.