23/10/29 TIL _ 실행컨텍스트, 호이스팅에 관하여

 

 

 

내일배움캠프 에서 자바스크립트 종합반 강의가 주어져 다 들었지만,

실행컨텍스트에 대해 전혀 이해가 가지 않아 답답했었다. 

그러다 내배캠 내부에서 이론에 관한 특강이 있어 공부하게 되었는데, 

정말 이해가 잘 되게 알려주셨다.  

이해된 이 내용을 기록하기 위해 정리한다. 

 

 

일단 실행컨텍스트에 대해 알기 전에,

메모리 공간과, 인터프리터, 컴파일러에 대해 알아야 한다. 

 

🚗  메모리 공간

 

• 각 영역별로 구분되어 있고, 각 영역별로  역할이 다르다. 
• 코드영역  __  실행할 프로그램의 코드가 저장된다. 
• 데이터 영역   __ 전역변수, 정적변수가 저장되는 공간.
• 힙 영역  __ 프로그래머가 할당 및 해제하는 메모리 공간
• 힙 영역  __ 런타임에 크기가 결정된다. (객체타입 - array, 클래스, obj 등등 저장된다.)
• 스택 영역  __  LIFO(last in first out) 방식이며, 가장 마지막에 들어온 것 부터 실행이 되며 값을 할당한다.
• 스택 영역  __   프로그램이 자동으로 사용하는 임시 메모리 영역이다.
• 스택 영역  __   함수 호출이 완료되면, 할당된 영역이 해제된다.

 

 

 

🚓   인터프리터

 

• 코드를 한줄 한줄 순서대로 읽어 나가며 기계어로 번역 및 실행한다.
• 코드를 실행하기 전 컴파일 단계가 없이 바로바로 처리하기 때문에, 실행 속도가 빠르다
• 그러나 코드가 많아질 수록 느려진다는 단점이 존재한다.

 

 

🚕   컴파일러

 

• 파일 전체를 처음부터 끝까지 다 읽은 후에, 컴파일 하여 기계어로 변환한다.
• 즉, 한번에 처리한다. 
• 변환된 기계어는 cpu로 입력되어 코드가 실행된다
• 함수가 반복사용 될때에, 함수를 반복해서 실행하지 않고, 함수의 결과물을 반복한다. _ 작업이 단순화 된다. 

 

 

 

🚙   V8 엔진

 

• 구글에서 최초로 개발했으며, 크롬에 적용되어 있는 자바스크립트 엔진이다. 
• v8 엔진을 기반으로 Node.js 가 만들어 졌다.
• 기존의 자바스크립트 엔진은 인터프리터 방식을 사용했지만, 코드가 많아지면 느려졌다.
• 인터프리터 대신 JIT 컴파일러(just in time) 를 이용하여 모든 코드를 쭉 읽도록 만든것이 바로 V8엔진.
• 따라서 V8 엔진은 컴파일러 이자 인터프리터 이다. 
• 모든 코드를 컴파일러 처럼 쭉 읽은 후, 인터프리터 언어처럼 한줄 씩 실행하기 때문이다.  

 

 

 

 

🚎   실행 컨텍스트

 

식별자도 저장하고, 외부환경도 참조하며 코드가 실행되는 환경을 제공하는 객체

 

 

 

• 위에서부터 아래로 코드를 읽으며 함수를 만나게 되면, 해당 함수에 대한 실행 컨텍스트를 콜스텍에 쌓아둔다. 
• JS 실행시 저절로 실행되는 전역 실행 컨텍스트가 존재하며, 그 위로 해당 함수에 따라 콜스텍에 실행컨텍스트를 쌓아둔다.
• 가장 위에 있는 실행 컨텍스트를 활성화된 실행 컨텍스트 라고 한다. 
• 실행이 완료되게 되면 제거된다. 

 

🚌   실행 컨텍스트 내부

 

여러가지가 존재하지만, 일단은 2가지로 기억하고 이해해 보자. 

 

 

👉  Enviroment Record _ 환경 레코드

 

•  식별자와 바인딩 된 값을 저장한다. 

 

 

 

 👉   Outer Enviroment Reference _ 외부 환경 참조 

 

• 상위 Lexical Environment(정적 환경)을 참조한다. 
• 중첩된 자바스크립트 코드에서, 상위 요소의 스코프 탐색 및 식별자 탐색을 하는데 사용된다. 

 

 

 

여기까지만 읽으면 이게 도대체 무슨말인가 싶다.  

좀더 살펴보자. 

 

 

 

🚜   호이스팅  

 

선언이 되어있지 않는데도 불구하고, 선언이 최상단에 끌어올려져 있는 것처럼 보이는 현상. 

 

 

자바스크립트의 코드 실행 순서를 살펴보면 호이스팅 이라는 개념과, 실행 컨텍스트에 대한 이해가 된다. 

자바스크립트의 코드 실행 순서는 이렇다. 

 

1. 파일을 처음부터 끝까지 읽는다.
2. 실행 컨텍스트 생성한다. 
3. 선언문만 실행하여, 메모리 공간 확보 후 Enviroment Record 에 기록한다. 
4. 이때 var 변수의 경우 선언 이전에 호출되면, 초기화 작업 진행 후 undefined라는 값을 바인딩 한다.
5. let 이나 const 변수의 경우 선언 이전에 호출되면, 일시적 사각지대가 되며 Refference Error가 발생한다.
6. 이후 값이 할당된다면, Enviroment Record 에 기록을 업데이트 하게 된다.
7. 값 할당후 호출이 된다면,  Enviroment Record 의 기록을 참조하여 내보낸다. 

 

변수 뿐만 아니라 함수도 마찬가지다. 

함수 선언식과 함수 표현식에 따라 약간 다른데, 

 

 

✅ 함수 표현식 

 

• 함수 안에 내용물을 저장하지 않는다는 특성이 있다. 
• var 의 경우, 함수보다 위에서 호출하게 되면, undefined를 실행하려 했다고 인식하며, Type Error가 발생한다.
• let 이나 const 의 경우,  실행컨텍스트에서 선언문은 실행이 되지만, 초기화를 진행하지 않았기 때문에 참조값이 없다. Refference Error 가 발생한다. 

 

✅ 함수 선언식 

 

• 함수의 호출 위치가 함수보다 위에서 호출해도 함수 안에 내용물이 레코드에 저장된다.
• var, let, const 의 경우 모두 그렇다. 

 

 

 

 

호이스팅까지 보고 나니 이제 실행컨텍스트가 어떤 역할을 하는지 좀 알 것 같다. 

다음 게시글에는 스코프체이닝과, 클로저에 대해 알아보자!!