JavaScript closure & scope

1. 자바스크립트의
클로져와 스코프
고대준 (kkode1911@gmail.com)

2. 왜?
•
이벤트에 많이 사용되는 클로져.
•
Node.js는 이벤트를 이용한다. 무척 많이.
•
클로져를 이해하기 위해서는 스코프에 대한 이해가 필요.

3. 변수
•
값 타입의 데이터
•
•
숫자, 문자열, 불린, undefined, null
참조 타입의 데이터
•
숫자, 문자열, 불린, undefined, null을 제외한 모든것

4. 변수 범위
•
C, C++, Java등 일반적 언어에서 변수 범위는 {} 이다.
•
자바스크립트 변수 범위는 함수이다.

5. 프로그램 실행 단계
•
프로그램
•
파싱
•
•
변수, 함수 정의
실행
•
변수 대입, 제어문, 함수호출
•
* 함수 코드 파싱

6. 파싱 단계
•
변수와 함수를 정의한다.
•
3Line: myFun 변수가 undefined로 정의.
•
5~8Line: myFun 함수가 정의, 3Line myFunc의 변
수를 덮어쓴다.

7. 실행 단계
•
1Line: myFun 함수가 호출, “local variable” 출력
•
3Line: myFun에 “overwrite” 대입
•
myFun이 가리키고 있던 함수는 가비지 컬렉션으로 간다.
•
10Line: “overwrite” 출력
•
메소드와 프로퍼티는 실행시 판단된다.

8. 함수 Scope
•
함수 내부 속성에는 [[SCOPE]]라는 속성이 있다.
•
[[SCOPE]]는 우리가 접근 할 수 없다.
•
ECMA-262에서 정의

9. myFun
[[SCOPE]]

10. Scope Chain
•
함수 안의 [[SCOPE]]가 가리킨다.
•
객체 배열이다.
•
각 배열에는 변수 객체를 가리킨다.

11. myFun
[[SCOPE]]
Scope Chain
0

12. Variable Object
•
변수 항목을 키-값 쌍 형태로 포함한다.
•
함수가 만들어질때, 같이 만들어진다.

13. Global Object
[[SCOPE]]
Scope Chain
0
this
window
window
myFun
(object)
document
(object)
myFun
(function)
…
…

14. Execution Context
•
자바스크립트에서 스코프를 아리송하게 하는놈
•
파싱 단계와 실행단계의 스코프 차이를 만든다.
•
실행시 함수 스코프를 복사한후 자신만의 스코프 체인에
Activation Object을 추가한다.
•
함수 실행할 때마다 Execution Context가 만들어진다.

15. var result = myFun(‘closure’);
execution context
!
Scope Chain
Scope Chain
0
1
Activation Object
this
window
arguments
[name]
name
“closure”
msg
undefined
Global Object
this
window
window
(object)
document
(object)
myFun
(function)
result
undefined
…
…

16. 퀴즈
undefined

17. 클로져?
•
음~~~~ ㅡㅡ;
•
예제로 Go

18. 클로져 예제
Global Object
this
window
파싱
window
(object)
document
(object)
outer
(function)
closure1
undefined
…
…

19. 클로져 예제(1)
outer 함수의
스코프체인
Global Object
this
outer
[[SCOPE]]
Scope Chain
0
window
window
(object)
document
(object)
outer
(function)
closure1
undefined
…
…

20. 클로져 예제(2)
8Line 실행
Activation Object
this
window
arguments
[num]
num
1
innerFun
(function)
Global Object
this
var closure1 = outer(1);
Execution Context
Scope Chain
window
window
(object)
0
document
(object)
1
outer
(function)
closure1
undefined
…
…
Scope Chain

21. 클로져 예제(3)
innerFun의
스코프체인
var closure1 = outer(1);
Execution Context
Scope Chain
Scope Chain
[[SCOPE]]
Global Object
0
this
window
1
window
(object)
document
(object)
outer
(function)
closure1
undefined
…
…
Scope Chain
innerFun
Activation Object (outer)
this
window
arguments
[num]
num
1
innerFun
(function)
0
1

22. 클로져 예제(4)
Activation Object (closure)
this
arguments
9Line 실행
console.log(closure1());
Execution Context
Scope Chain
Scope Chain
0
1
2
window
[]
Activation Object (outer)
this
window
arguments
[num]
num
1
innerFun
(function)
Global Object
this
window
window
(object)
document
(object)
outer
(function)
closure1
(function)
…
…

23. 클로져 예제(5)
Activation Object (closure)
this
arguments
10Line 실행
console.log(closure1());
Execution Context
Scope Chain
Scope Chain
0
1
2
window
[]
Activation Object (outer)
this
window
arguments
[num]
num
2
innerFun
(function)
Global Object
this
window
window
(object)
document
(object)
outer
(function)
closure1
(function)
…
…

24. 퀴즈(1)

25. 자바스크립트의 모든 함수
는 클로져다!

26. 참고
•
자바스크립트 객체지향 프로그래밍
•
High Performance JavaScript
•
JavaScript The Good Parts
•
JavaScript The Definitive Guide 5/E

27. 감사합니다.