๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- HTML,css,Javascript

[Javascript-Core] Execution Context, ์‹คํ–‰ ๋ฌธ๋งฅ์— ๊ด€ํ•˜์—ฌ ์•Œ์•„๋ณด์ž.

by Wonit 2020. 7. 27.

Execution Context

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์‹คํ–‰ํ•  ์ฝ”๋“œ์— ํ•„์š”ํ•œ ํ™˜๊ฒฝ ์ •๋ณด๋ฅผ ๋ชจ์€ ๊ฐ์ฒด๋ฅผ ๋œปํ•œ๋‹ค.


์ด๋Š”, OS๋ฅผ ํ•™์Šตํ•˜๋‹ค๊ฐ€ ๋งˆ์ฃผํ•˜๊ฒŒ ๋˜๋Š” ์‹คํ–‰ ๋ฌธ๋งฅ, ์‹คํ–‰ ์ปจํ…์ŠคํŠธ, ์ต์Šคํ์…˜ ์ปจํ…์ŠคํŠธ์™€ ๋‹ค๋“ค ๋™์ผํ•œ ๊ฐœ๋…์ด๋‹ค.

 

์กฐ๊ธˆ ์‰ฝ๊ฒŒ ์ด์•ผ๊ธฐ ํ•œ๋‹ค๋ฉด


์˜ˆ๋ฅผ ๋“ค์–ด์„œ ์šฐ๋ฆฌ๊ฐ€

var a = 10;
function hello() {
  var b = "hello";
  return b;
}

์™€ ๊ฐ™์€ ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค๋ฉด ์—ฌ๊ธฐ์„œ ์‹คํ–‰์— ํ•„์š”ํ•œ ํ™˜๊ฒฝ ์ •๋ณด๋Š”

 

var a = 10๊ณผ hello()ํ•จ์ˆ˜์™€ var b = 'hello'๊ฐ€ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

 

์‹๋ณ„์ž์™€ ๋ณ€์ˆ˜๋“ฑ๊ณผ ๊ฐ™์€ ์ •๋ณด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ  ์žˆ๋Š” ๊ฐ์ฒด๋ฅผ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ผ๊ณ  ํ•œ๋‹ค.


์ด๋Ÿฐ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์ฝœ ์Šคํƒ์— ์˜ํ•ด ์‹คํ–‰ ํ™˜๊ฒฝ์— ๋Œ€ํ•œ ์ˆœ์„œ๋ฅผ ๋ณด์žฅํ•˜๋Š”๋ฐ, ์ˆœ์ฐจ์ ์œผ๋กœ ์ฝ”๋“œ๋ฅผ Interpreting ํ•˜๋ฉด์„œ ์ฝœ์Šคํƒ์— ์ถ”๊ฐ€ํ•œ๋‹ค.


๊ทธ ๋ง์€ ์ฆ‰, ์ฝœ์Šคํƒ์— ๊ฐ€์žฅ ์œ„์— ์žˆ๋Š” ๋ถ€๋ถ„์ด ์šฐ๋ฆฌ๊ฐ€ ํ˜„์žฌ ์‹คํ–‰ํ•  ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์ž„์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ๊ธฐ๋ ค๋ฉด?

๊ทธ๋Ÿผ ์–ด๋–ค ์ •๋ณด๋“ค์ด ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ๋ ๊นŒ?

 

ํ•˜๋‚˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ๋ณดํ†ต ์šฐ๋ฆฌ๋Š” ์ „์—ญ ๊ณต๊ฐ„, eval()ํ•จ์ˆ˜, ์ผ๋ฐ˜ ํ•จ์ˆ˜๋ฅผ ํ•˜๋‚˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ผ๊ณ  ํ•˜๋Š”๋ฐ ์ „์—ญ ๊ณต๊ฐ„๊ณผ eval()์€ ์ฝ”๋“œ์˜ ์‹คํ–‰์ด ๋œ๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์ž๋™์ ์œผ๋กœ ๋งŒ๋“ค๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.


ํ•จ์ˆ˜ ์ปจํ…์ŠคํŠธ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์šฐ๋ฆฌ๊ฐ€ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค๋ฉด ํ•จ์ˆ˜์— ๋Œ€ํ•œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ๊ฒผ๋‹ค๊ณ  ๋ณด๋Š” ๊ฒƒ์ด๋‹ค.


๊ทธ๋ž˜์„œ ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“ค๊ฒŒ ๋  ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜๋ฟ์ด๋‹ค.

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์œ„ํ•ด js ์—”์ง„์ด ๊ฐ–๋Š” ๊ฐ์ฒด

ํ•˜๋‚˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” js๊ฐ€ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ฒƒ๋“ค์„ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ ํ™˜๊ฒฝ ์ •๋ณด๋ฅผ ๊ฐ์ฒด๋กœ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ์ €์žฅํ•œ๋‹ค.

 

  1. variableEnvironment : ํ˜„์žฌ ์ปจํ…์ŠคํŠธ์˜ ๋ณ€์ˆ˜, ์‹๋ณ„์ž ๋“ฑ์„ ์ตœ์ดˆ์˜ ์ƒํƒœ์ธ ์Šค๋ƒ…์ƒท์œผ๋กœ ์ €์žฅํ•˜๋Š”๋ฐ, Lexical์œผ๋กœ ์Šค๋ƒ…์ƒท์„ ๊ตฌ์„ฑํ•œ๋‹ค.
  2. LexicalEnvironment : VariableEnvironment์™€ ๋™์ผํ•˜์ง€๋งŒ ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์ ์šฉ๋œ๋‹ค.
  3. ThisBinding : ์‹๋ณ„์ž๊ฐ€ ๋ฐ”๋ผ๋ณด์•„์•ผํ•  ๋Œ€์ƒ ๊ฐ์ฒด๋ฅผ ์ง€์ •ํ•œ๋‹ค.

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ™œ์„ฑํ™” ๋œ๋‹ค๋ฉด

