avatar
Published on

Javascript Execution Context

Author
  • avatar
    Name
    yceffort

듀어가기에 μ•žμ„œ 더 μ’‹κ³  μ œκ°€ 많이 μ°Έκ³ ν•œ 글이 여기에 μžˆμŠ΅λ‹ˆλ‹€. 이글을 λ³΄μ‹œλŠ”κ²Œ λ‚«μŠ΅λ‹ˆλ‹€.

Table of Contents

μžλ°”μŠ€ν¬λ¦½νŠΈ μ‹€ν–‰μ»¨ν…μŠ€νŠΈ

이번 ν¬μŠ€νŒ…μœΌλ‘œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λŒ€ν•΄ μ˜¨μ „νžˆ μ΄ν•΄ν•˜κΈΈ 바라며 πŸ€”

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ μ •μ˜

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ— λŒ€ν•œ μ •μ˜λŠ” μ•„λž˜μ²˜λŸΌ λ‚˜νƒ€λ‚˜ μžˆλ‹€.

Execution context (abbreviated form β€” EC) is the abstract concept used by ECMA-262 specification for typification and differentiation of an executable code.

Execution Context (μ΄ν•˜ EC2)λŠ” ECMA-262μ—μ„œ λͺ…μ„Έλ˜μ–΄ μžˆλŠ” 좔상적인 κ°œλ…μœΌλ‘œ, μ‹€ν–‰κ°€λŠ₯ν•œ μ½”λ“œλ₯Ό ν˜•μƒν™” ν•˜κ³  κ΅¬λΆ„ν•˜λŠ”λ° μ‚¬μš©λœλ‹€.

μ—¬κΈ° μ €κΈ° λΈ”λ‘œκ·Έλ₯Ό λ“€μ‘€μ‹œκ³  λ‹€λ‹Œ κ²°κ³Ό, λŒ€μ²΄λ‘œ μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λŠ”λ° μžˆμ–΄ ν•„μš”ν•œ ν™˜κ²½ μ •λ„λ‘œ 의미λ₯Ό λΆ€μ—¬ν•˜λŠ” 것 κ°™λ‹€. μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œλŠ” 크게 μ„Έ μ’…λ₯˜κ°€ μžˆλ‹€. κ·ΈλŸ¬λ‚˜ 보톡 두 μ’…λ₯˜λ§Œ 이야기 ν•œλ‹€.

Global Code (aka μ „μ—­ μ½”λ“œ): ν”„λ‘œκ·Έλž¨ λ ˆλ²¨μ—μ„œ μ‹€ν–‰λ˜λŠ” μ½”λ“œλ‘œ, .js 파일 λ˜λŠ” 둜컬 인라인 μ½”λ“œ (<script></script>) 등을 μ˜λ―Έν•œλ‹€. μ „μ—­ μ½”λ“œλŠ” μ–΄λ– ν•œ ν•¨μˆ˜μ˜ 바디에 ν¬ν•¨λ˜μ§€ μ•ŠλŠ”λ‹€. μ‰½κ²Œ μ–˜κΈ°ν•΄μ„œ μ „μ—­ 레벨의 μ½”λ“œλ₯Ό μ˜λ―Έν•œλ‹€. μ—¬κΈ°μ—μ„œ ECStack은 μ•„λž˜μ™€ 같이 μƒμ„±λœλ‹€.

ECStack = [globalContext];

Function Code (aka ν•¨μˆ˜ μ½”λ“œ): ν•¨μˆ˜ μ½”λ“œμ— μ§„μž…ν•˜κ²Œ λ˜μ—ˆμ„ λ•Œ, ECStack에 μƒˆλ‘œμš΄ μ—˜λ¦¬λ¨ΌνŠΈκ°€ ν‘Έμ‰¬λœλ‹€. μ—¬κΈ°μ—μ„œ μ€‘μš”ν•œ 것은, ν•¨μˆ˜ λ‚΄λΆ€μ˜ ν•¨μˆ˜ μ½”λ“œλŠ” ν¬ν•¨λ˜μ§€ μ•ŠλŠ” λ‹€λŠ” 것이닀. 무슨 말인고 ν•˜λ‹ˆ, μ•„λž˜ μ½”λ“œλ₯Ό μ‚΄νŽ΄λ³΄μž.

;(function foo(flag) {
  if (flag) {
    return
  }
  foo(true)
})(false)

이에 ECStack은 μ΄λ ‡κ²Œ μˆ˜μ •λœλ‹€.

// μ²˜μŒμ— fooν•¨μˆ˜λ₯Ό μ‹€ν–‰ν–ˆλ‹€κ°€
ECStack = [
  <foo> functionContext
  globalContext
];

// μž¬κ·€μ μœΌλ‘œ λ‹€μ‹œ fooλ₯Ό μ‹€ν–‰ν•œλ‹€.
ECStack = [
  <foo> functionContext – recursively
  <foo> functionContext
  globalContext
];

