27
자바스크립트의 스코프와 클로져 NHN NEXT 김다혜

Scope and Closure of JavaScript

Embed Size (px)

Citation preview

Page 1: Scope and Closure of JavaScript

자바스크립트의����������� ������������������  스코프와����������� ������������������  클로져NHN����������� ������������������  NEXT����������� ������������������  김다혜

Page 2: Scope and Closure of JavaScript

목차• 실행����������� ������������������  컨텍스트����������� ������������������  (execution����������� ������������������  context)����������� ������������������  

• 실행����������� ������������������  컨텍스트����������� ������������������  자세히����������� ������������������  알아보기����������� ������������������  

• 스코프����������� ������������������  (scope)����������� ������������������  

• 클로져����������� ������������������  (closure)

Page 3: Scope and Closure of JavaScript

실행����������� ������������������  컨텍스트����������� ������������������  execution����������� ������������������  context• 실행����������� ������������������  컨텍스트란,����������� ������������������  어떤����������� ������������������  함수가����������� ������������������  호출되면����������� ������������������  해당����������� ������������������  함수가����������� ������������������  이용할����������� ������������������  정보들이����������� ������������������  저장되어����������� ������������������  있는����������� ������������������  공간����������� ������������������  

• 함수를����������� ������������������  호출하면����������� ������������������  독자적인����������� ������������������  실행����������� ������������������  컨텍스트가����������� ������������������  생성되어,컨텍스트����������� ������������������  스택(CT)에����������� ������������������  쌓입니다.����������� ������������������  함수의����������� ������������������  코드가����������� ������������������  모두����������� ������������������  실행하고����������� ������������������  나면,����������� ������������������  해당����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트는����������� ������������������  CT에서����������� ������������������  빠져나오게����������� ������������������  됩니다.����������� ������������������  ����������� ������������������  

• 자바스크립트를����������� ������������������  시작하면����������� ������������������  전역공간에서����������� ������������������  쓰이는����������� ������������������  전역����������� ������������������  컨텍스트가����������� ������������������  가장����������� ������������������  먼저����������� ������������������  컨텍스트����������� ������������������  스택에����������� ������������������  쌓이게����������� ������������������  됩니다.����������� ������������������  이����������� ������������������  전역����������� ������������������  컨텍스트는����������� ������������������  애플리케이션이����������� ������������������  종료될����������� ������������������  때,����������� ������������������  즉����������� ������������������  웹페이지를����������� ������������������  나가거나����������� ������������������  브라우저를����������� ������������������  종료했을����������� ������������������  때에����������� ������������������  사라집니다.

Page 4: Scope and Closure of JavaScript

실행����������� ������������������  컨텍스트����������� ������������������  execution����������� ������������������  context• 예제를����������� ������������������  통해����������� ������������������  알아봅시다!

Page 5: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

코드가����������� ������������������  실행되기����������� ������������������  전,����������� ������������������  전역����������� ������������������  실행����������� ������������������  컨텍스트가����������� ������������������  초기화����������� ������������������  되고����������� ������������������  컨텍스트����������� ������������������  스택에����������� ������������������  올라옵니다.

Page 6: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

전역����������� ������������������  실행����������� ������������������  컨텍스트의����������� ������������������  초기화가����������� ������������������  완료되면,����������� ������������������  자바스크립트����������� ������������������  코드가����������� ������������������  실행됩니다.

Page 7: Scope and Closure of JavaScript

foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

foo함수가����������� ������������������  실행될����������� ������������������  때����������� ������������������  foo����������� ������������������  함수의����������� ������������������  실행컨텍스트가����������� ������������������  CT에����������� ������������������  올라옵니다.

Page 8: Scope and Closure of JavaScript

전역����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

foo함수의����������� ������������������  내용이����������� ������������������  모두����������� ������������������  실행되고����������� ������������������  나면,����������� ������������������  foo함수의����������� ������������������  실행����������� ������������������  컨텍스트는����������� ������������������  파괴되어����������� ������������������  

CT에서����������� ������������������  빠져나오게����������� ������������������  됩니다.����������� ������������������  

Page 9: Scope and Closure of JavaScript

