Javascript의 함수가 실행될때 실행 가능한 코드(Executable Code)와 실행 콘텍스트(Execution Context)에 설정되는 것들과 주의할 점들

1. 스파르탄 스터디
CH.03. Execution context & Closure

2. 1. 개요
2. Execution Context
3. Lexical Environment
4. Variable Environment, This Binding
5. Declaration Binding Instantiation
6. Closure

3. Execution context
실행 가능 코드(Executable Code)
1. Global code
2. eval code
3. Function code
를 만났을 때, Execution context가 하나씩 생성
이 때, 세 가지 Components를 생성
1. LexicalEnvironment
2. VariableEnvironment
3. ThisBinding
=> Running execution context이 대상
1. 개요

4. running execution context
2. Execution Context
=> the top of the execution context stack

5. Execution Contexts
=> Executable Code(global, function, eval)의 개수만큼
Execution Context가 생성된다.
2. Execution Context

6. 함수가 실행될때,
ExecutionContext(3개의
Component로 구성) 생성
ExecutionContexts = {
LexicalEnvironment : {}
, VariableEnvironment : {}
, ThisBinding : {}
}
debugger;
var sayHello = 'Hello, ';
function person(){
var first = 'David',
last = 'Shariff';
function firstName(){
return first;
}
function lastName(){
return last;
}
console.log(sayhello + firstName() + ' ' + lastName());
}
person();
2. Execution Context

7. Lexical Environment
=> 자바스크립트 코드의 실행환경, 범위를 구조적으로 엮으면서 독립
적으로 실행하기 위한 환경
LexicalEnvironment = {
EnvironmentRecords : {} // 실행 중인 함수 안의 함수, 변수 저장
, outerEnvironmentRecords : {} // 가장 근접한 스코프
}
3. Lexical Environment
firstName()이 실행중이라면,
outerEnvironmentRecords는
person()의 EnvironmentRecords
가 된다

8. Environment Records
=> 함수와 변수를 기록하는 곳
EnvironmentRecords : {
DeclarativeEnvironmentRecord : {}
, ObjectEnvironmentRecord : {}
}
DeclarativeEnvironmentRecord : function, 변수, catch 문
ObjectEnvironmentRecord : binding object의 function, 변수, with 문
person()이 실행중이라면,
DeclarativeEnvironmentRecord
에는 first, last, firstName,
lastName이 binding
ObjectEnvironmentRecord 에는
sayHello이 binding
3. Lexical Environment

9. VariableEnvironment
=> LexicalEnvironment 와 같지만 다르다?
4. Variable Environment, This Binding
function, 변수 식별자(Identifier)이 binding 되
는 점은 같다.
LexicalEnvironment의 값은 실행 중에 변하지만,
VariableEnvironment는 변하지 않는다.
ThisBinding
2번째 시간에 배웠던 호출한 함수가 속한 오브
젝트를 참조한다는 기본원리와 동일

10. VariableEnvironment
=> LexicalEnvironment 와 같지만 다르다?
4. Variable Environment, This Binding
function, 변수 식별자(Identifier)이 binding 되
는 점은 같다.
LexicalEnvironment의 값은 실행 중에 변하지만,
VariableEnvironment는 변하지 않는다.
ThisBinding
2번째 시간에 배웠던 호출한 함수가 속한 오브
젝트를 참조한다는 기본원리와 동일

11. ExecutionContext 정리
ExecutionContext = {
LexicalEnvironment : {
EnvironmentRecords : { // 실행 중인 함수 안의 함수, 변수 저장
DeclarativeEnvironmentRecord : {} // function, 변수, catch 문
, ObjectEnvironmentRecord : {} // 글로벌 오브젝트의 function, 변수, with문
}
, outerEnvironmentRecords : {} // 가장 근접한 스코프
}
, VariableEnvironment : {} // function, 변수 식별자(Identifier)가 binding
, ThisBinding : {} // 호출한 함수가 속한 오브젝트를 참조
}
좋은 코딩 방식 = outerEnvironmentRecords 참조의 최
소화
1. 함수에서 사용할 함수, 변수를 함수 안에 작성
2. 어렵다면 한 단계 위의 Scope에 작성
3. 전역 변수사용 최소화
3. Lexical Environment