λͺ¨λ“  ν•¨μˆ˜μ˜ return 문은 ν˜„μž¬ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλ₯Ό 끝내며, (μ—λŸ¬λ₯Ό λ˜μ Έλ„ throw Error λλ‚˜κΈ΄ ν•œλ‹€.) 이에 따라 ECStackμ—μ„œ pop()λœλ‹€. 이런 과정을 κ±°μΉ˜λ‹€λ³΄λ©΄, κ²°κ΅­ ECStack은 ν”„λ‘œκ·Έλž¨ μ’…λ£Œμ‹œμ μ— globalStack만 λ‚¨κ²Œ λœλ‹€.

Eval Code: μžλ°”μŠ€ν¬λ¦½νŠΈ μ‹œκ°„μ— 쓰지말라고 μ‹ μ‹ λ‹ΉλΆ€ν•˜λŠ” κ·Έ μ½”λ“œλ‹€. ꡳ이 쓸일이 μ—†μœΌλ‹ˆ μžμ„Έν•œ μ„€λͺ…은 μƒλž΅ν•œλ‹€.

μ•„λ¬΄νŠΌ, μ‹€ν–‰ κ°€λŠ₯ν•œ μ½”λ“œλŠ” μ΄λ ‡κ²Œ 3μ’…λ₯˜κ°€ μžˆλ‹€.

μžλ°”μŠ€ν¬λ¦½νŠΈ 엔진은, μ½”λ“œ 싀행을 μœ„ν•΄ μ—¬λŸ¬κ°€μ§€ 정보λ₯Ό μ•Œκ³  μžˆμ–΄μ•Ό ν•œλ‹€. μ΄λŸ¬ν•œ μ •λ³΄μ—λŠ” λ‹€μŒκ³Ό 같은 것듀이 μžˆλ‹€.

  • λ³€μˆ˜: μ „μ—­, μ§€μ—­, λ§€κ°œλ³€μˆ˜, 객체의 속성 λ“±
  • ν•¨μˆ˜ μ„ μ–Έ
  • λ³€μˆ˜μ˜ μœ νš¨λ²”μœ„ (scope)
  • this

μ•„λž˜ μ½”λ“œ 예제λ₯Ό μ‚΄νŽ΄λ³΄μž.

var x = 1

function foo() {
  var arg = arguments
  var y = 2

  function bar() {
    var z = 3
    console.log(x + y + z)
  }
  bar()
}

foo()

μœ„ μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄, μ‹€ν–‰μ»¨ν…μŠ€νŠΈ μŠ€νƒμ΄ μ•„λž˜μ™€ 같이 μƒμ„±λ˜κ³  μ†Œλ©Έλœλ‹€. ν˜„μž¬ 싀행쀑인 μ»¨ν…μŠ€νŠΈμ—μ„œ 이 μ»¨ν…μŠ€νŠΈμ™€ κ΄€λ ¨μ—†λŠ” μ½”λ“œκ°€ μ‹€ν–‰λ˜λ©΄, μƒˆλ‘œμš΄ μ»¨ν…μŠ€νŠΈλ₯Ό λ§Œλ“ λ‹€. 이 μ»¨ν…μŠ€λ₯Ό μŠ€νƒμ— μŒ“κ³ , μ œμ–΄κΆŒμ€ 이 μΆ”κ°€λœ μ»¨ν…μŠ€νŠΈμ— μ΄λ™λœλ‹€.

1. [global EC]
2. [global EC, foo() EC]
3. [global EC, foo() EC, bar() EC]
4. [global EC, foo() EC]
5. [global EC]
  • λͺ¨λ‘κ°€ μ•„λŠ” κ²ƒμ²˜λŸΌ, μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μŠ€νƒ ꡬ쑰닀. (LIFO)
  • μ „μ—­ μ»¨ν…μŠ€νŠΈλŠ” μ œμ–΄κΆŒμ΄ μ§„μž…ν•˜λ©΄ μƒμ„±λ˜κ³ , μ‹€ν–‰μ»¨ν…μŠ€νŠΈλŠ” μœ„μ²˜λŸΌ μƒμ„±λ˜κ³  λΉ μ§€κΈΈ λ°˜λ³΅ν•˜λ©°, μ „μ—­ μ»¨ν…μŠ€νŠΈλŠ” μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ’…λ£Œ μ‹œμ κΉŒμ§€ μœ μ§€λœλ‹€.
  • ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜λ©΄ ν•΄λ‹Ή ν•¨μˆ˜μ˜ μ»¨ν…μŠ€νŠΈλ₯Ό λ§Œλ“€κ³ , μ‹€ν–‰μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— μŒ“λŠ”λ‹€
  • ν•¨μˆ˜μ‹€ν–‰μ΄ λλ‚˜λ©΄ 이λ₯Ό pop()ν•˜κ³  이 직전 μ‹€ν–‰μ»¨ν…μŠ€νŠΈμ— μ œμ–΄κΆŒμ„ λ„˜κΈ΄λ‹€.

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ κ΅¬μ„±μš”μ†Œ

