렉시컬 환경, 렉시컬 스코프

2024. 01. 30 > 2025. 06. 30 블로그 A/S 프로젝트🚧 로 추가한 글입니다.
설명을 추가하고, 오개념을 바로잡습니다.

렉시컬 환경의 구성요소

1. 환경 레코드(Environment Record)

• 모든 지역 변수를 프로퍼티로 저장하고 있는 객체
• this 값과 같은 기타 정보도 여기에 저장

1.1 객체 환경 레코드 (Object Environment Record)

• BindingObject 를 참조하고 있으며, 이 객체는 전역 객체를 참조한다.

💡 전역 객체의 프로퍼티
- var로 선언한 전역 변수
- 내장 전역 객체들의 바인딩
- 전역 스코프에서의 함수 선언문, 비동기 함수, 제너레이터, 비동기 제너레이터

ObjectEnvironmentRecord = {
	[[BindingObject]]: 전역 객체 참조
}

1.2 선언적 환경 레코드 (Declarative Environment Record)

• 위에서 객체 환경 레코드의 참조 참조하고있는 전역 객체의 프로퍼티가 되지 않는 것들이 모두 여기 등록된다.

DeclartionEnvironmentRecord = {
    a: 33,
    b: 'Hello World'
}

2. 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조

외부 렉시컬 환경에 대한 참조는, 코드가 평가되는 시점에 코드가 정의된 어휘적 위치에 따라 결정된다. (렉시컬 스코프)

출처: 모던 자바스크립트 튜토리얼

 

 

렉시컬 환경은 언제 생성되는가?

생성시점

책에 "함수가 실행될 때마다 렉시컬 환경이 생성된다" 등의 언급이 있어 헷갈려서 ECMAScript 공식문서를 찾아보았다. 코드가 실행(execution)이 아니라 평가(evaluated)될 때 생성됨이 확실하다.

생성단위

• 함수
• 블록
• try ~ catch 의 catch절

주의할 점은, 블록이라고 무조건 렉시컬 환경을 생성하지는 않는다는 점이다. 아래 예시에서 렉시컬 환경은 두개뿐이다. (전역, a 식별자를 가지고 있는 블록)

{
    const a = 1;
    {
    	{
        	console.log(a);
        }
    }
}

 

두번째 예시의 렉시컬 환경은 한개뿐이다.

var funcs = [];

for (var i = 0; i < 3; i++) {
	funcs[i] = function () { 
		return i;
	};
}

 

즉 블록 레벨 스코프 키워드를 가지고 있어야 새로운 렉시컬 환경이 생성된다.

 

렉시컬 스코프(정적 스코프)

정의

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 상위 스코프를 결정하는 것. 자바스크립트는 렉시컬 스코프를 따른다.

렉시컬 환경과의 관계?

둘 다 "평가"시점에서 결정된다는 공통점이 있다.

코드의 어휘적 위치에 따라 식별자의 유효범위(렉시컬 스코프)가 결정된다. 그리고 이 식별자들은 어떠한 객체에 키로 등록되는데, 이 객체를 환경 레코드라고 한다. 그리고 이 환경 레코드를 참조하고 있는 것이 바로 렉시컬 환경이다. 즉 렉시컬 스코프에 따라 렉시컬 환경이 생성되는 셈이다.

 

[[Environment]]

정의

• 함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데, 여기에 함수가 선언된 곳의 외부 스코프가 저장된다.
• [[Environment]]는 함수가 생성될 때 딱 한 번 값이 세팅되고 영원히 변하지 않는다.
• 즉 이 값은 "평가" 시점에 저장되는 것. 그리고 실행되면서 렉시컬 환경의 외부 렉시컬 환경에 대한 참조에 할당된다.

예시

출처: 모던 자바스크립트 튜토리얼

• counter.[[Environment]]에는 {count: 0}이 있는 렉시컬 환경에 대한 참조가 저장된다.
• counter()를 호출하면 각 호출마다 새로운 렉시컬 환경이 생성된다.
• 그리고 생성된 렉시컬 환경은 counter.[[Environment]]에 저장된 렉시컬 환경을 외부 렉시컬 환경으로서 참조한다.