12. Declaration Binding Instantiation
모든 Execution context는 선언된 function, 변수를
VariableEnvironment의 Environment Record에 바인딩 한다.
특별히 function은 parameter 또한 바인딩 한다.
5. Declaration Binding Instantiation
debugger;
var sayHello = 'Hello, ';
function person(){
var first = 'David', last = 'Shariff';
function firstName(){
return first;
}
function lastName(){
return last;
}
console.log(sayhello + firstName() + ' ' + lastName());
}
person();

13. Declaration Binding Instantiation
Quiz.
debugger;
var obj = {};
obj.sports = function(one, two, two){
console.log(one + two);
}
obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
모든 파라미터가 순차적으로 binding

14. Declaration Binding Instantiation
Quiz.
debugger;
var obj = {};
obj.sports = function(one, two, two){
console.log(one + two);
}
obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
모든 파라미터가 순차적으로 binding

15. Declaration Binding Instantiation
Quiz.
debugger;
var obj = {};
obj.sports = function(one, two, two){
console.log(one + two);
function one(){};
}
obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
FunctionDeclaration을 모두 찾아서 binding

16. Declaration Binding Instantiation
Quiz.
debugger;
var obj = {};
obj.sports = function(one, two, arguments){
console.log(arguments); // ?
}
obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
DeclarativeEnvironmentRecord에 이미 존재하는 것들은
설정하지 않는다.

17. Declaration Binding Instantiation
Quiz.
debugger;
var obj = {};
obj.sports = function(one, two, arguments){
console.log(arguments); // ?
}
obj.sports(11, 22, 33);
5. Declaration Binding Instantiation
DeclarativeEnvironmentRecord에 이미 존재하는 것들은
설정하지 않는다.

18. Closure – Closure를 사용하지 않았을 때
var uniqueId = function(){
if(!arguments.callee.id){
arguments.callee.id = 0;
}
return arguments.callee.id++;
}
uniqueId(); // 0
uniqueId(); // 1
uniqueId(); // 2
// id를 0으로 초기화 할 수 있을까?
6. Closure

19. Closure – Closure를 사용하지 않았을 때
var uniqueId = function(){
if(!arguments.callee.id){
arguments.callee.id = 0;
}
return arguments.callee.id++;
}
uniqueId(); // 0
uniqueId(); // 1
uniqueId(); // 2
// id를 0으로 초기화 할 수 있을까?
uniqueId.id = 0;
uniqueId(); // 0
6. Closure

20. Closure – Closure를 사용했을 때
var uniqueId = (function(){
var id = 0;
return function(){
return id++;
}
})();
uniqueId(); // 0
uniqueId(); // 1
uniqueId(); // 2
// id를 0으로 초기화 할 수 있을까?
6. Closure

21. var uniqueId = (function(){
var id = 0;
return function(){
return id++;
}
})();
uniqueId(); // 0
uniqueId(); // 1
uniqueId(); // 2
// 0으로 초기화
uniqueId.id = 0 // ?
6. Closure
Closure – Closure를 사용했을 때
선언되어 있는
id에는 접근할
수 없다
=> Closure를 통해 모듈화를 할 수 있다.

22. Closure
6. Closure
- 생명주기가 끝난 변수(id)가 계속 참조 가능한 이유 :
중첩된 함수에 대한 참조가 전역 유효범위(uniqueId) 안에 저장되
어 있기 때문
- 전제 조건 :
바깥 함수(uniqueId)의 반환값으로 중첩된 함수(return의 함수)를
사용하거나 중첩된 함수를 객체의 프로퍼티로 저장
var uniqueId = (function(){
var id = 0;
return function(){
return id++;
}
})();

23. 참고자료
- http://www.ecma-international.org/ecma-262/5.1/#sec-10
- http://davidshariff.com/blog/what-is-the-execution-
context-in-javascript/
- 몰입! 자바스크립트 김영보
- 자바스크립트 완벽 가이드 데이비드 플래너건
* 참고사항 : 이 자료는 함수와 관련된 Execution Context와 그 하위 사항만을
다루고 있습니다. global, eval 코드의 실행과 그와 관련된 사항, strict 모드, try
catch문에서의 처리 등등에 관해서는 위의 링크를 참고하시기 바랍니다.