μ‹€ν–‰μ»¨ν…μŠ€νŠΈλŠ” 물리적으둜 객체의 ν˜•νƒœλ₯Ό κ°€μ§€λ©°, 3κ°€μ§€ ν”„λ‘œνΌν‹°λ₯Ό κ°€μ§€κ³  μžˆλ‹€.

  • Variable Object (λ³€μˆ˜κ°μ²΄)
  • Scope Chain (μŠ€μ½”ν”„ 체인)
  • this

Variable Object (λ³€μˆ˜κ°μ²΄)

μ‹€ν–‰μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜λ©΄, 싀행에 ν•„μš”ν•œ μ—¬λŸ¬μ •λ³΄λ₯Ό 담을 객체λ₯Ό μƒμ„±ν•˜λŠ”λ° 이λ₯Ό λ³€μˆ˜κ°μ²΄λΌκ³  ν•œλ‹€. λ³€μˆ˜κ°μ²΄λŠ” μ•„λž˜ μ„Έκ°€μ§€ 정보λ₯Ό λ‹΄λŠ”λ‹€.

  • λ³€μˆ˜
  • Parameter & Arguments
  • ν•¨μˆ˜ μ„ μ–Έ (μ˜€λ‘œμ§€ μ„ μ–Έλ§Œ)

νŒŒλΌλ―Έν„°λŠ” ν•¨μˆ˜μ— λ„˜κΈ°κ²Œλ  κ°’λ“€μ˜ aliasκ³ , argumentλŠ” parameter에 λ„˜κΈ°λŠ” 값을 μ˜λ―Έν•œλ‹€.

λ³€μˆ˜ κ°μ²΄λŠ”, μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ˜ ν”„λ‘œνΌν‹°μ΄κΈ° λ•Œλ¬Έμ— λ‹€λ₯Έ 객체λ₯Ό κ°€λ₯΄ν‚€λŠ” 값을 κ°–λŠ”λ‹€. 그리고 μ „μ—­ μ»¨ν…μŠ€νŠΈμ™€ ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈμ˜ κ²½μš°μ—λŠ” 각각 κ°€λ₯΄ν‚€λŠ” 객체가 λ‹€λ₯΄λ‹€. 예λ₯Ό λ“€μ–΄ ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈμ—λŠ” λ§€κ°œλ³€μˆ˜κ°€ μžˆλ‹€.

μ „μ—­ μ»¨ν…μŠ€νŠΈμ˜ λ³€μˆ˜ 객체

μ΅œμƒμœ„μ— 있으며, λͺ¨λ“  μ „μ—­ λ³€μˆ˜ 및 μ „μ—­ ν•¨μˆ˜λ“±μ„ ν¬ν•¨ν•˜λŠ” μ „μ—­ 객체 (Global Object)λ₯Ό κ°€λ₯΄ν‚¨λ‹€. μ „μ—­κ°μ²΄λŠ” 전역에 μ„ μ–Έλœ λͺ¨λ“  μ „μ—­ λ³€μˆ˜μ™€ μ „μ—­ν•¨μˆ˜λ₯Ό ν”„λ‘œνΌν‹°λ‘œ μ„ μ–Έν•œλ‹€.

μœ„ μ˜ˆμ œμ—μ„œ μ „μ—­μœΌλ‘œ μ„ μ–Έλœ 것은 ν•¨μˆ˜ 객체인 foo와 1의 값을 κ°€μ§„ xκ°€ 될 것이닀.

ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈμ˜ λ³€μˆ˜ 객체

ν•¨μˆ˜ μ»¨ν…μŠ€νŠΈμ˜ λ³€μˆ˜ κ°μ²΄λŠ” Activation Object(ν™œμ„± 객체)λ₯Ό 가리킀며, μΈμˆ˜λ“€μ˜ 정보λ₯Ό λ°°μ—΄λ‘œ λ‹΄κ³  μžˆλŠ” argument objectκ°€ μΆ”κ°€λœλ‹€.

foo()λ₯Ό 예둜 λ“€μ–΄λ³΄μž. λ³€μˆ˜ y, bar() 그리고 μ™ΈλΆ€μ—μ„œ νŒŒλΌλ―Έν„°λ₯Ό 톡해 전달 받은 argumentsκ°€ μΆ”κ°€λœλ‹€.

μŠ€μ½”ν”„ 체인 (Scope chain)

μ—¬κΈ°μ €κΈ°μ„œ μ–΄λ ΅κ²Œ μ„€λͺ…λ˜μ–΄ μžˆμ–΄μ„œ ν—·κ°ˆλ ΈλŠ”λ° - μŠ€μ½”ν”„μ²΄μΈμ€ μ „μ—­ λ˜λŠ” ν•¨μˆ˜κ°€ μ°Έμ‘°ν•  수 μžˆλŠ” λ³€μˆ˜, ν•¨μˆ˜μ„ μ–Έλ“±μ˜ 정보λ₯Ό λ‹΄κ³  μžˆλŠ” μ „μ—­κ°μ²΄λ‚˜ ν™œμ„±κ°μ²΄μ˜ 리슀트λ₯Ό λ§ν•œλ‹€.

