[JavaScript] 실행 컨텍스트와 렉시컬 환경

자바스크립트를 공부하면서 스코프, 호이스팅, 클로저 등 주요 동작을 이해하는 데 어려움이 있었습니다.
자바스크립트가 어떻게 코드를 처리하는지 기본적인 개념이 잡혀있지 않아서 생긴 문제였고,
실행 컨텍스트와 렉시컬 환경에 대해서 개념을 잡고자 글을 적게 되었습니다.

---

실행 컨텍스트

실행 컨텍스트는 코드를 실행할 때 필요한 환경 정보를 모아놓은 객체를 의미합니다.
여기서 환경 변수는 선언된 변수와 함수, this, arguments 등을 의미합니다.

이제 실행 컨텍스트 중에서 전역 실행 컨텍스트와 함수 실행 컨텍스트를 알아보겠습니다.
전역 실행 컨텍스트는 자바스크립트 엔진이 코드를 실행하면서 생성합니다.
단 하나의 컨텍스트가 만들어지고 전역 객체와 변수를 관리합니다.
콜 스택에 호출된 전역 실행 컨텍스트는 프로그램이 종료하기 전까지 남아있습니다.

함수 실행 컨텍스트는 함수를 호출할 때 생성됩니다.
함수 실행 컨텍스트는 함수가 종료되면 콜 스택에서 사라집니다.

 

렉시컬 환경

각 실행 컨텍스트는 렉시컬 환경을 가지고 있습니다.
렉시컬 환경은 환경 레코드와 외부 환경 참조라는 두 가지 요소로 이루어집니다.

실행 컨텍스트는 생성 단계와 실행 단계를 거쳐서 생성됩니다.
생성 단계에서는 환경 레코드에 변수와 함수 식별자를 저장하고 외부 환경 참조를 남겨놓습니다.
변수를 저장할 때 var 키워드는 선언과 초기화까지 이루어지고, let과 const 키워드는 선언만 이루어집니다.

console.log(icecream); // undefined

var icecream = '빠삐코';

예시처럼 var 키워드로 선언한 변수는 선언문 전에 호출해도 undefined를 출력합니다.
이 현상을 변수의 선언을 최상단으로 끌어올리는 것처럼 보인다고 해서 호이스팅이라고 불립니다.
함수 표현식도 변수에 함수를 담는 것이기 때문에 변수 호이스팅과 동일하게 동작합니다.

외부 환경 참조는 외부 렉시컬 환경을 가리키기 위한 것으로,
현재 스코프에서 변수를 찾을 수 없을 때, 연결된 상위 스코프로 이동하여 변수를 찾습니다.
자바스크립트에서는 이를 스코프 체인이라고 부릅니다.

실행 단계에서는 렉시컬 환경을 바탕으로 코드를 하나씩 실행합니다.
이 과정에서 식별자에 값이 할당되면 환경 레코드의 변수 값이 변경됩니다.

---

글을 끝까지 봐주셔서 감사합니다.
틀린 내용이 있다면 댓글로 지적 부탁드립니다.