[Javascript]실행 컨텍스트(execution context)

1. 실행 컨텍스트(execution context)란?

자바스크립트 코드가 실행되는 환경을 의미한다. 즉 실행 컨텍스트는 자바스크립트가 실행할 환경 정보를 모아놓은 객체이다. 자바스크립트가 실행되는데 필요한 this, 변수 객체, 스코프 체인을 function단위로 묶어서 실행 컨텍스트라고 한다.

실행컨텍스트는 전역에서 시작하여 함수가 호출될 때 스택에 쌓이게 된다. 풀어서 설명하면, 자바스크립트 엔진이 코드를 읽고 실행을 했을 때 전역 실행컨텍스트를 먼저 만든다. 내부에서 함수가 호출되면 함수의 실행 컨텍스트가 순서대로 생성되어 콜스텍에 쌓인다. 콜스택은 실행 컨텍스트의 스택이라고 할 수 있다.

2. 실행 컨텍스트의 종류

• 전역 실행 컨텍스트(Global Execution Context (GEC))
  브라우저에 파일이 처음 로드될 때 코드 실행을 시작하는 기본 실행 컨텍스트이다. 자바스크립트 엔진이 single thread이기 때문에 자바스크립트 코드를 실행할 수 있는 글로벌 환경은 단 한개만 존재한다. 브라우저의 경우 window객체가 전역 실행 컨텍스트가 된다.
  
• 함수 실행 컨텍스트(Functional Execution Context (FEC))
  함수 호출을 할 때마다 생성되는 컨텍스트이다.
• eval()실행 컨텍스트
  문자로 표현된 JavaScript 코드를 실행하는 함수로 Eval함수를 호출할 때 생성되는 실행 컨텍스트이다. 하지만 위험성이 있어 잘 사용하지 않는다.

3. 어떤 자바스크립트 코드도 없이 실행을 하는 경우

자바스크립트는 어떤 코드가 없어도 다음 세가지 변수를 초기화한다.

• this: window
  코드가 실행되는 시점에 환경이 가르키는 객체를 의미한다.
  window객체는 브라우저에서 글로벌 최상위 스코프에 존재하는 객체
• 변수들(Variable Object): {}
  어떤 변수도 선언되지 않았기 때문에 빈 객체
• Scope Chain: []
  최상위단의 스코프이고 연결된 스코프가 없기 때문에 빈 객체

4. 코드 실행 예시

아래 코드를 예시로 자바스크립트 함수가 실행되는 과정을 살펴보자.

let o = {
    name: 'Daniel',
    method: function(name) {
        return.this.name.repeat(number)
    }
}

function myFunc() {
    let n = 10
    return o.method(n)
}

myFuc()

this: window

아무 코드가 없는 것과 마찬가지로 글로벌 실행 컨텍스트(execution context)가 만들어지고,
그때 this는 window를 가리킨다.

변수들(Variable Object):{
o:{...},
 myFunc:function(){...} 
}

variable Object에는 객체 o와 myfunc가 존재하게 된다.

Scope chain:[]

Scope chain은 글로벌context라서 아무것도 없다.

실행 컨텍스트 예시

myFunc의 함수 실행 컨텍스트

• this: undefined
• 변수들(Variable Object):{
  n: 10
  }
• Scope chain:[global]

o.method()를 호출할 때 실행 컨텍스트

• this: o
  //객체의 메서드의 경우 메서드 환경의 this는 해당 객체를 가리키게된다.
• 변수들(Variable Object):{
  number: 10
  }
• Scope chain:[myfunc, global]

Comment

헷갈렸던 개념인 this에 대해 감이 잡히고 있다.