실행 컨텍스트란?

실행 컨텍스트

실행 컨텍스트는 상당히 중요함

 

lexical scoping과 이것만 이해하면 자바스크립트를 이해하는데 필수적인 개념인 호이스팅, 클로저를 모두 분석할 수 있습니다.

 

컨텍스트는 한국말로 문맥인데 쉽게 코드의 실행 환경이라고 이해하면 된다

var name = 'zero'; // (1)변수 선언 (6)변수 대입
function wow(word) { // (2)변수 선언 (3)변수 대입
  console.log(word + ' ' + name); // (11)
}
function say () { // (4)변수 선언 (5)변수 대입
  var name = 'nero'; // (8)
  console.log(name); // (9)
  wow('hello'); // (10)
}
say(); // (7)

코드를 처음 실행하는 순간(여기서 실행은 브라우저가 스크립트를 로딩해서 실행하는 것을 말함) 모든 것을 포함하는 전역 컨텍스트가 생긴다. 전역 컨텍스트 말고도 함수 호출시마다 함수 컨텍스트도 생긴다.

 

순서

 

전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다 ⇒ 컨텍스트 생성 시 컨텍스트 안에 변수객체, scope chain, this가 생성된다 ⇒ 컨텍스트 생성 후 함수가 실행되는데 사용되는 변수들을 변수객체에서 찾고 없다면 스코프 체인을 타고 감 ⇒ 함수 실행이 마무리 되면 해당 컨텍스트는 사라지게 되고(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라짐

 

전역 컨텍스트가 생성 되면 두번째 규칙에 따라 변수객체, 스코프체인 , this가 오게 됩니다. 전역컨텍스트는 arguments가 없고 variable은 해당 스코프안에 있는 변수들로 이루어져있습니다.

 

위 예시코드에서 초기 전역 컨텍스트

'전역 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name', 'wow', 'say'], //함수는 호이스팅으로 선언과 동시에 대입
  },
  scopeChain: ['전역 변수객체'],
  this: window,
}

//이후 variable이 생성
variable: [{ name: 'zero' }, { wow: Function }, { say: Function }]

이후 say() 코드를 만나 새로운 컨텍스트인 say 함수 컨텍스트가 생긴다 ⇒ 전역 컨텍스트는 그대로 있으면서 say함수에 arguments와 variable을 세팅한다. scope chain은 say 변수 객체와 전역 변수객체이며 variable은 name 뿐이고 this는 window가 호출하기 때문에 window가 됨

'say 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name'], // 이후 코드를 읽다가 변수를 만나면 변수를 초기화 -> name:nero
  },
  scopeChain: ['say variable', '전역 variable'],
  this: window,
}

 

 

console.log에 name이 찍혀야하는데 이때 name은 say변수객체에 name을 찍고 wow(”hello”) 에서 자신의 컨텍스트에 wow 를 찾을 수 없기 때문에 스코프체인을 통해 전역으로 올라감 ⇒ 전역 변수객체의 variable에 wow라는 함수를 찾아 호출(함수의 선언 위치와 호출 위치를 구분해야 함)

'wow 컨텍스트': {
  변수객체: {
    arguments: [{ word : 'hello' }],
    variable: null,
  },
  scopeChain: ['wow 변수객체', '전역 변수객체'],
  this: window,
}

이후 wow() 가 실행되면서 컨텍스트를 하나 만들고 변수객체(argument : word : “hello” variable : 없음)가 세팅된 뒤 scope chain은 전역 스코프와 wow 스코프가 된다. 이후 console.log(word + ' ' + name); 가 실행되는데 word 는 arguments에 있고 name은 없으니 스코프 체인을 통해 전역 스코프를 뒤져 “zero” 를 찾아 실행한다 따라서 hello zero가 된다.

 

이후 실행이 종료되면 컨텍스트가 사라지고 say함수의 실행도 마무리 되면서 say함수의 컨텍스트도 없어지고 마지막에 전역 컨텍스트도 마무리 되면서 사라짐으로써 끝이난다

실행 컨텍스트는 클로저를 이해할 수 있게 해준다

비공개 변수라는 것을 통해 가능한데 java, c++로 이해한다면 캡슐화와 같다

var counter = function() {
  var count = 0;
  function changeCount(number) {
    count += number;
  }
  return {
    increase: function() {
      changeCount(1);
    },
    decrease: function() {
      changeCount(-1);
    },
    show: function() {
      alert(count);
    }
  }
};
var counterClosure = counter();
counterClosure.increase();
counterClosure.show(); // 1
counterClosure.decrease();
counterClosure.show(); // 0

스코프가 만들어진 뒤 전역컨텍스트와 counter()가 실행되면서 counter 컨택스트가 만들어지고난 다음으로 counterClosure가 실행되면서 스코프 체인이 만들어진다.

 

counterClosure ⇒ counter ⇒ 전역 스코프 순인데 이때 리턴된 show(), increase(), decrease()를 통해 스코프체인으로 count변수와 changecount 함수에 접근할 수 있지만 직접적인 변경은 불가능하고 리턴된 함수로만 접근이 가능하다

 

이것이 클로저고 c++ 캡슐화와 상당히 유사한 개념이라고 생각된다 public private과 setter&getter처럼 따로 처리함수를 만들어줘 변수에 직접적인 접근을 막는다