[JavaScript] 호이스팅과 TDZ는 무엇일까?(2)

함수 실행의 원리

자바스크립트는 하나의 스레드로 단 1개의 동시성만 다루는 언어이다.

->한번에 하나의 작업만 실행 할 수 있다.

 

실행 컨텍스트와 콜 스택

자바스크립트의 동작 과정은

1. 코드를 훑어 함수를 만나면 실행 컨텍스트를 생성한다
2. 생성한 컨텍스트 안에 해당 코드에 대한 식별자 정보, 선언위치, 외부환경 정보를 수집한다.
3. 실행 컨텍스트를 콜스택에 쌓아둔다.

위와 같다.

 

 

 

위에서 언급되는 실행 컨텍스트와 콜스택은 무엇인가.

 

 

 실행 컨텍스트(Execution Context)

 

 

실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다. 우리가 코드를 작성하고 실행한다면 실행 컨텍스트(Execution Context) 내부에서 실행되고 있는 것이다.

즉 코드들이 실행되기 위한 환경이자 하나의 박스이자 컨테이너라 볼 수 있다.

실행 컨텍스트의 타입은 다음과 같다

• 전역 컨텍스트 : 기본 실행 컨텍스트로 함수 내부에 없는 코드는 전역 컨텍스트에서 실행된다. 이 전역 컨텍스트 안에서는 두 가지 작업                         을 수행한다
                         1) 첫 번째로 window 전역 컨텍스트를 생성한다.
                         2) this를 전역 객체로 설정한다
• 함수 컨텍스트 : 함수가 호출 될 때마다 해당 함수에 대한 새로운 실행 컨텍스트가 생성됩니다. 각 함수별로 실행 컨텍스트를 가지고 있지만 실행 컨텍스트는 함수가 호출될 때 만들어집니다. 함수 실행 컨텍스트(Functional Execution Context)는 얼마든지 있을 수 있으며 새로운 실행 컨텍스트가 생성될 때마다 차례대로 수행됩니다.
• Eval 코드 : eval 함수 내에서 실행되는 코드도 실행 컨텍스트를 가진다. 하지만, 보안상의 문제로 eval은 잘 사용되지 않는다.

자바스크립트 엔진은 코드를 실행하기 위하여 실행에 필요한 여러가지 정보를 알고 있어야한다.

 

여기서 여러가지 정보란 다음과 같다

 

• 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
• 함수선언
• 변수의 유효범위
• this

실행에 필요한 정보를 형상화하고 구분하기 위해 자바스크립트 엔진은 물리적 객체의 형태로 관리한다.

실행 컨텍스트의 생성 과정

1. 스코프 체인의 생성과 초기화 2. Variable Instantiation(변수 객체화) 실행 3. this value 결정

1. 전역 코드에의 진입
   1. 스코프 체인의 생성과 초기화
   2. 변수 객체화 Variable Instantiation 실행
2. this.value 결정

 

 

 

 

 

 

 

<콜스택>

자바스크립트의 엔진은 생성된 Context를 관리하는 목적의 CallStack(호출스택)을 갖고 있다. 자바스크립트는 단일 스레드 형식이기 때문에 런타임에 단 하나의 Call Stack이 존재하고 자바스크립트의 엔진은 전역 범위의 코드를 실행하며 전역 컨텍스트를 생성해 stack에 push(추가)한다.
그리고 함수가 실행 또는 종료 될 때마다 전역 컨텍스트의 위로 함수 컨텍스트를 push(추가), pop(제거)한다.

콜스택은 최대 스택 사이즈가 정해져있는데 콜스택에 쌓인 Context Stack이 최대치를 넘게 될 경우 ‘RangeError: Maximum call stack size exceeded’라는 에러가 발생한다. 이 에러는 Stack Overflow 라고 부르기도 한다.

 

1줄 요약 : 프로그램이 함수 호출을 추적할때 사용한다.

 

 

 

 

 

 

 

참조

https://catsbi.oopy.io/fffa6930-ca30-4f7e-88b6-28011fde5867

실행 컨텍스트와 자바스크립트의 동작 원리

https://oizys.tistory.com/27

JS33 - 01.Callstack콜스택 (+ 실행컨텍스트)

https://poiemaweb.com/js-execution-context

Execution Context | PoiemaWeb

https://blog.bitsrc.io/understanding-execution-context-and-execution-stack-in-javascript-1c9ea8642dd0