# 실행 컨텍스트

김승훈·2021년 5월 3일
0

JavaScript

목록 보기
10/16
post-thumbnail
  • 실행 컨텍스트의 개념

    • 실행 가능한 코드를 형상화하고 구분하는 추상적인 개념
    • 실행 가능한 자바스크립트 코드 블록이 실행되는 환경
  • 실행 컨텍스트가 형성되는 경우

    • 전역코드
    • eval 함수로 실행되는 코드
    • 함수안의 코드를 실행할 경우

현재 실행되는 컨텍스트에서 이 컨텍스트와 관련없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다.

console.log("This is global context");

function ExContext1() {c
function ExContext2() {
	ExContext1();
	console.log("This is ExContext2");
}

ExContext2();

실행 컨텍스트의 실행순서는 전역 컨텍스트가 가장 먼저 실행된다.

  • 위 코드의 실행순서는 다음과 같다.
    1. 전역 컨텍스트
    2. console.log("This is global context");
    3. ExContext2() 호출
    4. ExContext2함수 안의 ExContext1()을 호출
    5. ExContext1() - console.log("This is ExContext1");
    6. ExContext1()을 반환
    7. ExContext2()안의 console.log("This is ExContext2"); 실행
    8. 실행 완료

    JavaScript Visualization : http://latentflip.com/
    
    ---
    
    - 실행 컨텍스트 생성 과정
    
        ```css
        function execute(param1, param2){
        var a = 1, b = 2;
        	funciton func() {
        		return a + b;
        	}
        	return param1 + param2 + func();
        }
        execute(3, 4);
        ```

    ### 변수 객체 컨텍스트
    
    1. 활성객체 생성
    
        활성객체 - 자바스크립트 엔진이 해당 컨텍스트에서 실행에 필요한 여러 가지 
        정보를 담는 객체
    
    2. arguments 객체 생성
    3. 스코프 정보(Scope Chain) 생성
        - 유효범위를 나타내는 스코프 정보 생성
        - 리스트와 유사항 형식으로 만들어짐.
        - 이 리스트에서 찾지 못한 변수는 정의되지 않아, 에러를 검출함.
    
        스코프 체인(Scope Chain) - 스코프정보 리스트
    
    4. 변수생성
        - 실행 컨텍스트 내부에서 사용되는 지역 변수가 생성됨.
        - 변수 객체 안에서 호출된 함수 인자는 각각의 프로퍼티가 생성되고 값이 할당됨.
        - 값이 넘어오지 않는 경우 undefined가 할당됨.
    
        변수나 내부 함수를 단지 메모리에 생성
    
        초기화는 각 변수나 함수에 해당하는 표현식이 실행되기전까지는 이루어지지 않음.
    
        - 표현식의 실행은 변수 객체 생성이 다 이루어진 후 시작됨.
    5. this 바인딩
        - 마지막 단계에서 this키워드를 사용하는 값이 할당됨.
        - this가 참조하는 객체가 없으면 전역 객체를 참조함
    
    6. 코드 실행
    
        참고 : [https://velog.io/@stampid/Execution-Context실행-컨텍스트란](https://velog.io/@stampid/Execution-Context실행-컨텍스트란)

상세한 설명 : https://velog.io/@imacoolgirlyo/JS-자바스크립트의-Hoisting-The-Execution-Context-호이스팅-실행-컨텍스트-6bjsmmlmgy

let과 const는 실행 컨텍스트가 만들어질 때 (creation phase) 어떤 값도 가지고 있지 않다. 하지만 var는 undefined를 가지고 있다.

그 이유는 실행 컨텍스트가 만들어지는 동안, 코드는 변수와 함수 선언을 위해 스캔된다. 이때 함수의 선언은 environment에 함수 전체가 다 저장되지만, 변수들은 기본 값으로 undefined나 아직 초기화 되지 않은 상태로 저장된다. (호이스팅 개념)

이 때문에 var 변수가 선언되기 전에 undefined라는 값으로 접근 할 수 있는 것이고 let과 const를 선언하기 전에 접근하면 reference error를 얻게 되는 것이다.

이것을 우리는 호이스팅이라고 부른다.

execution phase 동안 자바스크립트 엔진이 소스 코드에서 let 변수의 값이 선언된 곳을 찾지 못하면 undefined를 할당한다.

0개의 댓글