실행����������� ������������������  컨텍스트����������� ������������������  자세히����������� ������������������  알아보기• 실행����������� ������������������  컨텍스트는����������� ������������������  변수객체(Variable����������� ������������������  Object,����������� ������������������  VO),����������� ������������������  스코프����������� ������������������  체인(scope����������� ������������������  chain),����������� ������������������  this����������� ������������������  

에����������� ������������������  대한����������� ������������������  정보를����������� ������������������  갖고����������� ������������������  있습니다.����������� ������������������  ����������� ������������������  

• 변수객체는����������� ������������������  현재����������� ������������������  함수가����������� ������������������  사용하는����������� ������������������  로컬����������� ������������������  변수들이����������� ������������������  저장되는����������� ������������������  객체입니다.����������� ������������������  

• 스코프체인이란����������� ������������������  실행����������� ������������������  컨텍스트가����������� ������������������  접근할����������� ������������������  수����������� ������������������  있는����������� ������������������  모든����������� ������������������  변수와����������� ������������������  함수����������� ������������������  집합입니다.����������� ������������������  ����������� ������������������  

• this는����������� ������������������  이����������� ������������������  함수를����������� ������������������  호출한����������� ������������������  객체를����������� ������������������  가리킵니다.����������� ������������������  

Page 10: Scope and Closure of JavaScript

전역����������� ������������������  Varible����������� ������������������  Object

foo 함수����������� ������������������  위치

x undefined

result undefined

코드가����������� ������������������  실행되기����������� ������������������  직전에,����������� ������������������  전역����������� ������������������  실행����������� ������������������  컨텍스트를����������� ������������������  초기화����������� ������������������  합니다.����������� ������������������  ����������� ������������������  

VO에는����������� ������������������  코드를����������� ������������������  쭉����������� ������������������  보고����������� ������������������  선언된����������� ������������������  함수와����������� ������������������  변수를����������� ������������������  저장할����������� ������������������  공간을����������� ������������������  마련한����������� ������������������  뒤,����������� ������������������  함수는����������� ������������������  그����������� ������������������  함수����������� ������������������  위치를,����������� ������������������  변수는����������� ������������������  undefined를����������� ������������������  저장해둡니다.����������� ������������������  ����������� ������������������  

this에는����������� ������������������  window가����������� ������������������  저장됩니다.

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

전역����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

this window

컨텍스트����������� ������������������  스택

Page 11: Scope and Closure of JavaScript

전역����������� ������������������  Varible����������� ������������������  Object

foo 함수����������� ������������������  위치

x undefined

result undefined실행����������� ������������������  컨텍스트의����������� ������������������  스코프����������� ������������������  체인은����������� ������������������  변수객체가����������� ������������������  차례����������� ������������������  차례����������� ������������������  담긴����������� ������������������  배열을����������� ������������������  가리키게����������� ������������������  되는데,����������� ������������������  전역����������� ������������������  실행����������� ������������������  컨텍스트의����������� ������������������  Scope����������� ������������������  chain는����������� ������������������  전역����������� ������������������  변수����������� ������������������  객체만����������� ������������������  담긴����������� ������������������  배열을����������� ������������������  가리킵니다.

scope����������� ������������������  chain����������� ������������������  배열

0

전역����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

this window

컨텍스트����������� ������������������  스택

Page 12: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

전역����������� ������������������  Varible����������� ������������������  Object

foo 함수����������� ������������������  위치

x 1

result undefined

전역����������� ������������������  실행����������� ������������������  컨텍스트의����������� ������������������  초기화가����������� ������������������  모두����������� ������������������  끝나면,����������� ������������������  

코드를����������� ������������������  실행합니다.����������� ������������������  ����������� ������������������  

첫번째����������� ������������������  줄을����������� ������������������  실행하여����������� ������������������  x값에����������� ������������������  1이����������� ������������������  저장됩니다.

전역����������� ������������������  실행����������� ������������������  컨텍스트

VO …⋯

scope����������� ������������������  chain …⋯

this window

컨텍스트����������� ������������������  스택

Page 13: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

foo����������� ������������������  객체(Function����������� ������������������  타입)

prototype …⋯

…⋯

[[scope]]

