12. 실행컨텍스트

12-1. 실행 컨텍스트란?

12-1-1. 정의와 개념

12-1-2. 실행 컨텍스트의 필요성

12-1-3. 렉시컬 스코핑(lexical scoping)

var name = 'Kim';
function log() {
  console.log(name);
}

function wrapper() {
  name = 'Park';
  log();
}
wrapper(); // park

var name = 'Kim';
function log() {
  console.log(name);
}

function wrapper() {
  var name = 'Park';
  log();
}
wrapper(); // kim

12-1-4. 실행 컨텍스트의 원칙

1. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다.

2. 컨텍스트 생성 시 컨텍스트 안에 변수 객체(arguments, variable), scope chain, this가 생성된다.

3. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프 체인을 따라 올라가며 찾는다.

4. 함수 실행이 마무리되면 해당 컨텍스트는 사라진다.(클로저 제외)페이지가 종료되면 전역 컨텍스트가 사라진다.

12-2. 콜 스택(Call Stack)

12-2-1. 스택 구조 파악하기

• 초기 단계: 전역 코드가 로드될 때 전역 실행 컨텍스트가 생성되고, 이것이 처음으로 스택에 푸시(push)된다.

• 중간 단계: 함수 호출 시 해당 함수의 실행 컨텍스트가 생성되며, 이것이 현재 진행 중인 상위 작업을 일시 중단하고 새롭게 생성된 실행 컨텍스트를 처리하기 위해 매번 스택의 최상단으로 올라간다.

• 마지막 단계: 함수 내부에서 모든 코드의 처리가 완료되면 해당 함수의 실행 컨텍스트가 가 종료되며(pop), 그 아래 있는(즉, 호출한 곳에 해당하는) 실행 컨텍스트로 돌아간다.

function c(){
  console.log('C');
}
function b(){
  console.log('B');
  c();
}
function a(){
  console.log('A');
  b();
}
a(); // output: A,B,C

12-2-2. 스택의 이해를 위한 재귀함수 예시

function recursiveFunc() {
  console.log("재귀함수 실행");
  recursiveFunnc();
}

recursiveFunnc();

12-3. 실행 컨텍스트의 세부 사항 이해

• Global execution context = Global Object(GO라고 부른다.)
• this object
• window object

• Function execution context = Activation Object(AO라고 부른다.)

• Eval execution context = 보안상 위험하므로 쓸 일이 없다.

12-3-1. 실행 컨텍스트의 생성시점

• Global Execution Context: JavaScript 엔진이 스크립트를 처음 마주할 때 전역 컨텍스트(Global Context)를 생성하고 콜 스택(실행 컨텍스트 스택) 에 push한다.

• Function Execution Context: 엔진이 스크립트를 읽으면서 함수 호출을 발견할 때마다, 함수의 실행 컨텍스트를 스택에 push한다.
• 함수 실행 컨텍스트는 함수가 실행될 때 만들어진다.

• Eval Execution Context : eval()함수를 실행하면 실행 컨텍스트가 생성된다.
• eval()은 사용할 일이 없기 때문에 3번은 무시해도 된다.
• 자바스크립트 공식 문서 에서도 eval()을 절대 사용하지 말 것!"이라고 적혀 있을 정도로 보안상 위험하다고 함.

12-3-2. 실행 컨텍스트의 단계

• GO, AO, this 형성된다.

• ScopeChain형성이 된다. 이 때문에 호이스팅이 가능한 것이다.
• GO,AO가 형성될 때 먼저 코드를 훑으면서 서로서로 ScopeChain링크를 걸어서 참조가 가능.

• 값이 들어가 있지 않는 초깃값(var은 선언과 초기화 , let/const는 선언만)

• GO, AO, this에 값이 할당된다.

• this는 함수 호출 패턴 또는 lexical scope에 따라 값이 정해진다.

12-4. 실행 컨테스트 속의 정보

12-4-1. VariableEnvironment

12-4-2. LexicalEnvironment

console.log(name); // output: undefined(호이스팅 현상)

var name = 'Kim';

12-4-3. ThisBinding

