lexical scope 란?

- 전역 변수와 지역변수

 

전역변수란 자바스크립트에서 제일 바깥 범위 (함수 안에 포함되지 않은) 에 변수를 만드는 것이다.

즉, window 객체에 변수를 만드는 것이다.

 

var x = "global";
function ex() {
	var x = "local";
    x = 'change';
}
ex();
alert(x);

위 예제는 무엇이 실행될까?

 

예상대로 global이 출력된다.

왜냐하면 ex 함수 바깥의 x는 전역변수,  ex 함수 내의 x는 지역변수이기 떄문이다.

즉, 전역변수와 지역변수는 함수안에 선언되어 있는지 아닌지로 판별할 수 있다.

 

 

- 스코프

 

위 상황에서 지역변수는 아무리 해도 전역변수에 영향을 끼칠 수 없다.

그것은 함수의 스코프(범위) 때문이다.

함수안에서 선언된 변수는 해당 함수 안에서만 사용할 수 있다.

 

아래 예제를 보자

var x = 'global';
function ex() {
	x = "change";
}
ex();
alert(x);

위 예제는 'change'가 출력된다.

 

함수 내에서 호출한 변수를 찾기위해서,

함수의 지역스코프로부터 전역 변수들이 있는 전역 스코프까지 점차 넓혀가며 찾기 떄문이다.

 

- 스코프 체인이란?

 

이제, 전역변수와 지역변수의 관계에서 스코프 체인이라는 개념이 나온다.

내부 함수에서는 외부 함수의 변수에 접근 가능하지만, 외부 함수에서는 내부 함수의 변수에 접근할 수 없다.

 

var name = "zero";
function outer(){
	console.log('외부', name);
    function inner(){
    	var enemy = 'nero';
        console.log('내부', name);
    }
    inner();
}
outer();
console.log(enemy);

위 결과는 

외부 zero

내부 zero

에러

가 출력된다.

 

inner함수는 name 변수를 찾기 위해서 , 자기 자신의 스코프에 찾고,  없으면 한 단계 올라다것 outer 스코프에서 찾고,

없으면 다시 올라가서 전역 스코프에서 찾는다.

만약에 전역 스코프에서도 찾지 못한다면, 변수를 찾지 못했다는 에러가 발생한다.

이렇게 꼬리를 물고 범위를 넓히면서 찾는 관계를 스코프 체인이라고 한다.

 

 

- 렉시컬 스코핑이란?

 

많은 사람들이 헷갈려하는 것이, 스코프는 함수를 호출할 때가 아니라, 선언할 때 생긴다는 점이다.

이것은 정적 스코프라고 불린다.

 

아래 코드를 보자

var name = "zero";
function log(){
	console.log(name);
}
function wrapper(){
	name = 'nero';
    log();
}
wrapper();

위 결과는 nero가 나온다.

log를 호출하기 전에, name이 nero로 바뀌었기 때문이다.

 

다음 코드를 보자

var name = "zero";
function log(){
	console.log(name);
}
function wrapper(){
	var name = "nero";
    log();
}
wrapper();

이번엔 zero가 나온다.

스코프는 함수를 선언할 때 생긴다고 했는데, log안의 name은 wrapper 안의 지역변수 name가 아니라, 전역변수 name을 가리키기고 있기 때문이다.

이런 것을 lexical scoping이라고 한다.

 

즉, 다시한번 설명하자면,

함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 스코프로부터 가장 가까운 상위 범위에서 변수를 계속 참조한다.

위의 예시에는 log 함수 안의 name 변수는 선언 시, 가장 가까운 전역변수 name을 참조하게된다.

무슨 짓을 해도 한번 선언되어 전역변수를 가리키게된 name을 다른 것을 가리키게 할 수 없다.

유일한 방법은 전역변수를 다른 값으로 바꾸는 것이다.

(정확한 원리는 실행 컨텍스트에서 배울 수 있다.)