foo함수가����������� ������������������  선언되면,����������� ������������������  foo라는����������� ������������������  이름으로����������� ������������������  Function����������� ������������������  타입����������� ������������������  객체가����������� ������������������  만들어집니다.����������� ������������������  Prototype과����������� ������������������  관련된����������� ������������������  것들도����������� ������������������  이����������� ������������������  객체에����������� ������������������  저장되게����������� ������������������  되지요.����������� ������������������  이����������� ������������������  Function객체엔����������� ������������������  [[scope]]라는����������� ������������������  프로퍼티도����������� ������������������  있는데����������� ������������������  여기에����������� ������������������  저장되는����������� ������������������  것은,����������� ������������������  부모����������� ������������������  함수에����������� ������������������  대한����������� ������������������  스코프����������� ������������������  체인����������� ������������������  배열입니다.

scope����������� ������������������  chain����������� ������������������  배열

0

전역����������� ������������������  Varible����������� ������������������  Object

foo 함수����������� ������������������  위치

x 1

result undefined

Page 14: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

foo함수가����������� ������������������  호출되면,����������� ������������������  함수가����������� ������������������  실행되기����������� ������������������  직전,����������� ������������������  foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트가����������� ������������������  컨텍스트����������� ������������������  스택에����������� ������������������  올라가고,����������� ������������������  실행����������� ������������������  컨텍스트가����������� ������������������  초기화됩니다.

Page 15: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

foo에����������� ������������������  선언된����������� ������������������  변수와����������� ������������������  함수를����������� ������������������  살펴봅니다.����������� ������������������  foo의����������� ������������������  VO는����������� ������������������  개념적으로����������� ������������������  다음과����������� ������������������  같이����������� ������������������  초기화되겠네요.����������� ������������������  

{����������� ������������������  x:����������� ������������������  undefined,����������� ������������������  inner:����������� ������������������  함수의����������� ������������������  위치}

Page 16: Scope and Closure of JavaScript

foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

foo����������� ������������������  객체(Function����������� ������������������  타입)

prototype …⋯

…⋯

[[scope]]

scope����������� ������������������  chain����������� ������������������  배열

0 글로벌����������� ������������������  VO

{����������� ������������������  x:����������� ������������������  undefined,����������� ������������������  inner:����������� ������������������  함수의����������� ������������������  위치}

Page 17: Scope and Closure of JavaScript

foo����������� ������������������  객체(Function����������� ������������������  타입)

prototype …⋯

…⋯

[[scope]]

scope����������� ������������������  chain����������� ������������������  배열

0 글로벌����������� ������������������  VO

foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

{����������� ������������������  x:����������� ������������������  undefined,����������� ������������������  inner:����������� ������������������  함수의����������� ������������������  위치}

foo����������� ������������������  실행����������� ������������������  컨텍스트의����������� ������������������  스코프����������� ������������������  체인을����������� ������������������  초기화할����������� ������������������  때는����������� ������������������  foo객체의����������� ������������������  [[scope]]를����������� ������������������  그대로����������� ������������������  복사하고,����������� ������������������  scope����������� ������������������  chain����������� ������������������  맨����������� ������������������  앞에����������� ������������������  자신의����������� ������������������  VO를����������� ������������������  삽입합니다.

scope����������� ������������������  chain����������� ������������������  배열

0 자신의����������� ������������������  VO

1 글로벌����������� ������������������  vO

Page 18: Scope and Closure of JavaScript

실행����������� ������������������  컨텍스트가����������� ������������������  초기화되면,����������� ������������������  함수가����������� ������������������  실행됩니다.

foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

{����������� ������������������  x:����������� ������������������  undefined,����������� ������������������  inner:����������� ������������������  함수의����������� ������������������  위치}

scope����������� ������������������  chain����������� ������������������  배열

0 자신의����������� ������������������  VO

1 글로벌����������� ������������������  vO

Page 19: Scope and Closure of JavaScript

스코프• 이전의����������� ������������������  예제에����������� ������������������  이어서����������� ������������������  설명드리겠습니다.

Page 20: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