말이 μ–΄λ €μš°λ‹ˆ, μ‰½κ²Œ 이야기 ν•΄λ³΄μž.

foo()ν•¨μˆ˜λŠ” μ•žμ„œ arguments, bar(), yλ₯Ό κ°€λ₯΄ν‚€κ³  μžˆλŠ” ν™œμ„±κ°μ²΄λ₯Ό λ³€μˆ˜κ°μ²΄λ‘œ κ°€μ§€κ³  μžˆλ‹€. μŠ€μ½”ν”„ 체인에 이 ν™œμ„±κ°μ²΄κ°€ λ“€μ–΄κ°€ μžˆλ‹€.

그리고 κ·Έ λ‹€μŒμœΌλ‘œ μƒμœ„ μ»¨ν…μŠ€νŠΈμ˜ ν™œμ„± 객체λ₯Ό κ°€λ₯΄ν‚€κ³  μžˆλ‹€. foo()의 μƒμœ„ κ°μ²΄λŠ” μ „μ—­ μ»¨ν…μŠ€νŠΈμ˜ λ³€μˆ˜κ°μ²΄μΈ μ „μ˜κ°μ²΄λ‹€.

결둠적으둜 foo()의 μŠ€μ½”ν”„μ²΄μΈμ€ 각각 foo()의 AO, 그리고 global의 GOλ₯Ό κ°€μ§€κ³  있게 λœλ‹€.

μ „μ—­ κ°μ²΄λŠ” μ–΄λ–¨κΉŒ? μ „μ—­ κ°μ²΄λŠ” κ°€μž₯ μ΅œμƒμœ„ μ΄λ―€λ‘œ, μ˜€λ‘œμ§€ GOλ§Œμ„ μŠ€μ½”ν”„μ²΄μΈμ— λ³΄κ΄€ν•˜κ²Œ λœλ‹€.

결둠적으둜, μŠ€μ½”ν”„ 체인은 λ³€μˆ˜ 객체λ₯Ό κ²€μƒ‰ν•˜λŠ” λ©”μ»€λ‹ˆμ¦˜μ΄λ‹€.

엔진은 μŠ€μ½”ν”„ 체인을 ν™œμš©ν•΄μ„œ λ ‰μ‹œμ»¬ μŠ€μ½”ν”„λ₯Ό νŒŒμ•…ν•œλ‹€. ν•¨μˆ˜κ°€ foo()처럼 μ€‘μ²©λ˜μ–΄ μžˆμ„λ•Œ, ν•˜μœ„ν•¨μˆ˜ μ•ˆμ—μ„œ μƒμœ„ν•¨μˆ˜, 심지어 μ „μ—­ μŠ€μ½”ν”„ κΉŒμ§€ μ°Έμ‘°ν•  수 μžˆλŠ”κ±΄ 이것은 μŠ€μ½”ν”„ 체인이 있기 λ•Œλ¬Έμ— κ°€λŠ₯ν•œ 것이닀. ν•¨μˆ˜ 싀행쀑에 λ³€μˆ˜λ₯Ό λ§Œλ‚˜λ©΄ κ·Έλ³€μˆ˜λ₯Ό ν˜„μž¬ μŠ€μ½”ν”„μΈ AOμ—μ„œ 검색해보고, 검색에 μ‹€νŒ¨ν•˜λ©΄ μŠ€μ½”ν”„μ²΄μΈμ˜ μˆœμ„œλŒ€λ‘œ ν•œλ‹¨κ³„μ”© μœ„λ‘œ 검색을 μ΄μ–΄κ°€κ²Œ λœλ‹€.

κ·ΈλŸ¬λ‚˜ μ΄λ ‡κ²Œ 순차적으둜 κ²€μƒ‰ν–ˆλŠ”λ° μ‹€νŒ¨ν•œλ‹€λ©΄, μ •μ˜λ˜μ§€ μ•ŠλŠ” λ³€μˆ˜μ— μ ‘κ·Όν•˜λŠ” κ²ƒμœΌλ‘œ μΈμ‹ν•˜κ³  잘 μ•„λŠ” μ—λŸ¬μΈ Referenceμ—λŸ¬κ°€ λ‚˜κ²Œ λœλ‹€.

μœ„μ˜ μ½”λ“œμ— debuggerλ₯Ό μΆ”κ°€ν•΄μ„œ 크둬 μ½˜μ†”μ—μ„œ 싀행해보면 μœ„μ—μ„œ μ„€λͺ…ν•œ λ‚΄μš©μ„ λ³Ό μˆ˜κ°€ μžˆλ‹€.

debugger

var x = 1

function foo() {
  console.log('foo arguments', arguments)
  var y = 2

  function bar() {
    var z = 3
    console.log(x + y + z)
  }
  bar()
}

foo()

./images/scope-chain.png

this

