1️⃣ 실행컨텍스트
코드를 실행하는데 필요한 환경을 제공하는 객체
(환경: 코드 실행에 영향을 주는 조건이나 상태)
식별자결정을 더욱 효율적으로 하기 위한 수단
모든 자바스크립트의 모든것은 실행컨텍스트 내에서 발생한다.
이 실행컨텍스트는 전체 자바스크립트 코드가 실행되는 큰 상자 또는 컨테이너라고 가정할 수 있다.
자바스크립트를 실행시키면 자바스크립트 엔진은 콜스택이라는 통에 전역실행컨텍스트를 담는다.
만약 전역에서 함수A를 호출할 경우, 함수A의 실행 컨텍스트를 생성해서 또 스택에 담는다.
(가장 상위에 있는 실행컨텍스트가 현재 활성화된 실행컨텍스트이다)
1 함수를 호출한 후 순서대로 나열하면,
호출된 함수에 2 실행컨텍스트를 생성하고 이를 3 실행컨텍스트 스택에 push한다.
그 후 함수는 본인의 4 렉시컬 환경을 생성한다. 어떠한 코드가 어디에서 실행이 되고 본인주변에 어떤 코드들이 있는지 대체적인 정보를 담고 있는 환경이라고 할 수 있다. 렉시컬 환경은 함수 본인 내부의 식별자 그리고 식별자에 바인딩된 값 등을 기록하고 있는 하나의 자료구조이다.
마지막으로 코드의 실행이 끝나면 실행콘텍스트 스택에서 해당 컨텍스트를 pop하여 제거한다.
실행컨텍스트의 특징 중 클로저와 밀접한 관련이 있는 개념이 2가지가 있다.
- 렉시컬 환경의 생성
- 실행이 끝나면 스택에서 해당 컨텍스트를 제거하는 특징
2️⃣ 렉시컬 스코프
자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정한다.
이를 렉시컬 스코프(정적스코프)라고 부른다.
자바스크립트는 렉시컬스코프를 따르기때문에 함수는 태어나자마자 상위 스코프가 결정이 되고 이후에 함수객체가 생성이 되면 해당함수객체는 본인의 상위 스코프를 항상 알 수 있게 된다. 해당 함수가 상위 스코프를 항상 알 수 있게 되는 이유는 자바스크립트는 태어나면서 자신의 내부 슬롯에 상위 스코프의 참조를 저장하기 때문이다.
3️⃣ 렉시컬환경
렉시컬환경은 환경레코드와 외부 렉시컬환경에 대한 참조로 이루어진다.
3️⃣ -1 . 환경레코드
스코프에 포함된 식별자를 등록하고 등록된 식별자에 바인딩된 값을 관리하는 저장소
🤔 환경레코드와 호이스팅
호이스팅이 발생하는 이유는 선언문이 있는 코드라인을 물리적으로 최상단에 끌어올렸기 때문이 아니라,
자바스크립트 엔진이 먼저 코드를 스캔하면서 변수같은 정보를 실행컨텍스트 어딘가에 미리 기록해놓기 때문이다. 이때 기록해놓는 곳이 바로 환경레코드이다.
호이스팅 선언문이 마치 최상단에 끌어올려진 듯한 현상
① 변수호이스팅 (var)
② 함수호이스팅 (함수선언문)
🤔 환경레코드와 자바스크립트의 생성단계와 실행단계
생성단계: 본격적인 실행에 앞서 스캔하고 준비하는 단계
실행컨텍스트를 생성하고, 선언문만 먼저 실행해서 환경레코드에 미리 기록
실행단계: 선언문 외 나머지 코드 순차적 실행
필요한 경우 환경레코드에 미리 기록해둔 정보를 참고하거나 업데이트한다.
🤔 환경레코드와 TDZ
let, const로 변수를 선언하고, 선언보다 함수의 실행이 빠를때 일어나는 일시적사각지대(TDZ)가 발생하는 원인도 환경레코드때문이다.
let, const로 선언한 변수는 환경레코드에 초기값이 기록되지 않아서, 이때 참조에러가 발생한다.
함수표현식도 마찬가지의 이유로 에러가 발생한다.
3️⃣-2. 외부환경참조 (Outer)
상위스코프를 가리킨다. 외부 렉시컬환경에 대한 참조를 통해 단방향 링크드 리스트인 스코프 체인을 구성한다.
🤔 외부환경참조와 식별자결정
식별자결정
코드에서 변수나 함수의 값을 결정하는 것 / 콜스택안에 동일한 식별자가 여럿일때 중요
🤔 외부환경참조와 스코프체인
식별자를 결정할때 활용하는 스코프들의 연결리스트
실행컨텍스트 렉시컬환경의 외부환경참조를 통해서, 식별자를 더욱 효율적으로 한다.
실행컨텍스트에 등록된 환경레코드를 통해 등록된 변수들을 찾아본뒤, 현재 실행컨텍스트에 없으면 외부환경참조를 통해서 스코프체이닝을 한다. 이런 방법으로 식별자를 찾고 결정한다.
📚 이전에 velog에 직접 기록한 내용을 바탕으로, 새로운 내용을 추가하여 작성하였습니다. ✍️
참고자료
'JavaScript > JS' 카테고리의 다른 글
즉시실행함수 (IIFE) (0) | 2023.03.23 |
---|---|
자바스크립트 클로저란? (JS Closure) (0) | 2023.03.02 |
자바스크립트 함수선언식 / 함수표현식 (0) | 2023.02.27 |
자바스크립트 객체, 구조분해할당 (0) | 2023.02.26 |
자바스크립트 구조분해할당(배열과 객체) (0) | 2023.02.25 |