[CORE - JAVASCRIPT] 1. 실행 컨텍스트

실행 컨텍스트란?

함수를 실행할때 필요한 조건 및 환경정보를 담은 객체

예제 1 (컨텍스트 flow)

var a = 1;

function outer(){
    console.log(a)  //--> 1번
    function inner(){
        console.log(a) // --> 2번
        var a = 3
    }
    inner()
    console.log(a) // --> 3번
}

outer()

console.log(a) // --> 4번

코드 실행 흐름

1. 전역 컨텍스트 생성
2. outer 함수 실행 및 실행 컨텍스트 생성
3. 1번 console.log(a) 출력
4. inner 함수 실행 및 실행 컨텍스트 생성
5. 2번 console.log(a) 출력
6. 3번 console.log(a) 출력
7. 4번 console.log(a) 출력

전역 컨텍스트 실행 -> outer 함수 실행 -> inner 함수 실행 -> inner 함수 제거 -> outer 함수 제거 -> 전역 컨텍스트 제거

이런식으로 자바스크립트는 가장 먼저 들어온것이 가장 마지막에 빠지고, 가장 마지막에 들어온것이 가장 빨리 빠지는 구조를 가지고 있고 이 자료구조를 '스택(stack)' 이라고 하며 코드 실행에 관여하는 스택을 콜스택(call stack) 이라고 한다.

실행 컨텍스트의 내부 살펴 보기

실행 컨텍스트는 3가지 정보들을 담고 있다.

1. VariableEnvironment (식별자 정보 수집) 실시간 변화 반영 x
2. LexicalEnvironment (각 식별자의 '데이터' 추적) 실시간 변화 반영 o
3. ThisBinding

LexicalEnvironment

environmentRecord (내부 식별정보)
outerEnvironmentReference (외부 참조정보)

호이스팅

실행 컨텍스트 최초 실행시 가장먼저 하는것이 environmentRecord 수집 하는것이고 이것을 호이스팅 이라고 부른다.

console.log(a());
console.log(b());
console.log(c());

function a() {
  return "a";
}

var b = function bb() {
  return "bb";
};

var c = function () {
  return "c";
};

호이스팅이 완료된다면 아래처럼 변경된다고 생각하면 된다.

function a() {
  return "a";
}

// 호이스팅시 함수의 경우 함수 전체가 호이스팅됨

var b;
var c;

console.log(a());
console.log(b());
console.log(c());

var b = function bb() {
  return "bb";
};

var c = function () {
  return "c";
};

스코프, 스코프 체인

이렇게 outerEnvironmentReference 를 통해 다른 부분의 함수를 참조한다.

outerEnvironmentReference를 통해 외부 식별자를 참조할때의 유효범위 즉 변수의 유효 범위는 스코프(scope)라고 하며, outerEnvironmentReference의 연결 리스트들을 스코프 체인(scope chain)이라고 한다.