JS 스터디 회고(실행컨텍스트)

• 실행컨텍스트란?
  실행 컨텍스트란 execution context로 실행이라는 execution과 문맥이라는 context라는 단어가 합쳐진 말이다.
  직역해보면 실행해주기 위해 연결해주는 문맥?? 이라는 느낌인거 같은데
  이를 해석해보면 코드가 실행되기 위해 필요한 환경을 제공하는 객체라는 의미이다.

그렇다면 어떻게 환경을 제공한다는건지?

우선 실행 컨택스트의 종류는 3가지로 나눌 수 있다.

• 실행컨텍스트 종류
  

다른 설명에서는 모듈 코드가 실행될 때 모듈 컨텍스트도 생성된다는게 있는데 대부분 찾아보면 이 세가지가 주로 설명이 나와있는듯하다.
내 개인적인 생각으로는 코드가 실행되면 컨텍스트가 생성이 되는게 아닐까 하는데 혹시 잘못 알고 있으면 댓글 부탁드려요...

그러면 실행컨텍스트의 구조는 어떻게 생긴거지?

• 실행 컨텍스트 구조
  

우선 컨텍스트의 큰 구조는 세가지가 있는데

1. Variable Environment
   현재 컨텍스트 내 식별자들에 대한 정보 + 외부 환경 정보
2. Lexical Environment
   VariableEnvironment를 복사 → 변경 사항이 실시간으로 반영
3. thisBinding
   this 식별자가 바라봐야 할 대상 객체

이렇게 보면 뭔가 Variable Environment는 원래 있는거고 Lexical Environment는 이 Variable을 복사해서 갖고있다는 의미인거 같은데 이건 몇번을 봐도 좀 어려운듯...;;

그리고 Variable, Lexical이 공통적으로 갖고 있는게 바로 오른쪽 아이들이다.

• 실행컨텍스트 구조
  

1. environmentRecord
   현재 컨텍스트와 관련된 코드 식별자 정보를 저장
2. outerEnvironmentReference
   현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조

이렇게 설명이 되있지만 이것도 좀 이해하기엔 쉽지 않은 듯 하다...
그래서 이걸 풀어서 설명해준 사람이 있는데 갓로초(제로초)...
이 설명보고 원리를 보면서 구조를 같이 파악하는게 더 나을거 같긴함

원리를 설명하기 앞서서
실행 컨텍스트는 자바스크립트엔진에 의해서 코드가 작성이 되고 실행되기 이전에 평가 과정을 거치는데 이 때 컨텍스트가 생성이 된다.
그리고 이 때 호이스팅이라는 개념과 스코프체인이라는 개념이 나오는데 이러한 평가 과정을 거친 후 코드가 실행된다.
*호이스팅: 끌어올린다는 의미로 자바스크립트엔진의 코드 평가 과정에서 컨텍스트가 생성될 때 선언된 변수 및 함수를 다 끌어모음

• 실행 컨텍스트 원리

1. 전역 코드 실행 시 전역 컨텍스트 생성
2. 전역 컨텍스트 생성 후, 함수 호출 시마다 컨텍스트가 생성
3. 컨텍스트 생성 시 컨텍스트 안에 변수객체(arguments, variable), scope chain, this가 생성
4. 함수가 실행 후, 사용되는 변수들은 변수 객체 내에서 값을 찾고, 없다면 scope chain을 따라 올라가서 찾음
5. 함수 실행 마무리 후 해당 컨텍스트가 사라지고, 페이지 종료 시 전역 컨텍스트가 사라짐
   *스코프체인: 자신과 상위 스코프의 변수객체

난 그나마 이 글 보고 좀 이해가 됐다.
구조에 대해 개념만 보고 이해한 사람들 respect...
난 머리가 좋은 편은 아닌 듯 하다
그래도 좀 더 이해가 되기 위해서 코드를 같이 참고했음

• 실행 컨텍스트 원리(코드)
  

이 코드에서 a라는 답이 name이라는 건 웬만한 개발자들은 다 알 거라 생각한다.
그럼 왜 이 값이 a이냐
위에 나온 설명 그대로 진행해보면 답을 알 수 있다.

1. 전역 코드 평가 과정
   전역 컨텍스트가 생성되고 arguments, variable을 collecting함
   

인자는 null, 전역 스코프에 있는 변수는 a와 함수 fn1, fn2가 있다.
scopeChain은 자기 자신이 최상위 객체이기 때문에 전역변수객체만 갖고 있다.

이제 평가 과정이 끝났기 때문에 코드를 실행을 시키면 a에 name이 할당 되고 fn1이라는 함수가 실행이 된다.
그러면 이제 fn1 함수 컨텍스트가 생성이 된다.

2. 함수(fn1) 컨텍스트 생성
   

함수 컨텍스트가 생성되면 또 다시 평가 과정이 발생하고 변수객체를 생성한다.
fn1에 인자를 넘겨주지 않았기 때문에 arguments는 당연히 null이 되고 a가 새로 선언이 됐기 때문에 a가 변수에 들어간다.
그리고 scopeChain에는 자기 자신인 fn1변수 객체와 상위 스코프인 전역변수객체가 들어가게 되고 this는 따로 설정해주지 않으면 window가 할당이 된다.

또 다시 평가 과정이 끝나고 실행이 되면 a에 name가 할당이 되고 fn2 함수가 실행되게 된다.

그러면 또 다시 fn2 함수 컨텍스트가 생성이 된다.

3. 함수(fn2) 컨텍스트 생성
   

또 똑같이 평가 과정이 일어나게 되고 변수는 선언된게 없기 때문에 null이 들어오고 scopeChain역시 자기 자신인 fn2와 상위 스코프인 전역변수객체가 된다.

그럼 이제 코드를 실행하게 되면 이제 왜 a가 name이라는 값이 나오는지 대략적으로 알 수 있을 것이다.

그 이유는 fn2에서는 선언된 a가 없기 때문에 상위 스코프인 전역변수객체에서 a를 찾게 된다. 그럼 a가 name으로 할당되있기 때문에 값은 name이다.

그렇다면 fn1은???
fn1은 a가 있지만 a가 상위 스코프에 있는 a가 아닌 새로 선언이 됐기 때문에 상위 스코프인 전역 변수객체에 있는 a와는 다른 새로운 지역변수 a인 것이다.
그렇기 때문에 fn1 a와 fn2 a는 전혀 관계가 없는 a이다.

무슨 실행컨텍스트 하는데 호이스팅에 스코프체인, 자바스크립트엔진, 전역변수 지역변수 다 나온다...
그나마 이것도 조금만 말한듯....;;;

그렇다면 연관이 있게 하려면 어떻게 하면 될까?
여러가지 방법이 있겠지만

fn1함수에서 var을 없애주면 된다.
그렇게 되면 a는 선언된게 아닌 실행시 찾아야 되는 a가 되기 때문에 상위 스코프인 전역 변수의 a의 값을 변경시키고 이것을 재할당이라고도 한다.
그러면 fn2가 실행이 되면 이미 전역 변수 a값이 변경되어 있기 때문에 여기에서 답은 name이 아닌 test가 되는 것이다.

이때까지 과정을 실행 컨텍스트 스택이라고도 한다.

• 실행컨텍스트 스택
  

실행 컨텍스트 스택의 원리는 이벤트 루프의 콜스택과 똑같은 원리라고 한다.

실행 컨텍스트를 잘 이해하면 클로저나 다른 자바스크립트의 어려운 개념을 잘 이해할 수 있다고 하는데
실행 컨텍스트... 쉽지 않았다...