์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ™œ์„ฑํ™” ๋˜๋ฉด 2๊ฐ€์ง€ ๋‹จ๊ณ„๋ฅผ ๋งž์ดํ•œ๋‹ค.

  1. Creation Phase
  2. Execution Phase

Creatino Phase์— ๋Œ€ํ•ด์„œ๋Š” ์•„๋ž˜์—์„œ ์ด์•ผ๊ธฐ ํ•  ๋ถ€๋ถ„์ด๊ณ , Execution Phase๋Š” ์‹ค์ œ๋กœ ์‹คํ–‰ํ•˜๋Š” ๋‹จ๊ณ„์ด๋ฏ€๋กœ ์ถฉ๋ถ„ํ•œ ์„ค๋ช…์ด ์•„๋‹ˆ๋”๋ผ๋„ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

 

ํ•˜์ง€๋งŒ Creation Phase๋Š” ์ดํ•ด๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์ด ์กฐ๊ธˆ ์žˆ๋‹ค. ๋ฐ”๋กœ ๋“ค์–ด๊ฐ€๋ณด์ž.

ExecutionContextES6 = {
  LexicalEnvironment = <ref. to LexicalEnvironment in memory>,
  VariableEnvironment = <ref. to VariableEnvironment in  memory>,
}

์œ„์—์„œ ThisBinding์ด ์ƒ๋žต๋˜์—ˆ๋Š”๋ฐ, ES6์—์„œ๋Š” LexicalEnvrionment ๊ณผ์ •์— ํฌํ•จ๋œ๋‹ค.

 

์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๋Š” LexicalEnvironment์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.


LexicalEnvironment์€ ์‹คํ–‰์ด ๋œ๋‹ค๋ฉด 3๊ฐ€์ง€ ์ผ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

  • EnvironmentRecord
  • ReferenceToTheOuterEnvironment
  • ThisBinding

EnvironmentRecord

๋ณ€์ˆ˜์™€ ์‹๋ณ„์ž, ์ธ์ˆ˜์— ๋Œ€ํ•œ ์—ฌ๋Ÿฌ ์ •๋ณด๋ฅผ ์ €์žฅํ•œ๋‹ค.


์ด ๊ณผ์ •์„ ๊ฑฐ์ณ์•ผ ํ•ด๋‹น ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์—์„œ ์‚ฌ์šฉํ•˜๊ฒŒ๋  ํ™˜๊ฒฝ๋“ค์„ ๊ตฌ์„ฑํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ๋งˆ์น˜ ์‚ฌ์ „ ๋‹ต์‚ฌ? ๊ฐ™์€ ๋Š๋‚Œ์ด ๋“ ๋‹ค.

ReferenceToTheOuterEnvironment

๋งŒ์•ฝ EnvironmentRecord์—์„œ ๋ณ€์ˆ˜์™€ ์‹๋ณ„์ž, ์ธ์ˆ˜์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ฐพ์ง€ ๋ชปํ•  ๋•Œ, ์ƒ์œ„ ์ปจํ…์ŠคํŠธ์— ์ ‘๊ทผํ•ด์„œ ์ฐพ๋Š” ์ผ์„ ์ˆ˜ํ–‰ํ•œ๋‹ค.

ThisBinding

์‹ค์ œ๋กœ this์˜ ๊ฐ’์ด ๊ฒฐ์ •๋˜๋Š” ๋ถ€๋ถ„์ด๋‹ค. this์— ๊ด€ํ•œ ๋‚ด์šฉ์€ ์ด์•ผ๊ธฐํ•  ๋ถ€๋ถ„์ด ๋งŽ๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค์Œ ํฌ์ŠคํŒ…์—์„œ ์ž์„ธํžˆ ๋“ค์–ด๊ฐ€๋ณด์ž.

 

 


์ด๋ ‡๊ฒŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์˜ ์ผ๋ถ€๋ฅผ ์šฐ๋ฆฌ๋Š” ์˜ค๋Š˜ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

์ด๋Ÿฐ ๊ณผ์ •์ด ์‚ฌ์‹ค ๊ฐœ๋ฐœ์„ ํ•˜๋Š”๋ฐ์— ์žˆ์–ด ํฌ๊ฒŒ ์ž‘์šฉํ• ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐ์„ ํ•˜์ง„ ์•Š์ง€๋งŒ ๊ฐœ๋ฐœ์ž๋กœ์จ ๋งค์ผ๋งค์ผ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์ด ํƒ„์ƒํ•˜๊ณ  ๊ธ‰๋ณ€ํ•˜๋Š” ์‹œ๋Œ€์— ์ต์ˆ™ํ•œ ์–ธ์–ด๋กœ ๊ฐœ๋ฐœ์„ ๋Šฅ์ˆ™ํ•˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•„๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋‹ˆ๋ผ, ์ƒˆ๋กœ์šด ํ™˜๊ฒฝ์—์„œ๋„ ๋น ๋ฅด๊ฒŒ ์ ์‘ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜์–ด์•ผ ํ•œ๋‹ค.

๋Œ“๊ธ€