렉시컬 환경(Lexical Environment)은 JavaScript에서 매우 중요한 개념 중 하나로,
변수나 함수를 어디서 어떻게 접근할 수 있는지를 결정한다
이 개념은 스코프(Scope), 클로저(Closure), 호이스팅(Hoisting) 등 JavaScript의 여러 중요한 동작 원리를 이해하는 데 필수다
렉시컬 환경의 구성
렉시컬 환경은 다음 두 가지 주요 구성 요소로 이루어져 있다
- 환경 레코드(Environment Record)
- 현재 컨텍스트(Context)에 있는 식별자(변수, 함수 선언 등)의 모든 선언을 저장하는 곳
- 이는 코드 내에서 선언된 변수나 함수에 대한 정보를 담고 있다
- 외부 렉시컬 환경 참조(Outer Lexical Environment Reference)
- 외부 환경, 즉 상위 스코프의 렉시컬 환경에 대한 참조다
- 이를 통해 스코프 체인(Scope Chain)이 형성되며, 변수나 함수를 현재 스코프에서 찾지 못할 경우 상위 스코프로 이동하여 검색할 수 있다
작동 원리
- 렉시컬 스코핑(Lexical Scoping)
- JavaScript는 렉시컬 스코핑을 따른다
- 이는 함수가 정의된 위치에 의해 스코프가 결정된다는 의미다
- 함수 실행 시점의 스코프가 아니라, 함수가 작성된 시점의 스코프에 따라 변수에 접근한다
- 클로저(Closure)
- 함수가 자신이 정의될 때의 렉시컬 환경을 기억하는 현상을 말한다
- 이를 통해 함수가 실행될 때 외부 함수의 변수에 접근할 수 있다
예시: 렉시컬 환경과 클로저
function outerFunction() {
let outerVariable = 'I am outside!';
function innerFunction() {
console.log(outerVariable); // 'I am outside!' 출력
}
return innerFunction;
}
const newFunction = outerFunction();
newFunction(); // 클로저에 의해 'I am outside!' 출력
위 예시에서 innerFunction은 outerFunction의 렉시컬 환경에 정의되어 있다
innerFunction이 실행되는 시점에는 outerFunction의 실행 컨텍스트가 종료되어 outerVariable이 사라진 것처럼 보이지만,
클로저 덕분에 innerFunction은 outerVariable에 여전히 접근할 수 있다
이는 innerFunction이 생성될 때의 렉시컬 환경을 "기억"하기 때문이다
결론
렉시컬 환경은 JavaScript의 실행 컨텍스트와 밀접하게 연관되어 있으며, 스코프, 클로저, 호이스팅 같은 핵심 개념의 이해를 돕는다
렉시컬 환경을 통해 변수와 함수의 유효 범위를 결정하고, 코드의 실행 흐름을 예측할 수 있다
렉시컬 환경의 원리를 이해하는 것은 효율적이고 예측 가능한 JavaScript 코드를 작성하는 데 필수적이다
'Frontend' 카테고리의 다른 글
자바스크립트 형 변환 (0) | 2024.03.05 |
---|---|
실행 컨텍스트란 (1) | 2024.03.04 |
함수 선언형과 함수 표현식의 차이 (0) | 2024.03.04 |
var, let, const 차이 (0) | 2024.03.04 |
콜백 지옥 해결법 - Promise 와 async/await (0) | 2024.03.04 |