실행 컨텍스트

date
May 18, 2022
thumbnail
slug
실행컨텍스트
author
status
Published
tags
JavaScript
summary
Record 환경레코드 [Environment Record] 식별자와 식별자에 바인딩된 값을 기록 호이스팅 자바스크립트 엔진이 변수나 함수를 먼저 기록함으로서 스코프의 최상단에 위치하는 것처럼 동작하는 것
type
Post
updatedAt
Jan 22, 2023 01:19 AM
Record환경레코드 [Environment Record]호이스팅변수 호이스팅함수 호이스팅외부 환경 참조 [Outer Environment Reference]
JS를 하면서 왜 이게 이렇게 되는거지? 를 해결하기 위한 실행컨텍스트

Record

환경레코드 [Environment Record]

식별자와 식별자에 바인딩된 값을 기록

호이스팅

자바스크립트 엔진이 변수나 함수를 먼저 기록함으로서 스코프의 최상단에 위치하는 것처럼 동작하는 것
console.log(TVChannel)//undefinedvar TVChannel = 'Netflix';

console.log(TVChannel)//Netflix

변수 호이스팅

console.log(TVChannel)//undefinedvar TVChannel = 'Netflix';

console.log(TVChannel)//Netflix
  1. 생성단계 Creation Phrase
실행컨텍스트를 생성하며 선언문만 실행해서 환경 레코드에 기록
{ TVChannel : undefined } var 키워드 이기 때문에 선언과 초기화가 동시에 일어남
// console.log(TVChannel)

var TVChannel = 'Netflix';

// console.log(TVChannel)
  1. 실행단계 Execution Phrase
선언문 외에 코드 순차적으로 실행
환경레코드를 참조하거나 업데이트
{ TVChannel : Netflix } 넷플릭스로 업데이트합니다.
console.log(TVChannel)//undefined// 선언과 초기화만 일어났기 때문에 undefinedvar TVChannel = 'Netflix';

console.log(TVChannel)//Netflix
💡 일시적 사각지대 Temporal Dead Zone
console.log(TVChannel)//undefined//Reference Error// let이나 const로 선언했을 때 선언 이전에 식별자를 참조할 수 없음const TVChannel = 'Netflix';

console.log(TVChannel)//Netflix
💡 var
  • 선언 Declaration메모리 공간을 확보하고 식별자와 연결{ TVChannel : }
  • 초기화 Initialization식별자에 암묵적으로 undefined 값 바인딩{ TVChannel : undefined }
💡 let, const
  • 선언 Declaration메모리 공간을 확보하고 식별자와 연결{ TVChannel : }
선언 라인 이전에는 변수를 참조할 수 없다 = 일시적 사각지대
  • 초기화 Initialization식별자에 암묵적으로 undefined 값 바인딩{ TVChannel : undefined }

함수 호이스팅

  • 함수 표현식
/* Global */

study();//Type Errorvar study = () => {
    console.log('do study');
};
{ study: undefined } undefined는 호출될 수 없기 때문에 Type Error
/* Global */

study();//Reference Errorconst study = () => {
    console.log('do study');
};
함수 표현식에서는 변수에 함수를 선언하기 때문에 변수 호이스팅과 동일하게 동작합니다.
  • 함수 선언문
/* Global */study();// do studyfuncrion study () {
    console.log('do study');
};
선언과 동시에 함수가 생성되기 때문에 선언 전에도 함수를 사용할 수 있다.

외부 환경 참조 [Outer Environment Reference]

let lamp = false;

console.log(lamp);//false
let lamp = false;

function goTo2F () {
    let lamp = true;

    console.log(lamp);

    goTo3F();

    function goTo3F () {
        let pet = 'puppy';
        console.log(pet);
    }
}

goTo2F();
callstack에 하나씩 쌓인다.