렉시컬환경 (Lexical Environment)
: 실행할 스코프 범위 안에 있는 모든 변수와 함수를 프로퍼티로 저장한 객체
: 스크립트 전체, 실행 중인 함수, 코드블록 등 자신만의 렉시컬 환경을 가진다.
: 사용하고자 하는 변수, 함수 등이 어떤 렉시컬 환경에 속해 있는지에 따라서 이용 가능한 변수가 달라진다.
렉시컬 환경의 구성
1) 환경 레코드
: 스크립트 전체, 실행중인 함수, 코드블록 등 자신만의 렉시컬 환경에서 선언된 변수와 함수가 저장되는 곳
2) 외부 렉시컬 환경
: 부모 환경의 렉시컬 환경 참조값을 가지는 곳
: 함수 실행 시점이 아닌 선언 시점의 외부 환경
렉시컬 환경 예제
<script>
// (A)
let name1 = 'kwang'; // (B)
var name2 = 'sunny';
function test(){
let msg = 'Hi~';
console.log(`${msg} ${name1} ${name2}`); // (C)
}
test(); // (D)
</script>
위 코드에서 존재하는 렉시컬 환경은 스크립트 전체와 test함수의 렉시컬 환경 2가지로 아래 그림과 같다.
함수 내의 변수를 마주하면 해당 함수의 렉시컬 환경 내 환경레코드에서 변수를 찾고 존재하지 않으면 외부 렉시컬 환경의 참조값에서 찾는 과정을 진행한다. 외부 렉시컬 환경에도 존재하지 않으면 ReferenceError가 발생하게 된다.
참고
: https://kwangsunny.tistory.com/m/37
'Front-End > JavaScript' 카테고리의 다른 글
[JavaScript] 깊은 복사, 얕은 복사 (0) | 2023.03.02 |
---|---|
[JavaScript] 데이터 형변환 (0) | 2023.03.01 |
[JavaScript] 이벤트 버블링, 캡처링 (0) | 2023.03.01 |
[JavaScript] 이벤트 바인딩 (0) | 2023.03.01 |
[JavaScript] 호이스팅(Hoisting) (0) | 2023.02.27 |