실행컨텍스트란?

자바스크립트 코드는 실행컨텍스트를 시작으로 이루어진다. 실행컨텍스트는 자바스크립트 코드가 실행될 수 있도록 환경을 구축해준다. 실행컨텍스트는 대부분 블록 단위(함수)로 생성되어지고 생성되어진 실행컨텍스트들은 콜스택에 차례대로 쌓여 순차적으로 실행되어진다. 실행컨텍스트를 이해해야 스코프체이닝, 클로저, 호이스팅이 무엇인지 알게된다.

실행컨텍스트가 생성되는 종류

실행컨텍스트는 전역코드, 함수안의 실행코드, eval 함수가 실행되는 기준으로 생성된다.대부분 함수를 실행하여 실행컨텍스트를 생성한다고 봐도 무방하다.

실행컨텍스트 생성 예제

console.log('global');

function func1(){

console.log('function 1');

}

function func2(){

console.log('function 2');
func1();

}

func2();

최상위 블록인 전역객체가 실행되면 전역 실행컨텍스트가 생성된다. 전역 실행컨텍스트가 생성되고 난 후 func2 함수가 호출되어지고 호출되어진 func2 의 실행컨텍스트가 생성되어진다.

실행컨텍스트 생성 과정

블락(함수)단위로 실행컨텍스트가 생성되면 필요한 정보들을 담을 객체 안에 지역 변수, 매개변수, 스코프 정보, This 바인딩 이 결정되어 담겨진다.블록마다 생성된 실행컨텍스트들은 상위 실행컨텍스트를 기준으로 스코프 체이닝이 이루어진다.

지역변수

실행컨텍스트 안의 블록안에 있는 지역 변수들은 실행컨텍스트가 생성이 되어지고나서 메모리에 저장되어지고 초기화가 이루어진다.

매개변수

함수블록이 호출되어져 실행컨텍스트가 생성될때 매개변수값들이 있으면 매개 변수객체 (arguments) 가 생성되고 해당 실행컨텍스트에 저장된다.

스코프 정보 생성

실행 컨텍스트가 생성되어지고 [[scope]] 스코프 프로퍼티에 등록 된다. 함수들이 실행되어질때 실행컨텍스트가 생성되어진다고 했는데 새로 생긴 실행컨텍스트가 공유되어지면 각 실행컨텍스트의 [[scope]] 프로퍼티가 복사되어 맨위에 중첩되어진다. 상위 실행 컨텍스트에도 접근 가능하다. 해당 함수에 사용되어지는 정보가 없을경우 상위 실행컨텍스트에 접근하여 해당 정보가 있는지 탐색한다. 이것이 스코프 체이닝이다.

스코프체인 예시

	var a= 10;
	var b =20;

	function testScope(){

		var a = 30;
        var b = 40;

		console.log(a,b)
	}
    
    console.log(a,b)
    
    testScope();

This 바인딩

This를 사용한 것이 어떤 객체를 참고하는지 정해진다. 만약 this 가 참고하는 객체가 없을 경우에는 전역객체를 참조한다.

실행컨텍스트 코드 실행

실행컨텍스트 생성과정 (필요한 정보들이 객체에 담기는 과정) 이 끝난 후 콜스택에 담겨 담겨있는 정보들을 기준으로 코드가 실행되어진다. 실행컨텍스트가 실행되면서 메모리에 저장되어지고 undefined 로 초기와 되어진 변수들은 코드가 실행되어질때 제 값으로 할당되어지고 상위 실행컨텍스트의 스코프 체이닝과 this 값들이 담긴 정보들이 사용 되어진다.