1. 실행 컨텍스트
1-1 실행 컨텍스트란 ?
- 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다
- 자바 스크립트에서 실행 컨텍스트가 활성화되는 시점에 다음과 같은 현상이 발생한다
- 선언된 변수를 위로 끌어올린다(호이스팅)
- 외부 환경 정보를 구성한다
- this 값을 설정하는 등의 동작을 수행한다.
1-2 실행 컨텍스트는 어떻게 작동하는가?
동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아올렷다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 작동된다.
1-3 실행 컨텍스트는 어떻게 구성할 수 있는가?
- 전역공간
- eval 함수
- 함수 실행
- 블럭 생성(ES6에서 추가됨)
1-4 실행 컨텍스트는 어떻게 구성되어있는가 ?
실행 컨텍스트는 LexicalEnvironment 컴포넌트와 VariableEnvironment 컴포넌트로 구성되어있다.
VariableEnvironment
- 현재 컨텍스트 내의 식별자들에 대한 정보와 외부 환경 정보를 담고 선언 시점의 LexicalEnvironment의 스냅샷을 유지한다.(변경사항 반영 X)
- 실행 컨텍스트를 생성할때 VariableEnvironment에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LexicalEnvironment를 만든다.
- VariableEnvironment 내부에는 스냅샷을 저장하고있는 environmentRecord와 outer-EinvironmentReference로 구성되어있다.
LexicalEnvironment
- 처음에는 VariableEnvironment와 같지만 변경사항이 생길시 실시간으로 반영된다.
- LexicalEnvironment에서도 역시 environmentRecord와 outer-EinvironmentReference로 구성되어있다.
- LexicalEnvironment에서의 environmentRecord는 현재 컨텍스트와 관련된 코드의 식별자 정보들(매개변수 식별자, 변수이름, 함수 선언 등)이 저장하는데, 이때 호이스팅 개념이 사용된다.
2. 호이스팅(hoisting)
2-1 호이스팅이란 ?
- 호이스팅은 식별자들을 최상단으로 끌어올리는 것을 뜻한다.
- 자바스크립트 엔진이 코드가 실행되기전임에도 불구하고 해당 환경에 속한 코드의 변수명들을 모두 알게하기 위해 호이스팅 개념을 사용한다.
- 실제로 끌어올리지는 않지 편의상 끌어올린것으로 간주하는다.
2-2 호이스팅 규칙
- 변수는 선언부와 할당부를 나누어 선언부만 끌어올린다.
- 함수 선언문은 함수 전체를 호이스팅한다.
- 함수 표현식은 변수 선언부만 호이스팅한다.
2-3 함수 선언문과 함수 표현식
function a() // 함수 선언문
var b = function() // (익명) 함수 표현식
var c = function d() // 기명 함수 표현식- 함수 선언문 : 별도의 할당 명령이 없고 함수 정의부만 존재하는 것
- 함수 표현식 : 정의되어있는 함수를 별도의 변수에 할당하는 것
2-4 함수 선언문과 함수표현식이 호이스팅이 되면 어떤 차이를 보이는가 ?
- 함수 선언문은 함수 내부를 포함한 전체를 호이스팅 하지만, 함수 표현식은 변수 선언부만 호이스팅한다.
- environmentRecord는 변수명만 끌어올리고 할당 과정은 그대로 남겨두게 되는데, 이러한 이유로 아래 함수 선언문과 함수 표현식에서 차이가 발생합니다.
- 동일한 변수명에 서로 다른 값을 할당할 경우 나중에 할당한 값이 먼저 할당한 값을 덮어 씌우는데
3. 스코프 체인
3-1 스코프
스코프는 식별자에 대한 유효범위이다. 예를 들어 경계 A의 외부에서 선언한 변수는 외부뿐만 아니라 A의 내부에서도 접근이 가능하지만, A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근할 수 있다.
이러한 식별자의 유효범위를 안에서부터 바깥으로 차례로 검색해나가는 것을 스코프 체인이라고 한다.
그리고 이 과정을 가능하게 하는것은 Lexical Environment의 두번째 수집자료인 outerEnvironmentRefrence이다.
3-2 스코프체인 과정
- outerEnvironmentReference는 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 연결리스트 형태로 참조한다.
- 예를들어 A함수 내부에 B를, B함수 내부에 C함수를 선언한 경우
- C outerEnvironmentReference 는 B Lexical Environment 를 참조,
- B outerEnvironmentReference 는 A Lexical Environment 를 참조하는 연결리스트 형태를 보인다.
- 가장 가까운 요소부터 차례대로 접근하는 구조적 특성 탓에 여러 스코프에서 동일한 식별자를 선언한 경우에는 무조건 스코프 체인 상에서 가장 먼저 발견된 식별자에만 접근이 가능하다.
따라서 가장 가까운 요소부터 차례로 접근하기 때문에 여러 스코프에서 동일한 식별자를 선언할 경우 스코프 체인상에서 가장 먼저 발견된 식별자에만 접근이 가능합니다.
3-3 변수 은닉화
변수 은닉화란 특정 변수 a가 상위 스코프에 선언되어 있지만, 현재 스코프에 이미 선언된 경우 현재 스코프의 변수를 우선으로 한다는 규칙을 말한다. 예를 들어 위에서 전역 공간에서의 변수 a와 동일한 이름의 변수가 inner 함수 내부에 선언되어 있을 때, inner 함수 내부에서 a에 접근하려고 하면 전역에서의 a가 아닌 inner 스코프의 LexicalEnvironment부터 검색하기 때문에 inner 상의 a를 반환하게 되는 동작을 하는 것과 같다.
3-4 전역변수와 지역변수
즉 전역변수는 전역 공간에서 선언한 변수, 지역변수는 함수 내부에서 선언한 변수
참조
『코어 자바스크립트』 (정재남, 위키북스)
