[PoiemaWeb]실행 컨텍스트와 자바스크립트의 동작원리

hello__0·2022년 10월 28일
1

PoiemaWeb

목록 보기
5/5

실행 컨텍스트

실행 가능한 코드가 실행되기 위해 필요한 환경

실행가능한 코드란?

  • 전역코드 : 전역 영역에 존재하는 코드
  • Eval코드 : eval함수로 실행되는 코드
  • 함수 코드 : 함수 내에 존재하는 코드

자바스크립트 엔진은 코드를 실행하기 위해 실행에 필요한 여러가지 정보를 알고있어야 한다.

실행에 필요한 여러가지 정보란?

  • 변수 : 전역변수, 지역변수, 매개변수, 객체의 프로퍼티
  • 함수 선언
  • 변수의 유효범위
  • this

자바스크립트의 큐와 스택
https://youtu.be/Nk_dGScimz8


실행컨텍스트의 3가지 객체

실행 컨텍스트는 물리적으로 객체의 형태를 가지며, 3가지 프로퍼티를 갖고 있다.

  1. 변수 객체 (variable object)
  2. 스코프 체인 (scope chain)
  3. this value

변수 객체 (variable object)

실행 컨텍스트가 생성되면 자바스크립트 엔진은 실행에 필요한 여러 정보들을 담을 객체를 생성한다.

변수객체는 코드가 실행될 때 엔진에 의해 참조되며 코드에서는 접근할 수 없다.

변수 객체 (variable object)는 3가지의 정보를 담는다.
1. 변수
2. 매게변수(parameter)와 인수정보(argument)
3. 함수 선언(함수 표현식은 제외)

전역 컨텍스트

변수 객체(variable object)는 유일하며 최상위에 위치하고 모든 전역 변수, 전역 함수 등을 포함하는 전역 객체(Global Object / GO)를 가리킨다. 전역 객체는 전역에 선언된 전역 변수와 전역 함수를 프로퍼티로 소유한다.

함수 컨텍스트

변수 객체(variable object)는 Activation Object(AO / 활성 객체)를 가리키며 매개변수와 인수들의 정보를 배열의 형태로 담고 있는 객체인 arguments object가 추가된다.

스코프 체인(Scope Chain)

해당 전역 또는 함수가 참조할 수 있는 변수, 함수 선언 등의 정보를 담고 있는 전역 객체(GO) 또는 활성 객체(AO)의 리스트를 가리킨다.

const v = "전역 변수";

function a() {
//function a Execution Context(EC)
	const v = "지역 변수";
    
    function b() {
    	//function b Execution Context
    	console.log(v);
    }
    
    b();
}

//Global Execution Context
a();

위 코드의 예제를 보면 먼저 글로벌 실행 컨텍스트(GEC)가 실행되고 스택에 쌓이는 방식이다.

그런 다음 함수 호출 순으로 실행 컨텍스트 스택에 쌓이게 되고, 가장 나중에 호출된 b() 함수가 실행 컨텍스트 안에서부터 탐색을 시작한다.

b() 함수 안에서 변수 v를 탐색하기 시작하는데, 만약 변수 v가 없으면 b() 함수를 감싸고 있는 외부 함수 a() 함수를 탐색하기 시작한다.

이때 a() 함수 안에 변수 v가 존재하면 안에 있는 v를 참조하게 되고, 만약 없다면 마지막으로 전역 객체를 탐색하여 v를 찾아낸다.

결국 찾지 못한다면, v가 없다고 VM500:1 Uncaught ReferenceError: v is not defined라는 에러를 보게 될 것이다.

반대로 찾았다면, 결과값은 a() 안에 변수 v가 존재하기 때문에 지역 변수라는 값이 출력이 된다.

하지만 만약, a() 함수 안에 변수 v를 제거한다면 전역 객체에 있는 변수 v의 값 전연 변수가 출력이 될 것이다.

이러한 과정들이 스코프에 담긴 순서대로 탐색하는 즉, 스코프 체인이라고 보면 된다.

출처 : https://ljtaek2.tistory.com/140

this value

this 프로퍼티에는 this 값이 할당된다.
this에 할당되는 값은 함수 호출 패턴에 의해 결정된다.


호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다.
반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다.
호이스팅을 설명할 땐 주로 "변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는" 것으로 말하곤 합니다.

참고 : https://youtu.be/SBTyD_fLZnE

profile
자라나라 나무나무

0개의 댓글