실행 컨텍스트, execution context란?
- 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
- 어떤 실행 컨텍스트가 활성활 될 때 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경정보들을 수집해서 실행 컨텍스트 객체에 저장하고 이를 call stack에 쌓는다.
- 스택 구조상 call stack의 맨 위에 쌓이는 컨텍스트와 관련있는 코드가 현재 실행되며, 이런 방식으로 전체 코드의 환경과 순서를 보장한다.
- 실행 컨텍스트 객체는 다음과 같은 정보를 담고 있다 : VariableEnvironment, LexicalEnvironment, ThisBinding
VariableEnvironment와 LexicalEnvironment
- VariableEnvironment와 LexicalEnvironment은 현재 컨텍스트와 관련된 식별자 정보(ex: 매개변수명, 변수 식별자, 함수명등의 정보)를 수집하는 environmentRecord와 바로 직전 컨텍스트의 LexicalEnvironment정보를 참조하는 outerEnvironmentReference, this 식별자가 바라봐야할 대상 객체정보를 담고 있는 ThisBinding으로 구성된다.
- 실행 컨텍스트 생성 시에는 VariableEnvironment와 LexicalEnvironment가 동일한 내용으로 구성되지만 VariableEnvironment는 초기 상태를 유지고 LexicalEnvironment는 함수 실행 도중 변경되는 사항이 반영
호이스팅, Hoisting
- enviromentRecord의 수집과정을 추상화한 개념으로, 실행 컨텍스트가 관여하는 코드 집단의 최상단으로 정보들을 끌어올리는 개념
- 변수 선언과 값 할당이 동시에 이루어진 문장은 '선언부'만을 호이스팅하고, 할당 과정은 원래 자리에 남는다.
- 위의 특성으로 인해 함수 선언문과 함수 표현식의 차이 발생하는데, 함수 선언문은 전체를 호이스팅한 반면 함수 표현식은 변수 선언부만 호이스팅된다.
console.log(sum(3, 4)); // 7
console.log(mutiple(3, 4)); // error!
// 함수선언문
function sum(a, b) {
return a + b;
}
// 함수 표현식
var mutiple = function (a, b) {
return a * b;
};
스코프, scope
- 스코프 : 변수의 유효범위
- 스코프 종류
- scope = 특정 변수의 접근가능한 범위, 공간
- block = 프로그램 실행 상의 동일 유효범위 묶음, 보통 중괄호로 표현
- global scope = 코드 어디서든 접근 가능한 공간
- global variable = global scope에 선언된 변수
- block scope = block의 유효 범위 { }
- local variable = block 내부에 선언된 변수
- global namespace = global variable을 사용할 수 있는 범위
- scope pollution = global variable같이 scope가 커서 의도치 않게 해당 변수에 접근하게 되는것
스코프체인
- outerEnvironmentReference는 현재 실행 함수가 선언된 위치(=이전 컨텍스트)의 LexicalEnvironment를 참조하는데, 코드 상에서 어떤 변수에 접근하려고 하면 현재 컨텍스트의 LexcicalEnvironment의 EnvironmentRecord를 탐색해서 발견되면 그 값을 반환하고, 발견하지 못하면 outerEnvironmentReference를 참조하여 함수가 선언된 위치(=이전 컨텍스트)의 컨텍스트의 LexicalEnvironment의 EnvironmentRecord를 탐색해서 해당 변수의 정보를 찾는다. 만약, 이때도 발견하지 못한경우 다시 outerEnvironmentReference의 LexicalEnvironment의 EnvironmentRecord를 탐색하여 해당변수의 정보를 찾는다
- 이렇게 체인형식으로 LexicalEnvironment를 참조하여 가장 가까운 요소부터 정보를 찾아가는것을 스코프체인이라고한다.
전역변수와 지역변수
- 전역변수 : 전역컨텍스트의 LexicalEnvironment에 담긴 변수
- 지역변수 : 전역컨텍스트 이외의 실행컨텍스트의 변수들
- 전역변수는 지역변수의 varialbe shadowing 현상으로인해 접근할 수 없게된다.
'Frontend' 카테고리의 다른 글
JS 클로저 (0) | 2020.11.07 |
---|---|
JS this (0) | 2020.11.07 |
JS 데이터 타입 (0) | 2020.11.07 |
14. Redux-middleware (0) | 2020.11.06 |
13. React-Redux (0) | 2020.11.06 |