실행 컨텍스트: 호이스팅과 스코프 체이닝

자바스크립트 코드의 실행

 

실행과정

1. 코드 실행이 시작되면 콜스택에 전역 실행컨텍스트가 들어갑니다.
2. 전역에서 특정 함수 ‘A’를 호출할 경우 ‘A’의 실행컨텍스트가 생성되어 콜스택에 들어갑니다.
3. 콜스택에서는 가장 최근에 추가된 실행컨텍스트만 활성화됩니다.
4. 활성화된 실행 컨텍스트 ‘A’는 실행이 종료되면 사라집니다.
5. 전역컨텍스트는 코드가 마지막 라인까지 모두 실행을 마치면 사라집니다.

실행컨텍스트

• 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다.
• 생성 과정
  • 생성 단계: 선언문만 실행해서 환경 레코드에 기록하는 단계입니다.
  • 실행 단계: 선언문 외 나머지 코드를 순차적 실행하거나 환경 레코드 참조, 업데이트하는 단계입니다.
• 구성
  • VariableEnvironment
    • 현재 컨텍스트 내 식별자 정보, 외부환경 정보를 담으며, 변경사항은 반영되지 않습니다.
    • 환경 레코드(Environment Record)와 외부 환경 참조(Outer Environment Reference)로 구성됩니다.
  • LexicalEnvironment
    • VariableEnvironment에서 복사되어 생성되며, 실시간으로 변경사항이 반영됩니다.
    • 환경 레코드와 외부 환경 참조로 구성됩니다.(VariableEnvironment를 복사해왔기 때문)
      • 환경 레코드: 함수 안의 코드가 실행되기 전에 현재 컨텍스트와 관련된 코드의 식별자 정보가 저장됩니다.
      • 외부 환경 참조: 외부 렉시컬 환경(상위 스코프)을 참조합니다.
  • ThisBinding
    • this 식별자가 바라봐야 할 대상 객체입니다.
    • 실행컨텍스트가 활성화 될 때 this가 지정되지 않은 경우 전역 객체가 저장됩니다.

호이스팅과 스코프 체이닝을 이해하기 위해 렉시컬 환경의 환경레코드와 외부환경 참조의 동작에 초점을 두고 살펴보겠습니다.

호이스팅

선언 라인 전에도 에러가 나지않고 변수를 참조할 수 있는 현상 말합니다.

이것이 가능한 이유는 자바스크립트 엔진이 코드를 스캔하면서 환경 레코드에 변수의 정보를 미리 기록해놓기 때문입니다.

  *위에서 작성한 실행컨텍스트 ‘생성 과정’을 참고하면 생성단계에서 선언이 이루어지고, 실행단계에서 초기화, 재할당이 이루어집니다.

변수 호이스팅

var 키워드로 선언

// 생성 단계에서 TVChannel이 선언되고 undefined로 초기화

// 초기화된 값 undefind 출력
console.log(TVChannel); // undefined

// TVChannel에 "Netflix" 재할당
var TVChannel = "Netflix";

// TVChannel에 재할당된 "Netflix" 출력
console.log(TVChannel); // Netflix

 

let or const 키워드로 선언

// 생성 단계에서 TVChannel이 선언됨

// let, const는 생성단계에서 선언만 하기 때문에 호출 시 참조할 수 있는 값이 없음
console.log(TVChannel); // Reference Error

const TVChannel = "Netflix";

console.log(TVChannel);

• 일시적 사각지대: let이나 const로 선언하는 경우, 선언 라인 이전 코드에서 식별자를 참조할 수 없습니다.

함수 호이스팅

함수 표현식 - var

// 생성 단계에서 study가 선언되고 undefined로 초기화

study(); // 환경레코드에 기록된 undefined는 함수가 아니므로 Type Error

var study = () => {
	// do study
}

 

함수 표현식 - const

// 생성 단계에서 study 선언

study(); // study에 대해 환경레코드에 기록된 것이 없으므로 참조할 수 없어 Reference Error

const study = () => {
	// do study
}

 

함수 선언문

// 생성단계에서 study 함수가 기록됨

study(); // 환경레코드에 완전한 함수가 기록되어 있으므로 정상적으로 실행됨 

function study() {
	// do study
}

 

스코프 체이닝

자바스크립트 엔진은 Outer Environment Reference를 활용하여 식별자 결정을 합니다.

  *식별자 결정: 코드에서 변수나 함수의 값을 결정하는것

식별자를 찾아가는 과정을 ‘스코프체이닝’이라 합니다

  *스코프체인: 식별자를 결정할 때 활용하는 스코프들의 연결리스트

let lamp = false;

function goTo2F() {
	let lamp = true;
	function goTo3F() {
		let pet = 'puppy';
		console.log(pet); // puppy
		// 'goTo3F'의 환경 레코드에는 lamp가 없으므로 스코프 체이닝을 진행합니다.
		// 따라서 Outer Environment Reference로 연결 되어있는 'goTo2F'에서 식별자를 탐색합니다.
		// 탐색에 성공하여 값을 출력하며, 스코프체이닝은 끝납니다.
		console.log(lamp); // true
	}
	goTo3F();
}

 

 

 

 

 

 

 

 

 

 

[참고자료]

[10분 테코톡] 💙 하루의 실행 컨텍스트