javaScript. (18) 실행 컨텍스트

실행 컨텍스트 (Execution Context)

 

실행 컨텍스트(Execution Context)는 
scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리이다.

 

---

 

var name = 'zero'; // 전역변수
function wow(word) { // word는 parameter
  console.log(word + ' ' + name); // 
}
function say () { // 
  var name = 'nero'; // 지역변수 name 선언
  console.log(name); // 'nero'
  wow('hello'); // console.log('hello zero')
}
say(); //  nero, hello zero

 

- Lexical Scoping(정적 스코핑)에 의해 스코프는 '호출'할 때가 아니라 '선언'할 때 생김.

- 함수를 선언하는 순간, 함수 내부의 변수는자기 스코프 상위범위에서 참조하게 된다. = 가까운 곳

 

 

 

 

** 지난 포스팅 참조.

javaScript. 함수 스코프(scope)

 

 

처음 코드를 실행하는 순간 모든것을 포함하는 전역 컨텍스트가 생김. (모든 것을 관리하는 환경)

>> 페이지가 종료될 때 까지 유지됨.

 

함수를 호출할 때마다 함수 컨텍스트가 하나씩 더 생김.

>> 함수가 종료될 때 까지 유지됨.

 

 

<컨텍스트의 원칙>

• 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생김.
• 컨텍스트 생성 시 컨텍스트 안에 변수객체(argument, variable) , 스코프체인, this가 생성됨.
• 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾음.
• >>> 만약 변수 객체 안에 없다면, 스코프 체인을 따라 올라가며 찾음. 
• 함수 실행이 끝나면 해당 컨텍스트는 사라짐. (단, 클로저는 제외) / 페이지가 종료되면 전역 컨텍스트가 사라짐.

 

 

___

 

 

전역 컨텍스트가 생성된 후 변수객체, 스코프체인, this가 들어온다.

 

❕ 전역 컨텍스트는

argument(함수의 인자)가 없고,

variable은 해당 스코프의 변수들이다. 

스코프 체인(자신+상위 스코프들의 변수객체)는 자기자신인 전역 변수객체이다. 

this 는 따로 설정되어 있지 않으면 window이다. (일반 함수의 this가 window임)

-> this를 바꾸려면 new나 bind 해야함.

 

 

위 예제 🔻

var name = 'zero'; // 전역변수
function wow(word) { // word는 parameter
  console.log(word + ' ' + name); // 
}
function say () { // 
  var name = 'nero'; // 지역변수 name 선언
  console.log(name); // 'nero'
  wow('hello'); // console.log('hello zero')
}
say(); //  nero, hello zero

'전역 컨텍스트': {
  변수객체: {
    arguments: null,        // 전역 컨텍스트는 argument가 없음
    variable: ['name', 'wow', 'say'],    // (전역) 변수객체  = 스코프체인
  },
  scopeChain: ['전역 변수객체'],          
  this: window,                   // this는 window임
}

객체 형식으로 표현해보면 위와 같다.

wow와 say는 호이스팅 때문에 선언과 동시에 대입이 된다.

>> variable의 name에 zero가 대입됨.

 

 

 

wow와 say는 함수이고, name은 전역변수인 'zero'가 대입되므로

variable: [{ name: 'zero' }, { wow: Function }, { say: Function }]

가 된다.

 

 

그 후. 예제의 마지막 줄에서 say()를 하는 순간 새로운 say 함수 컨텍스트가 생긴다.

** 함수가 호출될때 함수 컨텍스트가 생성되므로

> 단, 이때 전역 컨텍스트는 사라지지 않고 그대로 있다.

 

 

❕ say함수 컨텍스트는

argument는 없고,

variable은 name이 있다.

scope chain은 say 변수객체 + 상위의 전역 변수객체(전역 컨텍스트의 varaible인 zero, wow, say)

this는 window 이다.

 

마찬가지로 객체로 나타내보면 다음과 같다.

'say 컨텍스트': {
  변수객체: {
    arguments: null,
    variable: ['name'], // 초기화 후 [{ name: 'nero' }]가 됨
  },
  scopeChain: ['say 변수객체', '전역 변수객체'],
  this: window,
}

 

say를 호출한 후  variable의 name에 nero를 대입해준 후

console.log(name)을 실행한다.

name변수는 say컨텍스트 내에서 찾으면 되는데, name이 nero라고 되어있으므로

'nero'가 콘솔에 찍히게 된다. 

 

그 다음엔 wow('hello')가 있는데, say 컨텍스트 내에서 wow변수를 찾을 수 없으므로

스코프체인을 따라 올라가 상위 변수객체인 전역 변수객체에서 wow를 찾아 호출한다.

 

wow함수를 호출했으므로 wow 컨텍스트도 생기게 된다.

 

❕ wow함수 컨텍스트는

argument는 word = 'hello'이고,     (여기서, word는 매개변수 / 'hello'는 argument이다.)

variable은 없다. (null) 

scope chain은 wow 스코프 + 전역 스코프. 

this는 window 이다.

 

argument는 객체를 아이템으로 가지는 배열 형태로 나타난다.
arguments : [ { 파라미터 : 인자 }, { 파라미터 : 인자 }, ... ] 와 같이 표현.

 

❗❗ 주의> wow함수의 스코프체인은 선언시 이미 정해져있음. ( 스코프는 선언시 할당 / 컨텍스트는 호출시 할당 )

say 스코프는 wow 스코프체인이 아님!

객체로 나타내보면 다음과 같다.

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

 

 

 

 

위 예제 🔻

var name = 'zero'; // 전역변수
function wow(word) { // word는 parameter
  console.log(word + ' ' + name); // 
}
function say () { // 
  var name = 'nero'; // 지역변수 name 선언
  console.log(name); // 'nero'
  wow('hello'); // console.log('hello zero')
}
say(); //  nero, hello zero

위 예제에서 마지막줄에서 say()함수를 실행하는데 say()의 마지막줄에 wow('hello')를 실행중인 것이므로

아직 say함수가 종료된 것은 아님 (=say 컨텍스트는 아직 살아있음)

 

wow컨텍스트가 생긴 후 함수가 실행되고,

console.log(word + ' ' + name); 에 의해

word와 name 변수를 wow컨텍스트에서 찾게 된다.

word는 wow컨텍스트의 argument에서 찾을 수 있고,

name은 wow컨텍스트에 없으니, 스코프체인을 따라 전역스코프에서 찾을 수 있다. (전역 변수객체에 name='zero')

 

==> RESULT : 'hello zero'

 

이제 wow함수 종료 후 wow 컨텍스트가 사라지고, say함수도 실행이 끝나서 say 컨텍스트도 사라지게 됨.

페이지가 종료되면서 전역 컨텍스트도 사라짐.

 

 

 

 

📒 추후 포스팅에서 호이스팅(hoisting)과 클로저(closure)에 대해 작성할 것임.

 

https://mywebproject.tistory.com/239?category=875333 

javaScript. 호이스팅(Hoisting)

https://mywebproject.tistory.com/240?category=875333 

javaScript. 클로저(Closure)

 

 

---

REFERENCE

https://www.zerocho.com/category/JavaScript/post/5741d96d094da4986bc950a0

(JavaScript) 실행 컨텍스트 - 클로저와 호이스팅

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!