Execute Context(실행컨텍스트)
- 컨텍스트란 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
브라우저가 Javascript를 로딩해서 실행할 때, 모든 것을 포함하는 전역 컨텍스트가 생성되고 그 뒤 함수 컨텍스트가 생성된다. 중요한 것은 함수 컨텍스트는 함수를 정의할 때가 아니고, 실행될 때 생성되는 것이다. 각각의 함수를 실행할 때마다 각각의 함수 컨텍스트가 하나씩 생긴다.
컨텍스트의 구성 요소
컨텍스트의 구성요소로는 변수객체,SCOPECHAIN,this가 있다.
컨텍스트의 변수객체들은 자신이 속한 객체(함수)안에서 대입할 값을 찾고, 없으면 스코프 체인을 따라 상위 스코프체인을 찾는다.
함수컨텍스트라면, 실행이 마무리 될 때 해당 컨텍스트는 사라지고,(클로저 제외) 페이지가 종료되면서 전역 컨텍스트가 사라진다.
전역 컨텍스트의 구성
'전역 컨텍스트': {
변수객체: {
arguments:
variable:
},
scopeChain:
this: window,
} 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)javascript는 코드를 위에서부터 실행하는데, 이때 wow랑 say는 호이스팅 때문에 선언과 동시에 대입된다. 그 후 variable의 name에 'zero'가 대입된다.
variable: [{name: 'zero' },{ wow: Function },{ say: Function }]7번 say함수를 **호출하는 순간** say 함수 컨텍스트가 생성된다.
(1~6번까지는 함수를 정의하고 호출하지 않았음.)
say 함수 컨텍스트의 구성
'say 컨텍스트' : {
변수객체: {
arguments: null,
variable: ['name'], // 초기화 후 [{ name: 'nero' }]가 됨
},
scopeChain: ['say 변수객체', '전역 변수객체'],
this: window,
}say함수 안에서 wow함수가 호출되었으니 wow 함수 컨텍스트도 생성된다.
하지만 실행해야 할 wow 변수가 없기에 scope chain을 따라 올라가 상위 변수객체에서 찾는다.
그래서 상위 Scope chain인 전역 변수객체에서의 variable에 wow라는 함수를 호출한다
호이스팅
var변수 선언과 함수 선언식이 최상단으로 끌어올려지는 현상.(const,let은 아니다)
중요한 것은 초기화하거나 대입한 부분은 선언한 곳에 남아 있다는 것이다.
console.log(zero);
sayWow();
function sayWow() {
console.log('wow');
}
var zero = 'zero';실행될 때에는 아래와 같은 순서로 실행된다.
1.function sayWow() {
console.log('wow');
} // 함수 전체가 호이스팅 된다.
2. var zero; // 변수 선언은 상단으로 이동
3. console.log(zero);
4. sayWow();
5. zero = 'zero'; // 변수에 대입한 값은 그자리에 남아 있는다.실행 결과 var zero에 대입 된 값 zero는 호이스팅이 되지 않았기에 그 자리에 남아
console.log(zero);는 undefined가 된다.
하지만 함수 표현식으로 선언한 경우에는 에러가 발생한다.
sayWow(); // (3)
sayYeah(); // (5) 여기서 대입되기 전에 호출해서 에러
var sayYeah = function() { // (1) 선언 (6) 대입
console.log('yeah');
}
function sayWow() { // (2) 선언과 동시에 초기화(호이스팅)
console.log('wow'); // (4)
}실행될 때에는 아래와 같은 순서로 실행된다.
1. var sayYeah;
2. function sayWow() {
console.log('wow');
}
3. sayWow();
4. function sayWow 실행.
5. sayYeah(); <<< sayYeah는 현재 변수로 호이스팅 된 상태.
실행할 값이 없기에 에러 발생.
6. = function() {
console.log('yeah');
}함수 표현식으로, 변수를 먼저 선언한다면 그 변수만 호이스팅 되어 대입 된 값은 그자리에 남아 있게 된다.위 순서로 sayYeah는 대입되기 전에 실행되어 에러가 발생하는 것이다.