this ν”„λ‘œνΌν‹°μ—λŠ” this 값이 ν• λ‹Ήλœλ‹€. this 값은 ν•¨μˆ˜κ°€ μ–΄λ–»κ²Œ ν˜ΈμΆœλ˜λŠλƒμ— 따라 κ²°μ •λœλ‹€. this에 λŒ€ν•œ μžμ„Έν•œ μ΄μ•ΌκΈ°λŠ” λ‚˜μ€‘μ— 닀뀄보도둝 ν•˜μž.

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μ‹€ν–‰λ˜λŠ” κ³Όμ •

μ•„λž˜ μ½”λ“œλ₯Ό κΈ°μ€€μœΌλ‘œ μ‚΄νŽ΄λ³΄μž.

debugger

var x = 1

function foo(hello) {
  var h = arguments[0]
  var y = 2

  function bar() {
    var z = 3
    console.log(x + y + z)
  }
  bar()
}

foo('hello')

1. μ „μ—­ 객체 생성

./images/EC1.png

μœ„ μŠ€μƒ·μ—μ„œ λ³Ό 수 μžˆλŠ” κ²ƒμ²˜λŸΌ, μ „μ—­ 객체 (global object, μ—¬κΈ°μ„œλŠ” window)κ°€ μƒμ„±λœ 것을 λ³Ό 수 μžˆλ‹€. 그리고 이 객체에 μžˆλŠ” ν”„λ‘œνΌν‹°λŠ” μ–΄λ””μ—μ„œλ“  μ ‘κ·Όν•  수 μžˆλ‹€. 그리고 이 windowμ—λŠ” μ˜¨κ°– 빌트인 객체, DOM, BOM 등이 μ„€μ •λ˜μ–΄ μžˆλŠ” 것을 λ³Ό 수 μžˆλ‹€.

2. μ „μ—­ μ½”λ“œλ‘œ 컨트둀 μ§„μž…

μ „μ—­ μ½”λ“œλ‘œ 컨트둀이 μ§„μž…ν•˜λ©΄ 이제 μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³ , 이 μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈλŠ” μ‹€ν–‰ μ»¨ν…μŠ€νŠΈ μŠ€νƒμ— μŒ“μΈλ‹€.

ECStack = [globalContext -> {VO, SC, this}];

μ΄λ ‡κ²Œ 생긴 μ½”λ“œλŠ” μ—†μœΌλ‹ˆ κ·Έλƒ₯ λŠλ‚Œλ§Œ 보면 될것 κ°™λ‹€

2-1. μŠ€μ½”ν”„ 체인 생성 및 μ΄ˆκΈ°ν™”

μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λ˜κ³  κ°€μž₯ λ¨Όμ € ν•˜λŠ” 일은, μŠ€μ½”ν”„ 체인을 μƒμ„±ν•˜κ³  μ΄ˆκΈ°ν™” ν•˜λŠ” 것이닀. μ—¬κΈ°μ—μ„œλŠ” μ „μ—­ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈμ΄λ―€λ‘œ, μŠ€μ½”ν”„ 체인은 길이 1의 리슀트둜 Global Objectλ₯Ό κ°€λ₯΄ν‚€κ²Œ λœλ‹€.

2-2. λ³€μˆ˜ 객체화 (Variable Instantiation) μ‹€ν–‰

μˆœμ„œ

μŠ€μ½”ν”„ 체인이 μƒμ„±λ˜κ³  μ΄ˆκΈ°ν™” 되면 λ³€μˆ˜ 객체화가 μ‹€ν–‰λ˜λŠ”λ° μ΄λŠ” Value Object에 값을 μΆ”κ°€ν•˜λŠ” 것을 λ§ν•œλ‹€. μ „μ—­ μ½”λ“œμ˜ κ²½μš°μ—λŠ” Variable ObjectλŠ” 1λ²ˆμ—μ„œ μƒμ„±ν•˜κ³  2λ²ˆμ—μ„œ κ°€λ₯΄ν‚€λŠ” Global Objectλ‹€. 그리고 μ•„λž˜μ™€ 같은 μˆœμ„œλ‘œ 값을 μ„ΈνŒ…ν•œλ‹€.

  1. ν•¨μˆ˜μ½”λ“œμΈ 경우 parameterκ°€ value object의 ν”„λ‘œνΌν‹°λ‘œ, argumentκ°€ κ°’μœΌλ‘œ μ„€μ •λœλ‹€.
  2. ν•¨μˆ˜ 선언을 λŒ€μƒμœΌλ‘œ ν•¨μˆ˜λͺ…이 value object의 ν”„λ‘œνΌν‹°λ‘œ, μƒμ„±λœ ν•¨μˆ˜ 객체가 κ°’μœΌλ‘œ μ„€μ •λœλ‹€. = ν•¨μˆ˜μ˜ ν˜Έμ΄μŠ€νŒ…
  3. λ³€μˆ˜ 선언을 λŒ€μƒμœΌλ‘œ λ³€μˆ˜λͺ…이 value object의 ν”„λ‘œνΌν‹°λ‘œ, undefinedκ°€ κ°’μœΌλ‘œ μ„€μ •λœλ‹€. = λ³€μˆ˜μ˜ ν˜Έμ΄μŠ€νŒ…

