javascript closure & scope
DESCRIPTION
JavaScript closure & scopeTRANSCRIPT
왜?
• 이벤트에 많이 사용되는 클로져.
• Node.js는 이벤트를 이용한다. 무척 많이.
• 클로져를 이해하기 위해서는 스코프에 대한 이해가 필요.
변수
• 값 타입의 데이터
• 숫자, 문자열, 불린, undefined, null
• 참조 타입의 데이터
• 숫자, 문자열, 불린, undefined, null을 제외한 모든것
변수 범위
• C, C++, Java등 일반적 언어에서 변수 범위는 {} 이다.
• 자바스크립트 변수 범위는 함수이다.
프로그램 실행 단계• 프로그램
• 파싱
• 변수, 함수 정의
• 실행
• 변수 대입, 제어문, 함수호출
• * 함수 코드 파싱
파싱 단계
• 변수와 함수를 정의한다.
• 3Line: myFun 변수가 undefined로 정의.
• 5~8Line: myFun 함수가 정의, 3Line myFunc의 변수를 덮어쓴다.
실행 단계
• 1Line: myFun 함수가 호출, “local variable” 출력
• 3Line: myFun에 “overwrite” 대입
• myFun이 가리키고 있던 함수는 가비지 컬렉션으로 간다.
• 10Line: “overwrite” 출력
• 메소드와 프로퍼티는 실행시 판단된다.
함수 Scope
• 함수 내부 속성에는 [[SCOPE]]라는 속성이 있다.
• [[SCOPE]]는 우리가 접근 할 수 없다.
• ECMA-262에서 정의
myFun
[[SCOPE]]
Scope Chain
• 함수 안의 [[SCOPE]]가 가리킨다.
• 객체 배열이다.
• 각 배열에는 변수 객체를 가리킨다.
myFun
[[SCOPE]]
Scope Chain
0
Variable Object
• 변수 항목을 키-값 쌍 형태로 포함한다.
• 함수가 만들어질때, 같이 만들어진다.
myFun
[[SCOPE]]
Scope Chain
0
Global Object
this window
window (object)
document (object)
myFun (function)
… …
Execution Context
• 자바스크립트에서 스코프를 아리송하게 하는놈
• 파싱 단계와 실행단계의 스코프 차이를 만든다.
• 실행시 함수 스코프를 복사한후 자신만의 스코프 체인에 Activation Object을 추가한다.
• 함수 실행할 때마다 Execution Context가 만들어진다.
var result = myFun(‘closure’); execution context
!Scope Chain
Scope Chain01
Global Objectthis window
window (object)document (object)myFun (function)result undefined… …
Activation Objectthis window
arguments [name]name “closure”msg undefined
퀴즈
undefined
클로져?
• 음~~~~ ㅡㅡ;
• 예제로 Go
클로져 예제Global Object
this windowwindow (object)
document (object)outer (function)
closure1 undefined… …
파싱
클로져 예제(1)
Global Objectthis window
window (object)document (object)
outer (function)closure1 undefined
… …
outer 함수의스코프체인
outer
[[SCOPE]]
Scope Chain
0
클로져 예제(2)
Global Objectthis window
window (object)document (object)
outer (function)closure1 undefined
… …
8Line 실행
var closure1 = outer(1); Execution Context
Scope Chain
Scope Chain0
1
Activation Objectthis window
arguments [num]num 1
innerFun (function)
클로져 예제(3)
Global Objectthis window
window (object)document (object)
outer (function)closure1 undefined
… …
innerFun의 스코프체인
innerFun[[SCOPE]]
Scope Chain0
1
Activation Object (outer)this window
arguments [num]num 1
innerFun (function)
var closure1 = outer(1); Execution Context
Scope Chain
Scope Chain0
1
클로져 예제(4)
Global Objectthis window
window (object)document (object)
outer (function)closure1 (function)
… …
9Line 실행
console.log(closure1()); Execution Context
Scope Chain
Scope Chain0
1
2
Activation Object (outer)this window
arguments [num]num 1
innerFun (function)
Activation Object (closure)this window
arguments []
클로져 예제(5)
Global Objectthis window
window (object)document (object)
outer (function)closure1 (function)
… …
10Line 실행
console.log(closure1()); Execution Context
Scope Chain
Scope Chain0
1
2
Activation Object (outer)this window
arguments [num]num 2
innerFun (function)
Activation Object (closure)this window
arguments []
퀴즈(1)
자바스크립트의 모든 함수는 클로져다!
참 고
• 자바스크립트 객체지향 프로그래밍
• High Performance JavaScript
• JavaScript The Good Parts
• JavaScript The Definitive Guide 5/E
감사합니다.