foo함수가����������� ������������������  실행되었을����������� ������������������  때,����������� ������������������  foo함수가����������� ������������������  접근할����������� ������������������  수����������� ������������������  있는����������� ������������������  변수와����������� ������������������  함수의����������� ������������������  범위와����������� ������������������  검색순서는����������� ������������������  스코프����������� ������������������  체인을����������� ������������������  통해����������� ������������������  정의����������� ������������������  됩니다.

Page 21: Scope and Closure of JavaScript

foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

scope����������� ������������������  chain����������� ������������������  배열

0 자신의����������� ������������������  VO

1 글로벌����������� ������������������  vO

{����������� ������������������  x:����������� ������������������  2,����������� ������������������  inner:����������� ������������������  위치}

{foo:����������� ������������������  위치,����������� ������������������  x:����������� ������������������  1,����������� ������������������  result:����������� ������������������  undefined}

foo에서����������� ������������������  x를����������� ������������������  찾을����������� ������������������  때엔,����������� ������������������  스코프����������� ������������������  체인의����������� ������������������  배열을����������� ������������������  순회하면서����������� ������������������  찾습니다.����������� ������������������  가장����������� ������������������  먼저����������� ������������������  자신의����������� ������������������  VO를����������� ������������������  살펴보겠지요?����������� ������������������  그런데����������� ������������������  자신의����������� ������������������  VO에서����������� ������������������  x를����������� ������������������  발견합니다.����������� ������������������  그래서����������� ������������������  이����������� ������������������  x에����������� ������������������  값을����������� ������������������  할당하게����������� ������������������  됩니다.����������� ������������������  

따라서,����������� ������������������  함수����������� ������������������  안에서����������� ������������������  밖에서����������� ������������������  썼던����������� ������������������  이름의����������� ������������������  변수를����������� ������������������  선언하더라도����������� ������������������  밖의����������� ������������������  변수엔����������� ������������������  영향을����������� ������������������  주지����������� ������������������  않게����������� ������������������  됩니다.����������� ������������������  

또한,����������� ������������������  함수����������� ������������������  안에서����������� ������������������  그����������� ������������������  밖의����������� ������������������  변수들엔����������� ������������������  접근����������� ������������������  가능하지만,����������� ������������������  함수����������� ������������������  밖에서����������� ������������������  함수����������� ������������������  안의����������� ������������������  지역변수에����������� ������������������  접근할����������� ������������������  수����������� ������������������  없게되는����������� ������������������  것입니다.����������� ������������������  

foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

Page 22: Scope and Closure of JavaScript

클로져• 클로져란����������� ������������������  다른����������� ������������������  함수의����������� ������������������  스코프에����������� ������������������  있는����������� ������������������  변수에����������� ������������������  접근����������� ������������������  가능한����������� ������������������  함수입니다.����������� ������������������  

• 특히,����������� ������������������  inner����������� ������������������  function이����������� ������������������  언제나����������� ������������������  자신의����������� ������������������  outer����������� ������������������  function에����������� ������������������  접근할����������� ������������������  수����������� ������������������  있는����������� ������������������  성질을����������� ������������������  이용합니다.����������� ������������������  (outer����������� ������������������  function이����������� ������������������  실행이����������� ������������������  완료된����������� ������������������  이후에도����������� ������������������  말이죠!)

Page 23: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

inner����������� ������������������  객체(Function����������� ������������������  타입)

prototype …⋯

…⋯

[[scope]]

scope����������� ������������������  chain����������� ������������������  배열

0 foo����������� ������������������  VO

1 글로벌����������� ������������������  vO

foo����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO …⋯

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

inner()함수가����������� ������������������  선언될����������� ������������������  때,����������� ������������������  inner객체가����������� ������������������  생기고,����������� ������������������  그����������� ������������������  객체의����������� ������������������  [[scope]]는����������� ������������������  현재����������� ������������������  실행����������� ������������������  컨텍스트의����������� ������������������  스코프체인을����������� ������������������  가리키게����������� ������������������  됩니다.

Page 24: Scope and Closure of JavaScript

foo함수가����������� ������������������  반환된����������� ������������������  후����������� ������������������  컨텍스트����������� ������������������  스택에서����������� ������������������  foo의����������� ������������������  실행����������� ������������������  컨텍스트는����������� ������������������  사라집니다.����������� ������������������  ����������� ������������������  var x = 1;

