[Javascript] 실행컨텍스트(스코프, 변수, 객체, 호이스팅)

01 실행 컨텍스트 개념

---

 1) 실행 컨텍스트란?

실행할 코드에 제공할 환경정보들을 모아놓는 객체로, 동일환경에 있는 코드를 실행할 때 한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 위에서 설명드린 스택의 한종류인 콜스택에 쌓아올린다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할수있다

 (1) 선언된 변수를 위로 끌어올린다(==호이스팅)
 (2) 외부 환경 정보를 구성
 (3) this 값을 설정

실행 컨텍스트를 이해하기 위해서는 먼저 콜 스택에 대한 이해가 필요하다. 늘 비교가 되는 두개의 대상을 정리하면 스택과 큐가 있는데 먼저 들어온 것이 먼저 나가는 FIFO의 형태인 큐와는 달리 스택은 마지막에 들어온 것이 가장 먼저 나가는 형태를 띄고 있다.

 

스택 : LIFO, Last in First out  /  큐 : FIFO, First in First out

스택/ 큐

 

 2) 실행 컨텍스트 구성 순서

콜 스택에 쌓이는 실행컨텍스트에 의해 순서가 보장된다.

코드 실행 > 전역(in) > 전역(중단) + outer(in) > outer(중단) + inner(in) > inner(out) + outer(재개) > outer(out) + 전역(재개) > 전역(out) > 코드종료

 

 3) 실행 컨텍스트에 담기는 정보 (객체의 실체)

  (1) VariableEnvironment(VE) - 식별자 정보, 외부 환경정보

: 현재 컨텍스트 내의 식별자 정보를 가지고 있으며 외부 환경 정보(outer)를 갖고 있다. 선언시점 LexicalEnvironment의 snapshot이다

ex) var a = 3 , 이라면 여기서 var a를 의미

  (2) LexicalEnvironment(LE)

: VariableEnvironment와 동일하지만, 변경사항을 실시간으로 반영한다. 

  (3) ThisBinding

: this 식별자가 바라봐야할 객체

 

 

🔎 VariableEnvironment(VE)와 LexicalEnvironment(LE)의 차이

- VE와 LE는 둘이 완전히 동일하나 실시간으로 반영하냐, 반영하지 않느냐의 차이
- VE는 스냅샵의 개념이고 LE는 VE의 정보를 담은다음 복사해서 업데이트한다.
 
결국, 실행 컨텍스트를 생성할때, VE에 정보를 먼저 담은 다음, 이를 그대로 복사해서 LE를 만들고 이후에는 주로 LE를 활용
 VE는 recode(식별자 정보)와 outer(외부 환경 정보)를 갖고 있다.

 

 

02 호이스팅

---

 1) 호이스팅이란?

식별자 정보를 맨 위로 끌어올리는 것

식별자 개념을 수집할때 나온다, 변수 정보 수집 과정을 이해하기 쉽게 설명한 가상개념으로 실제 그렇다는 것은 아니며
컨텍스트 내부를 처음부터 끝까지 순서대로 훑어가며 수집하고 코드가 실행되는 것은 아니다.

호이스팅 예제 1

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

실행결과
undefined
1
1

 

🔎 왜 undefined가 나왓을까?
먼저, 위의 코드에서 undefined의 결과가 나온 inner() 함수를 보았을때 호이스팅되면 먼저 변수를 선언해주고 그다음 console.log(a)가 나오기때문에 변수는 선언되었지만 값은 초기화되어있지 않기 때문에 undefined가 나왔음을 알 수 있다.

var a;
consloe.log(a); //undefined
var a = 3;

호이스팅법칙 1 : 매개변수 및 변수를 선언부를 호이스팅

호이스팅 개념을 몰랐다면 예측 불가했을 것이다.

호이스팅 법칙 2 : 함수 선언은 전체를 호이스팅

03 함수 정의 방식

---

함수 정의 방식에는 크게 함수 선언문과 함수 표현식 두가지로 나눌 수 있다

 1) 함수 선언문

함수 선언문을 주의해야하는 이유로는 만약 이미 정의되어 있는 함수를 모르고 다른 값으로 리턴하도록 함수를 다시 짰다면 모든 함수에 영향을 미치게 되는데 이것은 함수는 위로 쭉 호이스팅되서 전체 함수에 영향을 미치기때문이다. 그래서 함수를 짤때에는 주의를 해서 짜야한다.

 

 2) 함수 표현식
그런데 만약 함수 선언문이 아닌 함수 표현식이었다면 코드를 변경해도 변경한 부분 이후부터의 코드만 영향을 받음

04 스코프 / 스코프체인

---

 1) 스코프
변수가 어디까지 영향을 미칠수있느냐, 식별자에 대한 유효범위

 2) 스코프체인
outer는 현재 호출된 함수가 선언될 당시에 외부 환경 정보를 가지고 있음

함수 안에 함수는 전역변수가 영향이 없는걸까하는 고민을 했었는데 호이스팅되면 내부 함수에서 하기때문에 스코프체인과 아무런 상관이 없다.