// 우아한 테크 10분 테크톡에 하루님이 진행하신 실행 컨텍스트 유튭 영상을 정리해 보았습니다.
자바스크립트 엔진이 코드를 해석하고 실행하는 과정
- 자바스크립트 코드를 실행시키면 자바스크립트 엔진은 콜 스택에 전역 실행 컨텍스트를 담는다.
실행 컨텍스트에는 환경 레코드와 아우터가 있다.(다른것들도 있지만 간략화해서 설명) - 전역에서 함수 A를 호출할 경우, 함수 A의 실행 컨텍스트를 생성해서 콜 스택에 담는다.
- 콜 스택은 가장 나중에 담긴 실행 컨텍스트만 활성화 된다.
- 가장 나중에 담긴 실행 컨텍스트가 활성화 되고 종료되면, 그 실행 컨텍스트는 사라진다.
- 전역에 있는 코드가 마지막 라인까지 모두 실행되면 전역 실행 컨텍스트도 사라진다.
환경 레코드로 JS 호이스팅 이해하기
-
환경 레코드란?
식별자와 식별자에 바인딩된 값을 기록하는 객체. -
변수 호이스팅
자바스크립트 엔진은 코드를 실행하면 우선 실행 컨텍스트 한칸을 생성해서 콜스택에 넣는다.
그 후 전체 코드를 스캔하면서 선언할게 있는지 찾아보고 있다면 먼저 선언해 둔다.
- var로 선언한 경우
선언과 초기화도 같이 되기때문에 undefind로 콜스택에 들어가 있을것이다. - let, const로 선언한 경우
자바스크립트 엔진이 식별자를 기록해두기는 하지만 값을 초기화하지는 않는다.
선언문 이전에 값을 참고하려고 하면 Reference Error가 발생한다.
(let이나 const로 선언한 경우에는 선언 이전에 식별자를 참조할 수 없는데 이 구역을 일시적 사각지대라고 부른다.)
생성단계 - 실행 컨텍스트 생성하고, 선언문만 실행해서 환경 레코드에 기록한다.
실행단계 - 선언문 외 나머지 코드 순차적으로 실행, 환경 레코드를 참조하거나 업데이트 한다.
- 함수 호이스팅
- 함수 표현식 방식
변수 호이스팅과 동일하게 동작한다.
study()
var study = () =>{
//do study
}-> study는 호이스팅에 의해 읽을수는 있지만 undefind 상태이고, 호출한다면 함수가 아닌 undefind이기 때문에 Type Error가 나온다.
let const의 경우에는 일시적 사각지대로 인해 선언이 되어있지 않은 상태로 나오게 된다. (Reference Error)
- 함수 선언문 방식
선언과 동시에 함수가 생성되어 선언 전에도 함수를 사용할 수 있다.(호이스팅이 된다.)
(함수가 선언되기 전에도 함수를 사용할 수 있기 때문에 사용을 지양하는 편이다.)
외부 환경 참조(outer)
-
바깥 렉시컬 환경을 가리킨다.
자바스크립트 엔진은 현재 활성화된 실행 컨텍스트의 환경 레코드를 보고 변수, 함수의 값을 결정한다. -
식별자 결정
코드에서 변수나 함수의 값을 정하는 것이다. -
콜스택 안에 동일한 식별자가 여럿일 때 자바스크립트 엔진이 어떻게 아우터를 활용해서 의사결정을 하는지?
자바스크립트 엔진이 새로 생성된 샐행 컨텍스트에 바깥 렉시컬 환경으로 돌아갈 수 있는 아우터를 남겨 놓는다.
필요한 경우에 이전 실행 컨텍스트의 환경레코드에 저장된 식별자도 참조할 수 있다.
- 어떠한 값을 결정할 때 먼저 현재 활성화 된 실행 컨텍스트의 환경 레코드를 먼저 확인한다.
- 만약 어떤한 값을 찾는데 현재 활성화 된 실행 컨텍스트의 환경 레코드를 확인했을 때도 값이 나오지 않는다면, 자바스크립트 엔진은 outer가 가리키는 바깥 렉시컬 환경으로 가서 값을 찾기 시작한다.
- 그래도 없을경우 계속 outer를 타고 가다가 전역 실행 컨텍스트의 렉시컬 환경을 와도 없다면 레퍼런스 에러를 내보낸다.
변수 섀도잉 - 동일한 식별자로 인해 상위 스코프에서 선언된 식별자의 값이 가려지는 현상
스코프 체인 - 식별자를 결정할 때 활용하는 스코프들의 연결 리스트
실행 컨텍스트
실행 컨텍스트는 코드를 실행하는데 필요한 환경을 제공하는 객체를 말한다.
(환경 = 코드 실행에 영향을 주는 조건이나 상태)