!function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

inner����������� ������������������  객체(Function����������� ������������������  타입)

prototype …⋯

…⋯

[[scope]]

scope����������� ������������������  chain����������� ������������������  배열

0 foo����������� ������������������  VO

1 글로벌����������� ������������������  vO

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

foo에서����������� ������������������  반환된����������� ������������������  inner함수가����������� ������������������  ����������� ������������������  result����������� ������������������  변수에����������� ������������������  저장되게����������� ������������������  됩니다.����������� ������������������  

Page 25: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

inner����������� ������������������  객체(Function����������� ������������������  타입)

prototype …⋯

…⋯

[[scope]]

scope����������� ������������������  chain����������� ������������������  배열

0 foo����������� ������������������  VO

1 글로벌����������� ������������������  vO

inner함수가����������� ������������������  실행되기����������� ������������������  전,����������� ������������������  실행����������� ������������������  컨텍스트가����������� ������������������  초기화����������� ������������������  됩니다.����������� ������������������  vO에는����������� ������������������  inner함수����������� ������������������  내에����������� ������������������  선언된����������� ������������������  지역변수가����������� ������������������  없으므로����������� ������������������  빈����������� ������������������  객체가����������� ������������������  저장되겠군요.����������� ������������������  

scope����������� ������������������  chain은����������� ������������������  ����������� ������������������  inner����������� ������������������  ����������� ������������������  객체의����������� ������������������  [[scope]]가����������� ������������������  가리키고����������� ������������������  있는����������� ������������������  객체를����������� ������������������  복사한����������� ������������������  뒤,����������� ������������������  맨����������� ������������������  앞에����������� ������������������  자신의����������� ������������������  VO를����������� ������������������  추가합니다.

inner����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

scope����������� ������������������  chain����������� ������������������  배열

0 자신의����������� ������������������  VO

1 foo����������� ������������������  VO

2 글로벌����������� ������������������  vO

Page 26: Scope and Closure of JavaScript

var x = 1; !function foo () { var x = 2; function inner() { return x; } return inner; } !var result = foo(); !console.log(result());

inner����������� ������������������  객체(Function����������� ������������������  타입)

prototype …⋯

…⋯

[[scope]]

scope����������� ������������������  chain����������� ������������������  배열

0 foo����������� ������������������  VO

1 글로벌����������� ������������������  vO

inner함수는����������� ������������������  자신의����������� ������������������  VO에는����������� ������������������  없는����������� ������������������  x변수를,����������� ������������������  scope����������� ������������������  chain을����������� ������������������  통해����������� ������������������  foo의����������� ������������������  VO에서����������� ������������������  찾은����������� ������������������  뒤����������� ������������������  2라는����������� ������������������  값을����������� ������������������  반환하게����������� ������������������  됩니다.

inner����������� ������������������  함수의����������� ������������������  실행����������� ������������������  컨텍스트

VO

scope����������� ������������������  chain

전역����������� ������������������  실행����������� ������������������  컨텍스트

컨텍스트����������� ������������������  스택

scope����������� ������������������  chain����������� ������������������  배열

0 자신의����������� ������������������  VO

1 foo����������� ������������������  VO

2 글로벌����������� ������������������  vO

Page 27: Scope and Closure of JavaScript

참고• 프론트엔드����������� ������������������  개발자를����������� ������������������  위한����������� ������������������  자바스크립트����������� ������������������  프로그래밍����������� ������������������  (니콜라스����������� ������������������  자카스����������� ������������������  저,����������� ������������������  한선용����������� ������������������  역,����������� ������������������  인사이트����������� ������������������  출판)����������� ������������������  

• Identifier����������� ������������������  Resolution����������� ������������������  and����������� ������������������  Closures����������� ������������������  in����������� ������������������  the����������� ������������������  JavaScript����������� ������������������  Scope����������� ������������������  Chain����������� ������������������  (http://davidshariff.com/blog/javascript-scope-chain-and-closures/)����������� ������������������  

• Javascript의����������� ������������������  함수와����������� ������������������  스코프����������� ������������������  체인(Scope����������� ������������������  Chain)����������� ������������������  (http://blog.naver.com/jjoommnn/130149113595)