본문 바로가기
Frontend

JS 실행 컨텍스트

by yongmin.Lee 2020. 11. 7.

실행 컨텍스트, 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