./images/EC2.png

μœ„ μŠ€μƒ·μ„ 보자.

  • 1λ²ˆμ— λ”°λΌμ„œ hello νŒŒλΌλ―Έν„°μ˜ 값이 'hello' argument둜 μ„€μ •λ˜μ–΄ μžˆλ‹€.
  • 2λ²ˆμ— λ”°λΌμ„œ barκ°€ f bar()λ₯Ό κ°€λ₯΄ν‚€κ³  μžˆλ‹€.
  • 3λ²ˆμ— λ”°λΌμ„œ y, hκ°€ undefined둜 μ„ΈνŒ…λ˜μ–΄ μžˆλ‹€.

ν•¨μˆ˜ μ„ μ–Έμ˜ 처리

κ·Έ λ‹€μŒ λˆˆμ—¬κ²¨ 봐야 ν•  것은 ν•¨μˆ˜ μ„ μ–Έ μ²˜λ¦¬λ‹€. μƒμ„±λœ ν•¨μˆ˜ κ°μ²΄λŠ” [[Scopes]] ν”„λ‘œνΌν‹°λ₯Ό κ°–κ²Œ λœλ‹€. μ΄λŠ” ν•¨μˆ˜λ§Œμ΄ μ†Œμœ ν•˜λŠ” ν”„λ‘œνΌν‹°λ‘œ, ν•¨μˆ˜ 객체가 μ‹€ν–‰λ˜λŠ” ν™˜κ²½μ„ 가리킨닀.

./images/EC3.png

μ—¬κΈ°μ—μ„œ fooν•¨μˆ˜λŠ” [[Scopes]]둜 Global을 κ°€λ₯΄ν‚€κ³  μžˆλ‹€. 근데 잠깐, 이거 μ–΄λ””μ„œ 본것 같은데, μ‹Άμ—ˆλŠ”λ° μ—¬κΈ°μ„œ 0번의 Global은 μŠ€μ½”ν”„ 체인의 0λ²ˆμ— μžˆλŠ” Globalκ³Ό κ°™λ‹€. μš°λ¦¬λŠ” μ—¬κΈ°μ„œ [[Scopes]]κ°€ ν•¨μˆ˜ 객체가 μ‹€ν–‰λ˜λŠ” ν™˜κ²½μ„ κ°€μ§€κ³  μžˆλ‹€λŠ” 것을 μ•Œ 수 μžˆλ‹€.

λ‚΄λΆ€ ν•¨μˆ˜μ˜ [[Scopes]]λŠ” 결둠적으둜

  • ν˜„μž¬ μžμ‹ μ˜ μ‹€ν–‰ν™˜κ²½
  • μžμ‹ μ„ ν¬ν•¨ν•˜λŠ” μ™ΈλΆ€ν•¨μˆ˜μ˜ μ‹€ν–‰ν™˜κ²½
  • μ „μ—­ 객체

λ₯Ό κ°€λ₯΄ν‚€κ²Œ λœλ‹€. μ—¬κΈ°μ„œ μžμ‹ μ˜ μ‹€ν–‰ν™˜κ²½κ³Ό μ™ΈλΆ€ μ‹€ν–‰ν•¨μˆ˜μ˜ μ‹€ν–‰μ»¨ν…μŠ€νŠΈκ°€ μ†Œλ©Έν•΄λ„, [[Scopes]]κ°€ κ°€λ¦¬ν‚€λŠ” μ™ΈλΆ€ ν•¨μˆ˜μ˜ μ‹€ν–‰ν™˜κ²½μ€ μ†Œλ©Έλ˜μ§€ μ•Šκ³  μ°Έμ‘°ν•  수 μžˆλŠ”λ°, 이λ₯Ό 클둜져 라고 ν•œλ‹€.

ν•¨μˆ˜ 선언식은 (일반적인 function hello() {...}) ν•¨μˆ˜λͺ…을 ν”„λ‘œνΌν‹°λ‘œ ν•¨μˆ˜ 객체λ₯Ό ν• λ‹Ήν•œλ‹€. 그리고 VO에 ν•¨μˆ˜λͺ…을 ν”„λ‘œνΌν‹°λ‘œ μΆ”κ°€ν•˜κ³  μ¦‰μ‹œ ν• λ‹Ήν•œλ‹€.

κ·ΈλŸ¬λ‚˜ ν•¨μˆ˜ ν‘œν˜„μ‹μ€ const hello = function () {...} 일반적인 λ³€μˆ˜μ˜ 방식을 λ”°λ₯Έλ‹€. λ”°λΌμ„œ 선언식은 ν•¨μˆ˜λ₯Ό μ„ μ–Έν•˜κΈ° 이전에 ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  수 μžˆλ‹€.

이것을 ν•¨μˆ˜μ˜ ν˜Έμ΄μŠ€νŒ…μ΄λΌκ³  ν•œλ‹€.

