[자바스크립트] 실행컨텍스트: js 동작원리

[목표]

- 실행컨텍스트, VO를 이해하기

- 자바스크립트 동작원리를 이해해야 패턴을 왜쓰는지 알 것 같으니깐 이해하기

[실행컨텍스트란]

- 실행컨텍스트는 추상적인 개념

- 어떻게 자바스크립트 코드가 실행되는지 이해하기위해 알아야하는 개념

- 실행컨텍스트는 실행되는 코드의 한 덩어리라 생각하면 됨

- 예시

(1) 함수가 호출되면 함수의 실행컨텍스트가 생성됨

(2) 실질적으로는 함수 내부 정보를 담는 객체가 생성되고, 그 객체에는 함수 정보가 담김(프로퍼티 생성 : 변수명, 함수명 등이 프로퍼티로 생성됨)

    => 변수에 대한 값 혹은 함수의 실행 부분이 초기화되는 것은 아님 - 호이스팅 부분과 관련되어있음)

    => 이후 코드가 실행됨

console.log("이것이 global context")
 
function ex1(){
     console.log("1번째 함수")
}
 
function ex2(){
     ex1()
     console.log("2번째 함수")
}
 
ex2()
 

[실행컨텍스트 종류]

(1) 전역코드의 실행컨텍스트

- 전역 객체(Global Object)의 실행컨텍스트

- 전역 객체는 1개 뿐임 : 객체의 프로퍼티를 통해 전역변수, 전역함수 등 프로그램 어디든 접근 가능

- 전역 객체 프로퍼티를 보고싶다면 크롬개발자도구에서 window를 치고 엔터

- 전역 객체에는 기본적으로 Built-in object(Math, String, Array 등) BOM(window 객체), DOM이 세팅되어있음

- 생성과정은 아래에 나와있는 것과 같음(변수객체, 스코프 정보 생성 및 초기화, this 바인딩)

(2) 함수코드의 실행컨텍스트

- 함수 정보가 저장되는 객체의 컨텍스트

[실행컨텍스트 생성 및 파기과정]

(1) 스코프 정보(스코프 체인) 생성

- 현재 실행컨텍스트의 유효 범위를 나타내는 스코프 정보가 생성됨(어디까지 현재 실행 함수가 유효한지, 범위 정보)

- 스코프 정보에는 어떤 것들까지 연결되는지 정보가 담겨있음

- 스코프 정보를 통해 상위 실행 컨텍스트 변수 접근도 가능함(scope chain)

  => 하위 함수가 실행되는 동안 상위함수의 변수 또는 함수 메모리를 참조하는 것

  => 최상위는 전역객체(window)

- 스코프 정보는 리스트 형태로 생성됨

- [[scope]] 프로퍼티로 이 리스트를 참조할 수 있음

- 리스트에서 찾지 못한 변수는 정의되지않은(undefined)로 판단되어 ReferenceError를 출력

(2) 변수 객체(Variable Object, 줄여서 VO) 생성

- 실행에 필요한 여러 정보(변수, 함수, 매개변수 - 프로퍼티로는 매개변수를, 값으로는 인수를)를 담음

- 전역코드 실행컨텍스트에서는 전역객체(window, 모든 전역변수/함수 등을 담음)가 변수 객체(VO) 역할

- 함수코드 실행컨텍스트는 변수 객체를 하나씩 생성함

- 변수 객체 세팅은 아래의 순서와 같이 세팅됨

1) 매개변수가 객체의 프로퍼티로, 인수가 프로퍼티의 값으로 세팅됨

2) 함수명이 객체의 프로퍼티로, 함수 객체(함수선언식)가 값으로 세팅됨

    => 함수표현식은 제외 : var myfuntion = function() { ... }

3) 변수명이 프로퍼티로, undefined가 값으로 세팅됨

    => 아직 실제값이 세팅된 것이 아님

    => 함수 포스팅에서 호이스팅 부분 참고

(3) this 바인딩

- this 키워드를 통해 참조되는 값이 바인딩됨

- 모든 실행컨텍스트와 관련되어 있음

- 객체의 스코프 프로퍼티에 값이 없으면 전역 객체(window.)의 스코프 프로퍼티 값(전역코드 실행컨텍스트)을 참조함 

(4) 코드 실행

- 코드 실행은 진짜 이부분, 변수객체가 생성되고 프로퍼티와 this 바인딩이 모두 세팅된 다음

- 앞서 변수 객체에서 대입되지 않았던 값이 여기서 대입됨

(5) 실행컨텍스트 파기

- 함수코드의 실행컨텍스트 함수 실행이 끝나면 해당 함수의 실행컨텍스트를 파기함

- 전역코드의 실행컨텍스트는 어플리케이션 종료 시 파기함

- 컨트롤은 이전 컨텍스트에 반환됨