1. 기본 바인딩

// Browser환경에서의 실행
function showThis(){
	console.log(this);
}

function showThisInStrictMode(){
	'use strict'
	console.log(this);
}
showThis(); // output : window
showThisInStrictMode(); // output : undefined

• Browser 환경에서의 경우, 함수를 위 코드와 같이 단독 실행하게 되면 this는 기본적으로 전역객체에 바인딩된다. 유의할 점은 ‘use strict’키워드를 통해서 엄격모드를 사용하게 되면 전역객체가 기본 바인딩 대상에서 제외가 되어 this가 바인딩될 객체가 존재 하지 않기 때문에 ‘undefined’값을 가진다.

// Node환경에서의 실행
function showThis(){
	console.log(this);
}
showThis(); // output : object [global]
console.log(this); // {}
console.log(this === module.exports); // true

• Node 환경에서의 경우, 마찬가지로 this가 node의 전역객체인 global객체에 바인딩이 되는데, 함수코드 안에서가 아닌 전역 코드상에서 this를 콘솔에 출력해 보면 빈 객체가 나오게 된다. 이 빈 객체는 사실 모듈 객체에 있는 exports 객체와 동일한 객체이다. 이를 통해서 노드JS 환경에서 this는 두 가지 방향으로 바인딩이 된다고 알 수가 있다.

2. 암시적 바인딩
자바스크립트 함수는 단독으로 호출될 수 있을 뿐만 아니라 객체의 메서드로도 호출이 된다.



이 경우에는 this가 .(마침표 연산자) 바로 앞에 있는 객체에 바인딩 된다. 그리고 이렇게 바인딩 되는 방식을 암시적 바인딩이라고 부른다. 암시적 바인딩이 되는 경우에 함수를 사용할 때는 조심해야 할 부분이 있다.

const obj = {
	name : "Kim",
	getName() {
		return this.name;
	},
};

function showReturnValue(callback) {
	console.log(callback());
}

showReturnValue(obj.getName);  // output : undefined

이 코드는 obj라는 변수 안에 객체로 두 개의 프로퍼티가 있고, showReturnValue라는 함수가 callback이란 값을 인자로 받고 callback에 대한 반환 값을 콘솔에 출력을 해준다. 그리고 showReturnValue에다가 obj.getName를 인수로 넘겨 함수 호출을 하는 코드이다. 앞서 암시적 바인딩의 설명에 의하면 getName함수 마침표 연산자 앞에 있는 객체가 obj이기 때문에, 그 안에서의 this가 obj에 바인딩 되어 콘솔에 “Kim”이 출력이 되어야 한다고 생각이 될 수 있다. 하지만 실행결과는 undefined이다. 이러한 결과물에 이유는 점 연산자나 대괄호 연산을 통해서 객체의 프로퍼티에 우리가 접근을 하면 참조 타입(Reference Type)이라고 하는 특별한 값을 반환 해 준다. 참조 타입은 자바스크립트 명세서에서만 사용되는 타입인데, 프로퍼티 뿐만 아니라 프로퍼티를 가지고 있는 객체와 ‘strict mode’에 대한 여부를 같이 가지고 있는 하나의 타입이다.



예를 들어서 ‘strict mode’에서 obj.getName에 접근하게 되면 위 그림의 순서대로 obj, getName, true 와 같은 참조 타입을 얻게 된다. 이러한 참조 타입에 바로 괄호를 붙여서 함수를 호출하게 되면 함수 안에 있는 this가 참조 타입에 있는 객체를 찾아서 바인딩 된다. 하지만 점 연산자나 대괄호 연산을 제외한 다른 연산들은 참조 타입이 아닌 해당 프로퍼티의 값만 전달하게 된다. 따라서 아무리 점 연산자를 통해 참조 타입을 얻어냈다고 하더라도 다른 변수에 할당을 하는 순간 프로퍼티의 값 혹은 프로퍼티가 참조하고 있는 참조 값만 남게 되는 것이다. 그래서 점 연산자를 통해서 얻은 값은 바로 함수로 호출하지 않고서는 암시적 바인딩을 기대할 수가 없다. 마찬가지로 아까 코드에서 인수로 전달된 callback의 참조도 객체에 대한 어떠한 정보도 포함을 하지 않기 때문에 함수로 단독 호출한 것과 같이 동작을 하게 되는 것이다.