λ³€μˆ˜ μ„ μ–Έμ˜ 처리

λ³€μˆ˜ 선언을 μ„ΈλΆ„ν™” ν•˜λ©΄ μ•„λž˜μ™€ κ°™λ‹€.

  • 선언단계: λ³€μˆ˜κ°μ²΄μ— λ³€μˆ˜λ₯Ό λ“±λ‘ν•œλ‹€. λ³€μˆ˜κ°μ²΄λŠ” 이제 μŠ€μ½”ν”„κ°€ μ°Έμ‘°ν•  수 있게 λœλ‹€
  • μ΄ˆκΈ°ν™” 단계: λ³€μˆ˜κ°μ²΄μ— λ“±λ‘λœ λ³€μˆ˜λ₯Ό λ©”λͺ¨λ¦¬μ— ν• λ‹Ήν•œλ‹€. λ³€μˆ˜λŠ” undefined둜 μ„ μ–Έλœλ‹€.
  • 할당단계: undefined둜 μ΄ˆκΈ°ν™” 된 λ³€μˆ˜μ— μ‹€μ œ 값을 ν• λ‹Ήλœλ‹€.

var ν‚€μ›Œλ“œλŠ” μ„ μ–Έκ³Ό μ΄ˆκΈ°ν™”κ°€ ν•œλ²ˆμ— 이루어진닀. 즉 λ³€μˆ˜λ“±λ‘κ³Ό μ΄ˆκΈ°ν™”κ°€ ν•œλ²ˆμ— 이루어진닀. λ”°λΌμ„œ λ³€μˆ˜ μ„ μ–Έ 이전에 μ ‘κ·Όν•˜μ—¬λ„ Variable Object에 λ³€μˆ˜κ°€ 이미 μ‘΄μž¬ν•˜κ³  있기 λ•Œλ¬Έμ— μ—λŸ¬κ°€ λ°œμƒν•˜μ§€ μ•Šκ³  undefinedκ°€ λ¦¬ν„΄λœλ‹€.

이λ₯Ό λ³€μˆ˜μ˜ ν˜Έμ΄μŠ€νŒ…μ΄λΌκ³  ν•œλ‹€.

μ „μ—­ μ½”λ“œμ˜ μ‹€ν–‰

μ½”λ“œ 싀행을 μœ„ν•œ μ€€λΉ„κ°€ λλ‚¬μœΌλ―€λ‘œ, 이제 μ½”λ“œκ°€ μ‹€ν–‰λœλ‹€.

var x = 1

function foo(hello) {
  var h = arguments[0]
  var y = 2

  function bar() {
    var z = 3
    console.log(x + y + z)
  }
  bar()
}

foo('hello')

μœ„ μ˜ˆμ œμ—μ„œλŠ” μ „μ—­λ³€μˆ˜ x에 숫자 ν• λ‹Ήκ³Ό, ν•¨μˆ˜ foo()의 호좜이 μ‹€ν–‰λœλ‹€.

λ³€μˆ˜μ— κ°’ ν• λ‹Ή

μ „μ—­λ³€μˆ˜ x에 숫자λ₯Ό ν• λ‹Ήν•˜κΈ° μœ„ν•΄μ„œ, μ‹€ν–‰ μ»¨ν…μŠΉνŠΈλŠ” μŠ€μ½”ν”„μ²΄μΈμ΄ μ°Έκ³ ν•˜κ³  μžˆλŠ” Variable Objectλ₯Ό κ²€μƒ‰ν•˜κΈ° μ‹œμž‘ν•œλ‹€. xλ₯Ό λ°œκ²¬ν•˜λ©΄ κ°’ xxxλ₯Ό ν• λ‹Ήν•œλ‹€.

ν•¨μˆ˜μ˜ μ‹€ν–‰

그리고 ν•¨μˆ˜ foo()λ₯Ό μ‹€ν–‰ν•˜κ²Œ λœλ‹€. ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜κΈ° μ‹œμž‘ν•˜λ©΄, μƒˆλ‘œμš΄ ν•¨μˆ˜ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λœλ‹€. 이와 λ™μ‹œμ— 컨트둀이 ν•¨μˆ˜ foo둜 μ΄λ™ν•˜λ©΄μ„œ, μ „μ—­ μ½”λ“œμ™€ λ§ˆμ°¬κ°€μ§€λ‘œ

  1. μŠ€μ½”ν”„ 체인의 생성 및 μ΄ˆκΈ°ν™”
  2. Variable Instantiation μ‹€ν–‰
  3. this value κ²°μ •

이 순차적으둜 μ‹€ν–‰λœλ‹€. μ•žμ„œ λ§ν•œ κ²ƒμ²˜λŸΌ ν•œκ°€μ§€ 차이점은 - μ „μ—­μ½”λ“œκ°€ μ•„λ‹Œ ν•¨μˆ˜μ½”λ“œλΌλŠ” 점이닀.

