Core javascript(02-실행 컨텍스트)

실행할 코드에 제공할 환경정보

동일한 환경에 있는 코드들을 실행할때 필요한 환경 정보들을 모아 context를 구성
이를 call stack 에 쌓아올렸다가 가장 위에 있는 context와 관련있는 코드를 실행하는것으로
전체 코드의 환경과 순서를 보장

context 구성 방법

1. 전역
2. eval() 함수
3. 함수 호출
4. 블록

call stack 에 실행 context가 쌓이는 순서

var a = 1;
var outer = funtion () {
	var inner = function () {
    	console.log(a)
    }
    inner();
}
outer();

1.  코드 실행과 함께 전역 context가 쌓임
2. 전역 context의 코드들을 실행
3. 함수 호출시 함수의 환경 정보를 수집하여 실행 context를 생성
4. call stack 에 추가
5. call stack 최상단에 함수 context가 존재하므로 전역 context실행을 일시 정지
6. 함수 내부 코드 순차 실행
7. 함수 코드 실행 종료 후 call stack 에서 제거 
8. 전역 context이어서 실행
9. 전역 code 종료 후 전역 context call stack 에서 제거

context 활성화시 필요한 환경정보

• VariableEnvironment: 현재 context내의 식별자들에 대한 정보 + 외부 환경 정보 + 선언 시점의 LexicalEnvironment의 스냅샷(변경사항 반영 X)
• LexicalEnvironment: 초기에는 VariableEnvironment와 동일하지만 변경사항이 실시간 반영됨
• ThisBinding: this 식별자가 바라보는 객체

VariableEnvironment

• LexicalEnvironment와 동일하지만 최초 실행시의 스냅샷을 유지하는점이 다름
• 실행 context 생성시 VariableEnvironment에 정보를 담고, 이를 그대로 복사해서 LexicalEnvironment를 생성
• 이후에는 LexicalEnvironment를 주로 사용

LexicalEnvironment

var x = 10;

function foo(){
  var y = 20;
 console.log(x+y); // 30
}

• environmentRecord
  • 현재 context와 관련된 코드의 식별자 정보들 저장
  • ex) 매개변수 식별자, 선언된 함수, 변수 식별자 등
  • 순서대로 수집
  • 호이스팅 -> 코드해석을 좀더 수월하게 하기 위해 environmentRecord의 수집과정을 추상화한 개념
    • 함수 선언문은 전체를 호이스팅
    • 함수 표현식은 선언부만 호이스팅

함수 선언문

function a () { ... }​​

함수 표현식

var b = function () { ... }​

 함수 선언문은 전체가 호이스팅 되어 중복 선언시 의도하지 않게 선언 전에 호출하거나 의도치 않게 함수 내용이 덮어 씌워질 수 있음 -> 협업시 함수표현식 사용을 권장

• outer-EnvironmentReference
  • 현재 호출된 함수가 선언될 당시의 lexicalEnvironment를 참조함 
  • scope: 식별자에 대한 유효범위
  • scope chain: 식별자의 유효범위를 내부에서 외부로 차례로 검색해나가는것
    • 식별자가 존재하는경우 검색을 더이상 하지않고 반환함으로 이것을 이용해 같은 이름의 변수를 외부, 내부에 모두 선언하면 외부의 변수를 은닉할 수 있음

 

QUIZ

console에서 출력될 결과를 예상해보세요!

var a = 1;
var outer = function () {
    var inner = function () {
        console.log(a);
        var a = 3;   
    }
    inner();
    console.log(a);
}
outer();
console.log(a)

 

 

참고자료

https://dev.to/aman_singh/lexical-environment-the-hidden-part-to-understand-closures-4cc6

Lexical Environment-the hidden part to understand Closures

https://velog.io/@ggong/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%8B%A4%ED%96%89-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8-execution-context

자바스크립트의 실행 컨텍스트 (execution context)

core javascipt - 정재남저