모던 자바스크립트 Deep Dive - 스코프

스코프

스코프란 식별자가 유효한 범위를 뜻한다.

여기서 식별자는 변수, 함수, 클래스 이름 등을 뜻 한다. 

 

우선 스코프는 선언된 위치에 따라 크게 지역 스코프, 전역 스코프로 나뉜다.

 

지역 스코프

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

그러므로 함수 내부 또는 블록 내부에서 변수를 선언하면 지역 스코프를 가지는 지역 변수가 되며

지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서만 참조 가능하다.

 

전역 스코프

전역이란 코드의 가장 바깥쪽 영역을 말한다.

그러므로 전역에 변수를 선언하면 전역 스코프를 가지는 전역 변수가 되며

전역 변수는 어디서든 참조 가능하다.

 

var x = 'global' // 전역 스코프, 전역 변수

function outer(){ // 지역 스코프 
	var z = 'local' // 지역 변수
    
    function inner(){ // 지역 스코프
    	var q = 'local' // 지역 변수
        console.log(x)
      	console.log(z)
    }
}

console.log(z)

inner 함수 안에서의 

변수 x는 전역 변수로 모든곳에서 참조할 수 있고,

변수 z는 지역 변수로 하위 스코프에서도 참조 가능하기 때문에 

console.log(x), console.log(z)는 'global', 'local'을 정상적으로 출력한다.

하지만

변수 z의 유효한 스코프 범위는 자신이 속한 outer 함수와 내부 지역 스코프까지만 유효하기 때문에

전역에서 console.log(z)를 호출하면 참조 에러가 발생한다. 

 

스코프 체인

스코프 체인이란 스코프가 계층적으로 연결된 것을 말한다.

 

위의 그림을 예시로 들면 

 

다음과 같은 스코프 체인을 가진다. 

 

전역 스코프
x	'global'
outer	<function object>

↑

outer 지역 스코프
z	'local'
inner	<function object>

↑

inner 지역 스코프
q	'local'

 

위의 예제처럼 함수의 중첩이 발생하면 스코프 또한 중첩에 의한 계층 구조를 가진다.

그리고 모든 지역 스코프의 최상위 스코프는 전역 스코프이다.

 

스코프 체인에서 식별자 찾기 

우선 스코프 체인은 계층 구조를 가지며 

상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조 가능하지만

하위 스코프에서 유효한 변수를 상위 스코프에서는 참조 불가능 하다.

즉 스코프 체인을 통해 식별자를 찾을 때에는 현재 자신의 스코프에서 먼저 식별자를 찾고

없으면 계속해서 상위 스코프로 올라가면서 식별자를 찾는다. 

 

함수의 상위 스코프 결정 

자바스크립트에서 함수의 상위 스코프를 결정하는 방법은 렉시컬 스코프(정적 스코프)를 따른다.

렉시컬 스코프란 함수가 정의될 때 어디서 정의했는지에 따라 함수의 상위 스코프를 결정하는 것을 말한다.

var x = 'global'

function foo(){
	var x = 'local'
    bar()
}

function bar(){
	console.log(x)
}

foo()
bar()

위의 예제를 실행했을 때 답은 'global' 두 번 출력된다.

이유는 bar의 상위 스코프는 foo함수에서 bar가 호출될 때 결정되는 게 아니라

bar 함수가 정의될 때 상위 스코프가 결정되며 

bar함수에서 출력하고자 하는 변수 x는 전역에서 선언한 변수 x 이기 때문이다.