μŠ€μ½”ν”„ 체인 생성 및 μ΄ˆκΈ°ν™”

μš°μ„  Activation Object에 λŒ€ν•œ 레퍼런슀λ₯Ό μŠ€μ½”ν”„ 체인에 μΆ”κ°€ν•˜λŠ” κ²ƒμœΌλ‘œ μ‹œμž‘λœλ‹€. κ°€μž₯ λ¨Όμ € arguments ν”„λ‘œνΌν‹°λ₯Ό μ΄ˆκΈ°ν™” ν•œν›„, κ·Έλ‹€μŒμ— Variable Instantiation이 μ‹€ν–‰λœλ‹€.

κ·Έ ν›„, μŠ€μ½”ν”„μ²΄μΈμ΄ μ°Έμ‘°ν•˜κ³  μžˆλŠ” 객체가 μŠ€μ½”ν”„ 체인에 μΆ”κ°€λ‘œ μΆ”κ°€λœλ‹€. 이 κ²½μš°μ—λŠ” μŠ€μ½”ν”„μ²΄μΈμ— μ•žμ„œ μΆ”κ°€ν•œ Activation Object와 λ‘λ²ˆμ§Έλ‘œ Global Objectλ₯Ό 순차적으둜 μ°Έμ‘°ν•˜κ²Œ λœλ‹€.

Variable Instantiation μ‹€ν–‰

μ•žμ„œ λ§Œλ“  Activation Objectλ₯Ό Variable Objectλ‘œμ„œ μ‹€ν–‰λœλ‹€.

λ¨Όμ € fooν•¨μˆ˜ μ•ˆμ— μžˆλŠ” barλ₯Ό λ°”μΈλ”©ν•œλ‹€. 그리고 이 λ•Œ bar의 [[Scopes]]의 값은 GO와 AOλ₯Ό μ°Έμ‘°ν•˜λŠ” λ¦¬μŠ€νŠΈκ°€ λœλ‹€.

λ³€μˆ˜ yλ₯Ό Variable Object에 μ„€μ •ν•œλ‹€. 이 λ•Œ ν”„λ‘œνΌν‹°μ˜ 값은 y, 값은 undefined λ‹€.

this κ²°μ •

thisλŠ” ν•¨μˆ˜ 호좜 νŒ¨ν„΄μ— μ˜ν•΄ κ²°μ •λœλ‹€. λ‚΄λΆ€ ν•¨μˆ˜λŠ”, this λŠ” μ „μ—­ 객체닀.

foo ν•¨μˆ˜μ˜ μ‹€ν–‰

κ°’ ν• λ‹Ή

y에 2λ₯Ό ν• λ‹Ήν•˜κΈ° μœ„ν•΄, μŠ€μ½”ν”„ 체인을 νƒμƒ‰ν•˜λ©΄μ„œ κ²€μƒ‰ν•œλ‹€. λ³€μˆ˜λͺ… y에 ν•΄λ‹Ήν•˜λŠ” ν”„λ‘œνΌν‹°κ°€ 발견되면 2λ₯Ό ν• λ‹Ήν•œλ‹€.

bar ν•¨μˆ˜μ˜ μ‹€ν–‰

barν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•˜κΈ° μ‹œμž‘ν•˜λ©΄, μƒˆλ‘œμš΄ μ‹€ν–‰ μ»¨ν…μŠ€νŠΈκ°€ μƒμ„±λœλ‹€.μ—¬κΈ°μ„œλ„ μ—­μ‹œ λ§ˆμ°¬κ°€μ§€λ‘œ μŠ€μ½”ν”„ 체인 생성 및 μ΄ˆκΈ°ν™”, Variable Instantiation μ‹€ν–‰, this value 결정이 순차적으둜 μ‹€ν–‰λœλ‹€.

./images/EC/EC.001.jpeg ./images/EC/EC.002.jpeg ./images/EC/EC.003.jpeg ./images/EC/EC.004.jpeg ./images/EC/EC.005.jpeg ./images/EC/EC.006.jpeg ./images/EC/EC.007.jpeg ./images/EC/EC.008.jpeg ./images/EC/EC.009.jpeg ./images/EC/EC.010.jpeg ./images/EC/EC.011.jpeg ./images/EC/EC.012.jpeg ./images/EC/EC.013.jpeg ./images/EC/EC.014.jpeg ./images/EC/EC.015.jpeg ./images/EC/EC.016.jpeg ./images/EC/EC.017.jpeg ./images/EC/EC.018.jpeg ./images/EC/EC.019.jpeg ./images/EC/EC.020.jpeg ./images/EC/EC.021.jpeg ./images/EC/EC.022.jpeg ./images/EC/EC.023.jpeg ./images/EC/EC.024.jpeg ./images/EC/EC.025.jpeg ./images/EC/EC.026.jpeg ./images/EC/EC.027.jpeg ./images/EC/EC.028.jpeg ./images/EC/EC.029.jpeg ./images/EC/EC.030.jpeg ./images/EC/EC.031.jpeg ./images/EC/EC.032.jpeg