7 - 26 TIL(CS)

렉시컬 환경(Lexical Environment)

어제 정리한 실행 컨텍스트에서 여러 이름의 환경이 나오는데 그 중 렉시컬 환경이 무엇인지 확인해보자
Lexical Environment는 코드block, function, script를 실행하기 앞서 생성되는 특별한 객체로, 실행할 스코프 범위 안에 있는 변수와 함수를 프로퍼티로 저장하는 객체다.

우리가 소스 코드를 실행하면서 참조가 필요한 변수의 값을 이 Lexical Environment라는 객체에서 식별자 이름을 키로 찾는 것

실행컨텍스트와는??

실행컨텍스트는 실행하고 있는 함수를 트래킹하기 위한 특별한 자료 구조로 현재 실행하고 있는 함수 내의 현재 변수 상태와 this의 값 등을 저장하고 있고, 현재 실행 중인 line을 기억하고 있다.
그래서 nested function이 호출될 때, 이미 실행하고 있는 정보를 저장해 뒀기 때문에 nested function의 실행이 끝나면 다시 돌아올 수 있는 것

실행 컨텍스트가 소스 코드를 실행하기 위해 필요한 것들을 관리하는 내부 메커니즘이라며, 실행 컨텍스트가 렉시컬 환경을 관리하고 있다
실행 컨텍스트는 실행하고 있는 함수 내의 변수 상태를 저장하고 있다고 했는데, 실행 컨텍스트가 이를 렉시컬 환경이라는 객체에 저장해두고 변경이 있을 때마다 업데이트하고 필요할 때 접근해서 갖다 쓰는 것이라 생각!

구조

• Environment Record
  Environment Record(이하 환경 레코드)는 모든 로컬 변수들을 프로퍼티로 갖는 객체다. (그리고 this같은 특별한 식별자도 포함할 수 있다.)

• 외부 코드와 연관된 외부 렉시컬 환경에 대한 참조

• 전역 렉시컬 환경
  스크립트 전체와 관련된 렉시컬 환경

  • let phrase = 'hello';
  • lexical environment : phrase: 'hello'
  • outer Lexical Environment 참조: null
    • 전역 렉시컬 환경은 외부 참조를 갖지 않는다.

let 변수의 렉시컬 환경

스크립트 시작

• 스크립트 내 선언된 변수 전체가 렉시컬 환경에 올라간다.
• 변수의 상태는 특수 내부상태인 uninitialized
  • js엔진은 uninitialized 상태의 변수를 인지하지만, let을 만나기 전까지는 이 변수를 참조할 순 없다.

함수 선언문의 렉시컬 환경

• 일반 변수와는 달리 바로 초기화 된다.
• 렉시컬 환경이 만들어지는 즉시 사용가능
• 선언되기 전에도 함수를 사용할 수 있다.

내부와 외부 렉시컬 환경

함수를 호출해 실행하면 새로운 렉시컬 환경이 자동으로 만들어진다.

• 매개변수
• 함수의 지역변수

let phrase = 'hello';
                                           Lexical Environment          outer Lexical Environment
function say(name) {                  ---  
    alert(`${phrase}`, ${name}`);       |-  name: "John"    -------->   say: function                    --------> null
}                                     ---                               phrase: 'hello'

say('John');

Reference

https://eyabc.github.io/Doc/dev/core-javascript/%EB%A0%89%EC%8B%9C%EC%BB%AC%20%ED%99%98%EA%B2%BD.html#%EB%82%B4%EB%B6%80%EC%99%80-%EC%99%B8%EB%B6%80-%EB%A0%89%EC%8B%9C%EC%BB%AC-%ED%99%98%EA%B2%BD
https://bbeeyaks-moment.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%A0%89%EC%8B%9C%EC%BB%AC-%ED%99%98%EA%B2%BD%EC%9D%B4%EB%9E%80