ES6 Execution Context ๐Ÿคฏ

geuni1013ยท2019๋…„ 7์›” 1์ผ
0

Execution Context

๋ชฉ๋ก ๋ณด๊ธฐ
1/1
post-thumbnail

์•„๋ž˜ ํŽ˜์ด์ง€๋ฅผ ์ฐธ์กฐ ํ–ˆ์Šต๋‹ˆ๋‹ค.

https://meetup.toast.com/posts/129
https://poiemaweb.com/es6-block-scope

A. Execution Context๋ž€?

์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ํ˜•์ƒํ™”ํ•˜๊ณ  ๊ตฌ๋ถ„ํ•˜๋Š” ์ถ”์ƒ์ ์ธ ๊ฐœ๋…์ด๋ผ๊ณ  ์ •์˜ํ•œ๋‹ค. ์ข€ ๋” ์‰ฝ๊ฒŒ ๋งํ•˜์ž๋ฉด ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์œ„ํ•ด ํ•„์š”ํ•œ ํ™˜๊ฒฝ
poiemaweb ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์™€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋™์ž‘ ์›๋ฆฌ

์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ ํ˜•์ƒํ™”ํ•  ๋•Œ, ํ˜•์ƒํ™”๋˜๋Š” ์ฝ”๋“œ์˜ ๋‹จ์œ„๋Š”?

  • Global Code
  • Function Code
  • Eval Code

์œ„์™€ ๊ฐ™์ด ๊ตฌ๋ถ„ํ•˜๋Š” ์ด์œ ๋Š”?

๊ฐ๊ฐ์˜ ๋‹จ์œ„๋งˆ๋‹ค Execution Context๋ฅผ ์ƒ์„ฑํ•˜๋Š”๋ฐ, ์ด ๋•Œ ์ดˆ๊ธฐํ™”(Initalizing) ํ•˜๋Š” ๋ฐฉ์‹์ด ๋‹ค๋ฆ…๋‹ˆ๋‹ค.

  • Global Code -> Initalizing A
  • Function Code -> Initalizing B
  • Eval Code -> Initalizing C

์–ด๋–ค ์‹œ์ ์— ์ƒ์„ฑ๋˜๋Š”๊ฒƒ์ธ๊ฐ€?

Javascript ์—”์ง„์ด ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ํ‰๊ฐ€ํ•  ๋•Œ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค.

Execution Context์˜ ๋ชจ์Šต์€?

B. LexicalEnvironment?

ํ˜•ํƒœ

environmentRecord๋Š” ์‹๋ณ„์ž/๊ฐ’ ๋ชจ์Œ์ž…๋‹ˆ๋‹ค.
Javascript ์—”์ง„์ด environmentRecord๋ฅผ ์ดˆ๊ธฐํ™” ํ• ๋•Œ ์ˆœ์„œ๊ฐ€ ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

1. ์„ ์–ธ ๋‹จ๊ณ„
2. ์‹คํ–‰ ๋‹จ๊ณ„

var ํ‚ค์›Œ๋“œ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๊ฒฝ์šฐ ์‹๋ณ„์ž์˜ ๋“ฑ๋ก๊ณผ ํ•จ๊ป˜ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•˜๊ณ , undefined๋กœ ์ดˆ๊ธฐํ™” ๋˜๋Š” ๋ฐ˜๋ฉด,
let/const ํ‚ค์›Œ๋“œ๋กœ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๊ฒฝ์šฐ ์‹๋ณ„์ž๋งŒ record์— ๋“ฑ๋ก ๋˜๊ณ , ํ•ด๋‹น ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์ดˆ๊ธฐํ™”์™€ ํ•จ๊ป˜ ๊ฐ’์ด ํ• ๋‹น๋จ์œผ๋กœ ์ธํ•ด, ์‹คํ–‰ ๋˜๊ธฐ์ „์—๋Š” ์‹๋ณ„์ž๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.

C. Outer?

๊ฐ’

outer ํ”„๋กœํผํ‹ฐ๋Š” ํ˜„์žฌ Execution Context๋ฅผ ์ƒ์„ฑํ•ด๋‚ธ Execution Context๋ฅผ ์ฐธ์กฐํ•ฉ๋‹ˆ๋‹ค.
ํ˜„์žฌ EC๊ฐ€ ์ƒ์„ฑํ•ด๋‚ธ EC ๋ฐ์ดํ„ฐ๋Š” [[Scopes]] ๋ผ๋Š” ๋‚ด๋ถ€ ๋ฉ”์†Œ๋“œ(Internal Method)์— ๋‹ด๊ฒจ์ ธ ์žˆ์Šต๋‹ˆ๋‹ค.

์ถœ๋ ฅ
แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 2019-07-01 แ„‹แ…ฉแ„’แ…ฎ 4.13.42.png
foo ํ•จ์ˆ˜์˜ EC์˜ outer ํ”„๋กœํผํ‹ฐ๋Š” [[Scopes]] ๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ Global EC๋กœ ๋ฐ”์ธ๋”ฉ ํ•ฉ๋‹ˆ๋‹ค.

์“ฐ์ž„

๊ทธ๋ฆฌ๊ณ  ์ด outer ํ”„๋กœํผํ‹ฐ๋กœ ์ค‘์ฒฉ๋œ Context์—์„œ ์‹๋ณ„์ž๋ฅผ ์ฐพ์•„๋ƒ…๋‹ˆ๋‹ค.
์ด๋ฅผ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ช…์นญํ•ฉ๋‹ˆ๋‹ค.

  • ES3
    - Scope Chain
  • ES6
    - Lexical nesting structure
    - Logical nesting of Lexical Environment values

ES3์™€ ES6์˜ ๋ช…์นญ์ด ๋‹ค๋ฅธ์ ์€ ์„œ๋กœ ์ค‘์ฒฉ๋œ EC๋ฅผ ์ฐธ์กฐํ•˜๋Š” ๋ฐฉ์‹์ด ๋‹ฌ๋ผ์„œ ์ด์ง€ ์•Š์„๊นŒ ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค..

ES3 : List ๊ตฌ์กฐ๋กœ ์ค‘์ฒฉ๋œ EC์˜ ์ฐธ์กฐ๋ฅผ ๊ด€๋ฆฌํ•จ.
ES6 : outer ํ”„๋กœํผํ‹ฐ๋กœ ์ง์ ‘ ํ˜„์žฌ EC์˜ ์ƒ์œ„ EC๋ฅผ ์ฐธ์กฐํ•จ.

์‹๋ณ„์ž ํƒ์ƒ‰ ๋ฐฉ์‹

๐Ÿ˜“๐Ÿ˜“์ถ”๊ฐ€๋กœ ์—…๋ฐ์ดํŠธ ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค..๐Ÿ˜“๐Ÿ˜“

profile
๊ฒŒ์„๋Ÿฌ์ง€๊ณ ์‹ถ์€ ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€