[JS] 실행컨텍스트

실행 컨텍스트란?

실행할 코드에 제공할 환경정보들을 모아놓은 객체이다. 콜스택에 데이터를 쌓아올리며,
LIFO 방식으로 처리된다. 이로인해 코드의 환경 및 순서를 보장할 수 있다.

1. 호이스팅
2. 외부 환경정보 구성
3. this 설정

예시코드

var a = 1;
function outer() {
	function inner() {
		console.log(a); //undefined
		var a = 3;
	}
	inner();
	console.log(a);// 1출력
}
outer();
console.log(a); // 1출력

전역변수가 최초로 콜스택에 쌓이고, 그다음 outer() 함수가 쌓인다.
다음으로 inner()가 호출되며 쌓이며 console.log(a)를 호출했을 때에는 a가 전역을 참조하는 것이 아닌 outer() 함수에서 찾게되는데 없기 때문에 undefined를 출력하게 된다.

그다음 var a = 3; 이 쌓이지만 함수가 끝이나고 그다음 참조되어 사용될 일이 없기 때문에 콜스택에서 제거되게 된다.

다음으로 나오는 console.log(a)는 전역변수를 참조하여 1을 출력하고 outer() 함수의 역할이 끝이 나면서 콜스택을 나오게 된다.
마지막 줄인 console.log(a) 또한 전역변수를 참조하여 1을 출력 하게된다.

정리하자면,
코드실행 → 전역(in) → 전역(중단) + outer(in) → outer(중단) + inner(in) → inner(out) + outer(재개) → outer(out) + 전역(재개) → 전역(out) → 코드종료
이 순서대로 진행된다는 뜻이다.

호이스팅

호이스팅이란, 끌어올리기라는 뜻으로 변수, 함수 선언 순서에 상관 없이 끌어 올려진 현상을 말한다. JS엔진에서 실행 컨텍스트에 기록을 위하여 전체 코드를 한 번 스캔하는데 이로인해 발생한다.

• 호이스팅 법칙 1
  매개변수 및 변수는 선언부를 호이스팅 한다.

<적용 전>

function a (x) {
	console.log(x);
	var x;
	console.log(x);
	var x = 2;
	console.log(x);
}
a(1);

<매개변수 적용>

function a () {
	var x=1;
  	console.log(x);
	var x;
	console.log(x);
  	var x = 2;
	console.log(x);
}
a(1);

<호이스팅 적용>

function a () {
	var x;
  	var x;
  	var x;
  
  	x=1;
  	console.log(x);
	console.log(x);
  	x = 2;
	console.log(x);
}
a(1);

• 호이스팅 법칙 2
  함수 선언은 전체를 호이스팅 한다.
  <적용 전>

function a () {
	console.log(b);
	var b = 'bbb';
	console.log(b);
	function b() { }
	console.log(b);
}
a();

<호이스팅 적용>

function a () {
  	var b;
    function b() { }
	console.log(b);
	b = 'bbb';
	console.log(b);
	console.log(b);
}
a();