JavaScript closure & scope

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

왜?
•

이벤트에 많이 사용되는 클로져.

•

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에서 정의

Scope Chain
•

함수 안의 [[SCOPE]]가 가리킨다.

•

객체 배열이다.

•

각 배열에는 변수 객체를 가리킨다.

myFun
[[SCOPE]]

Scope Chain
0

Variable Object

•

변수 항목을 키-값 쌍 형태로 포함한다.

•

함수가 만들어질때, 같이 만들어진다.

Global Object

[[SCOPE]]

Scope Chain
0

this

window

window

myFun

(object)

document

(object)

myFun

(function)

…

…

Execution Context
•

자바스크립트에서 스코프를 아리송하게 하는놈

•

파싱 단계와 실행단계의 스코프 차이를 만든다.

•

실행시 함수 스코프를 복사한후 자신만의 스코프 체인에
Activation Object을 추가한다.

•

함수 실행할 때마다 Execution Context가 만들어진다.

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
…
…

클로져?

•

음~~~~ ㅡㅡ;

•

예제로 Go

클로져 예제
Global Object
this
window

파싱

window
(object)

document

(object)

outer

(function)

closure1

undefined

…

…

클로져 예제(1)
outer 함수의 
스코프체인

Global Object
this
outer
[[SCOPE]]

Scope Chain
0

window

window

(object)

document

(object)

outer

(function)

closure1

undefined

…

…

클로져 예제(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

클로져 예제(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

클로져 예제(4)
Activation Object (closure)
this
arguments

9Line 실행

console.log(closure1());
Execution Context
Scope Chain

Scope Chain
0
1
2

window
[]

this
window
arguments
[num]
num
1
innerFun
(function)
Global Object
this
window
window
(object)
document
(object)
outer
(function)
closure1
(function)
…
…

클로져 예제(5)
Activation Object (closure)
this
arguments

10Line 실행

console.log(closure1());
Execution Context
Scope Chain

Scope Chain
0
1
2

window
[]

this
window
arguments
[num]
num
2
innerFun
(function)
Global Object
this
window
window
(object)
document
(object)
outer
(function)
closure1
(function)
…
…

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

참고
•

자바스크립트 객체지향 프로그래밍

•

High Performance JavaScript

•

JavaScript The Good Parts

•

JavaScript The Definitive Guide 5/E

JavaScript closure & scope

More Related Content

Similar to JavaScript closure & scope (20)

JavaScript closure & scope