실행 컨텍스트
date
May 18, 2022
thumbnail
slug
실행컨텍스트
author
status
Published
tags
JavaScript
summary
Record
환경레코드 [Environment Record]
식별자와 식별자에 바인딩된 값을 기록
호이스팅
자바스크립트 엔진이 변수나 함수를 먼저 기록함으로서 스코프의 최상단에 위치하는 것처럼 동작하는 것
type
Post
updatedAt
Jan 22, 2023 01:19 AM
JS를 하면서 왜 이게 이렇게 되는거지? 를 해결하기 위한 실행컨텍스트
Record
환경레코드 [Environment Record]
식별자와 식별자에 바인딩된 값을 기록
호이스팅
자바스크립트 엔진이 변수나 함수를 먼저 기록함으로서 스코프의 최상단에 위치하는 것처럼 동작하는 것
console.log(TVChannel)//undefinedvar TVChannel = 'Netflix';
console.log(TVChannel)//Netflix
변수 호이스팅
console.log(TVChannel)//undefinedvar TVChannel = 'Netflix';
console.log(TVChannel)//Netflix
- 생성단계 Creation Phrase
실행컨텍스트를 생성하며 선언문만 실행해서 환경 레코드에 기록
{ TVChannel : undefined }
var
키워드 이기 때문에 선언과 초기화가 동시에 일어남// console.log(TVChannel)
var TVChannel = 'Netflix';
// console.log(TVChannel)
- 실행단계 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에 하나씩 쌓인다.