3. 명시적 바인딩
암시적 바인딩의 설명처럼 다른 변수에 할당하는 순간 바인딩 된 this를 너무 쉽게 잃어버리는 문제가 있는데 이를 해결할 수 있는 방법이 명시적 바인딩이다. 이를 통해 this가 소실되는 문제를 해결할 수 있다. 함수 객체는 call, apply, bind 등의 메서드를 통해서 명시적으로 this를 바인딩 할 수 있는 방법을 제공한다. call과 apply는 하는 역할은 인수를 전달하는 방식 말고는 거의 유사하다.

call(context,arg1,arg2,...)
apply(context,args)
func.bind(context,arg1,arg2,...)
// context <=> this를 바인딩할 객체

call: 인수를 하나하나 전달 하는 방식 apply: 인수들을 배열 형태나 유사 배열 형태로 전달 하는 방식 bind: this가 참조하는 객체를 고정해 주고, 이후에는 인수로 사용될 값들을 넣어준다. 이 메서드가 반환하는 특수한 객체가 있는데 그 객체는 마치 항상 this가 어떤 특성 객체에 바인딩 되어 있는 함수처럼 행동을 한다.
이렇게 항상 같은 객체에 바인딩 되도록 강제하는 방법을 하드 바인딩이라고 도 부른다.

4. new 바인딩
new 연산자로 함수를 호출하게 되면 생성자 함수로서의 역할을 수행할 수 있게 된다. 이를 순서대로 간략하게 설명하면,
1. 새로운 객체를 그 안에서 하나 만든다.
2. 함수의 코드를 실행한다.
3. 새로 생성한 객체를 반환해 준다.
이 과정에서 this는 새로 생성한 객체에 바인딩 된다.

{
	obj = {} // 새로운 객체생성
	this = obj // bind

	this.name = "Kim" // obj : {name : "Kim}

	return this
}

이러한 과정을 통해 프로퍼티가 정해진 객체를 반환하는 생성자의 역할을 수행할 수 있다. 이렇게 new 연산자로 함수를 호출할 때 this가 바인딩 되는 규칙을 new binding이라고 한다.

const obj = {
  value: 'Hello World',
  showValue: function() {
    setTimeout(() => {
      console.log(this.value);
    }, 1000);
  }
};

obj.showValue(); // "Hello World"

12-5. 실행 컨텍스트 예시

var name = 'Kim';
 
function second (){
  console.log('HI');
}

function first (){
  second();
}

first();

1. 자바스크립트 코드를 실행하는 순간 “1”처럼 전역 컨텍스트가 콜스택에 담긴다.

• 브라우저의 경우 window, node환경일 경우 global같은 객체를 사용할 수 있는 이유이다.

1. 전역 컨텍스트와 관련된 코드를 진행 중 a함수를 실행하였기에 a함수의 환경 정보들을 수집하여 a실행 컨텍스트를 생성, 콜스택에 담는다. 콜스택 최상단에 a 실행 컨텍스트가 있기에 기존의 전역 컨텍스트와 관련된 코드의 실행을 일시적으로 중단한 후 a 실행 컨텍스트의 코드를 실행한다.

2. a함수 내부에서 b함수를 실행하였기에 b함수의 환경 정보들을 수집, 실행 컨텍스트를 생성, 콜스택에 담는다. 이전과 똑같이 콜스택 최상단에 b실행 컨텍스트가 있기에 기존 a실행 컨텍스트와 관련된 코드의 실행을 일시적 중단한다.

3. b함수가 종료된 후 b실행 컨텍스트가 콜스택에서 제거된다. 제거 후 콜스택 최상단에는 a실행 컨텍스트가 있기에 이전에 중단된 지점부터 코드 진행이 재개된다.

4. a함수 또한 종료된 후 실행 컨텍스트가 콜스택에서 제거됩니다.