๐Ÿฏ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ

Aprilยท2021๋…„ 7์›” 10์ผ
0

โœจJavascript

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

๊ฐœ์ธ ๊ณต๋ถ€๋ฅผ ์œ„ํ•ด ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค

๋ชจ๋“  ์ฝ”๋“œ๋Š” ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ™œ์„ฑํ™” ์ƒํƒœ์ผ ๋•Œ ์‹คํ–‰๋œ๋‹ค.


์‹คํ–‰ ์ปจํ…์ŠคํŠธ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์–ด๋–ค ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ™œ์„ฑํ™”๋˜๋Š” ์‹œ์ ์—

  • ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋ฅผ ์œ„๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๊ณ (ํ˜ธ์ด์ŠคํŒ… hoisting)
  • ์™ธ๋ถ€ ํ™˜๊ฒฝ ์ •๋ณด๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ 
  • this ๊ฐ’์„ ์„ค์ •ํ•˜๋Š” ๋“ฑ์˜ ๋™์ž‘์„ ์ˆ˜ํ–‰

ํ•˜๋Š”๋ฐ, ์ด๋กœ ์ธํ•ด ๋‹ค๋ฅธ ์–ธ์–ด์—์„œ๋Š” ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์—†๋Š” ํŠน์ดํ•œ ํ˜„์ƒ๋“ค์ด ๋ฐœ์ƒํ•œ๋‹ค.


์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ž€?

execution context
์‹คํ–‰ํ•  ์ฝ”๋“œ์— ํ™˜๊ฒฝ ์ •๋ณด๋“ค์„ ๋ชจ์•„๋†“์€ ๊ฐ์ฒด

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ€์žฅ ์ค‘์š”ํ•œ ๊ฐœ๋…
  • ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•  ๋•Œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ๊ตฌ์„ฑ๋จ
  • ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋  ๋•Œ call stack์— ์Œ“์•„์˜ฌ๋ ค ์ฝ”๋“œ์˜ ํ™˜๊ฒฝ๊ณผ ์ˆœ์„œ๋ฅผ ๋ณด์žฅํ•จ

๐Ÿ’กStack๊ณผ Queueโ“

  • Stack : FILO(First In Last Out), LIFO(Last In First Out)
  • Queue : FIFO(First In First Out), LILO(Last In Last Out)

์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ ๊ตฌ์„ฑ

  • ์ „์—ญ ๊ณต๊ฐ„ โ†’ ์ž๋™์œผ๋กœ ์ƒ์„ฑ
  • eval() ํ•จ์ˆ˜ โ†’ ์‚ฌ์šฉ์„ ๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ
  • ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ โ†’ ๊ฐ€์žฅ ํ”ํ•œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๊ตฌ์„ฑ ๋ฐฉ๋ฒ•
  • ES6 ๋ถ€ํ„ฐ๋Š” ๋ธ”๋ก{ }์— ์˜ํ•ด์„œ๋„ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ƒ์„ฑ

:: ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์™€ ์ฝœ ์Šคํƒ ์˜ˆ์ œ

// ------------------- (1)
var a = 1;
function outer() {
  function inner() {
    console.log(a); // undefined
    var a = 3;
  }
  inner(); // -------- (2)
  console.log(a); // 1
}
outer(); // ---------- (3)
console.log(a); // 1

์œ„ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ์ˆœ๊ฐ„
(1)์ „์—ญ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ฝœ ์Šคํƒ์— ๋‹ด๊ธด๋‹ค.

  • ์ „์—ญ ์ปจํ…์ŠคํŠธ๋ผ๋Š” ๊ฐœ๋…์€ ์ผ๋ฐ˜์ ์ธ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์™€ ํŠน๋ณ„ํžˆ ๋‹ค๋ฅผ ๊ฒƒ์ด ์—†๋‹ค.
  • ๋ณ„๋„์˜ ์‹คํ–‰ ๋ช…๋ น์ด ์—†์–ด๋„ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž๋™์œผ๋กœ ์‹คํ–‰๋œ๋‹ค.

๊ทธ ์ดํ›„ ์ฝ”๋“œ๋“ค์„ ์ˆœ์ฐจ๋กœ ์ง„ํ–‰ํ•˜๋‹ค๊ฐ€
(3)์—์„œ outerํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€

  • outer์— ๋Œ€ํ•œ ํ™˜๊ฒฝ ์ •๋ณด๋ฅผ ์ˆ˜์ง‘
  • outer ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋ฅผ ์ƒ์„ฑํ•œ ํ›„ ์ฝœ ์Šคํƒ์— ๋‹ด๋Š”๋‹ค

์ด ๋•Œ, ์ฝœ ์Šคํƒ ๋งจ ์œ„์— outer์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ๋†“์ธ ์ƒํƒœ์ด๋ฏ€๋กœ ์ „์—ญ ์ปจํ…์ŠคํŠธ์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ์˜ ์‹คํ–‰์„ ์ผ์‹œ ์ค‘๋‹จํ•˜๊ณ  outer ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ(์ฆ‰, outerํ•จ์ˆ˜ ๋‚ด๋ถ€ ์ฝ”๋“œ)๋“ค์„ ์ˆœ์ฐจ๋กœ ์‹คํ–‰ํ•œ๋‹ค.

๋‹ค์‹œ (2)์—์„œ innerํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ์ฝœ ์Šคํƒ ๊ฐ€์žฅ ์ƒ์œ„์— ๋‹ด๊ธฐ๋ฉด outer ์ปจํ…์ŠคํŠธ์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ์˜ ์‹คํ–‰์„ ์ค‘๋‹จํ•˜๊ณ  inner ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ ์ฝ”๋“œ๋“ค์„ ์ˆœ์„œ๋Œ€๋กœ ์ง„ํ–‰ํ•œ๋‹ค.

์ด๋ ‡๊ฒŒ ์–ด๋–ค ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ™œ์„ฑํ™”๋  ๋•Œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ํ•ด๋‹น ์ปจํ…์ŠคํŠธ์— ๊ด€๋ จ๋œ ์ฝ”๋“œ๋“ค์„ ์‹คํ–‰ํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ํ™˜๊ฒฝ ์ •๋ณด๋“ค์„ ์ˆ˜์ง‘ํ•ด์„œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๊ฐ์ฒด์— ์ €์žฅํ•œ๋‹ค.
์ด ๊ฐ์ฒด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ํ™œ์šฉํ•  ๋ชฉ์ ์„ ์ƒ์„ฑ๋  ๋ฟ, ๊ฐœ๋ฐœ์ž๊ฐ€ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ํ™•์ธ์€ ํ•  ์ˆ˜ ์—†๋‹ค.


ํ™œ์„ฑํ™” ๋œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๊ฐ์ฒด์˜ ์ˆ˜์ง‘ ์ •๋ณด

1. VariableEnvironment

์ตœ์ดˆ ์‹คํ–‰ ์‹œ์˜ ์Šค๋ƒ…์ƒท์„ ์œ ์ง€. VariableEnvironment์˜ ์ •๋ณด๋ฅผ ๋ณต์‚ฌํ•ด์„œ LexicalEnvironment๋ฅผ ์ƒ์„ฑ, ๊ทธ ์ดํ›„์—” LexicalEnvironment๋ฅผ ์ฃผ๋กœ ํ™œ์šฉํ•˜๊ฒŒ ๋œ๋‹ค.

  • ํ˜„์žฌ ์ปจํ…์ŠคํŠธ ๋‚ด์˜ ์‹๋ณ„์ž๋“ค์— ๋Œ€ํ•œ ์ •๋ณด + ์™ธ๋ถ€ ํ™˜๊ฒฝ ์ •๋ณด
  • ์„ ์–ธ ์‹œ์ ์˜ LexicalEnvironment์˜ snapshot์œผ๋กœ, ๋ณ€๊ฒฝ ์‚ฌํ•ญ์€ ๋ฐ˜์˜๋˜์ง€ ์•Š๋Š”๋‹ค.

VariableEnvironment์™€ LexicalEnvironment์˜ ๋‚ด๋ถ€๋Š” environmentRecord์™€ outerEnvironmentReference๋กœ ๊ตฌ์„ฑ๋ผ ์žˆ๋‹ค.

2. LexicalEnvironment

: ์ฒ˜์Œ์—๋Š” VariableEnvironment์™€ ๊ฐ™์ง€๋งŒ ๋ณ€๊ฒฝ ์‚ฌํ•ญ์ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๋ฐ˜์˜๋œ๋‹ค.

๐Ÿšฉ environmentRecord์™€ ํ˜ธ์ด์ŠคํŒ… โœจ

  • environmentRecord์—๋Š” ํ˜„์žฌ ์ปจํ…์ŠคํŠธ์™€ ๊ด€๋ จ๋œ ์ฝ”๋“œ์˜ ๋งค๊ฐœ๋ณ€์ˆ˜ ์ด๋ฆ„, ํ•จ์ˆ˜ ์„ ์–ธ, ๋ณ€์ˆ˜๋ช… ๋“ฑ ์‹๋ณ„์ž ์ •๋ณด๋“ค์ด ์ €์žฅ(์„ ์–ธ๋œ ๋ณ€์ˆ˜์˜ ์‹๋ณ„์ž ๋“ฑ)

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

๐Ÿšฉ ์Šค์ฝ”ํ”„, ์Šค์ฝ”ํ”„ ์ฒด์ธ, outerEnvironmentReference

  • ์Šค์ฝ”ํ”„scope?

    ์‹๋ณ„์ž์— ๋Œ€ํ•œ ์œ ํšจ๋ฒ”์œ„

    • ES5๊นŒ์ง€๋Š” ์ „์—ญ ๊ณต๊ฐ„์„ ์ œ์™ธํ•˜๋ฉด ์˜ค์ง ํ•จ์ˆ˜์— ์˜ํ•ด์„œ๋งŒ ์Šค์ฝ”ํ”„๊ฐ€ ์ƒ์„ฑ
    • ES6์—์„œ๋Š” ๋ธ”๋ก์— ์˜ํ•ด์„œ๋„ ์Šค์ฝ”ํ”„ ๊ฒฝ๊ณ„๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ํ•จ์œผ๋กœ์จ ๋‹ค๋ฅธ ์–ธ์–ด์™€ ๋น„์Šทํ•ด์กŒ๋‹ค.
    • ๋‹ค๋งŒ, var ๋ณ€์ˆ˜์— ๋Œ€ํ•ด์„œ๋Š” ์ž‘์šฉํ•˜์ง€ ์•Š๊ณ  ์ƒˆ๋กœ ์ƒ๊ธด let, const, class, strict mode์—์„œ์˜ ํ•จ์ˆ˜ ์„ ์–ธ ๋“ฑ์— ๋Œ€ํ•ด์„œ๋งŒ ์ž‘์šฉํ•œ๋‹ค.
      • ES6์—์„œ๋Š” ๋‘˜์„ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์œ„ํ•ด ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„, ๋ธ”๋ก ์Šค์ฝ”ํ”„๋ผ๋Š” ์šฉ์–ด๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
  • ์Šค์ฝ”ํ”„ ์ฒด์ธ?

    ์—ฌ๋Ÿฌ ์Šค์ฝ”ํ”„์—์„œ ๋™์ผํ•œ ์‹๋ณ„์ž๋ฅผ ์„ ์–ธํ•œ ๊ฒฝ์šฐ์—๋Š” ๋ฌด์กฐ๊ฑด ์Šค์ฝ”ํ”„ ์ฒด์ธ ์ƒ์—์„œ ๊ฐ€์žฅ ๋จผ์ € ๋ฐœ๊ฒฌ๋œ ์‹๋ณ„์ž์—๋งŒ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋Š” ๊ฒƒ

3. ThisBinding

  • this ์‹๋ณ„์ž๊ฐ€ ๋ฐ”๋ผ๋ด์•ผ ํ•  ๋Œ€์ƒ ๊ฐ์ฒด

์ „์—ญ๋ณ€์ˆ˜์™€ ์ง€์—ญ๋ณ€์ˆ˜

  • ์ „์—ญ๋ณ€์ˆ˜ : ์ „์—ญ ๊ณต๊ฐ„์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜. ์ „์—ญ ์ปจํ…์ŠคํŠธ์˜ LexicalEnvironment์— ๋‹ด๊ธด ๋ณ€์ˆ˜
  • ์ง€์—ญ๋ณ€์ˆ˜ : ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ ์„ ์–ธํ•œ ๋ณ€์ˆ˜

์•ˆ์ „ํ•œ ์ฝ”๋“œ ๊ตฌ์„ฑ์„ ์œ„ํ•ด ๊ฐ€๊ธ‰์  ์ „์—ญ๋ฒˆ์ˆ˜์˜ ์‚ฌ์šฉ์€ ์ตœ์†Œํ™”ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค


this

  • ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์˜ thisBinding์—๋Š” this๋กœ ์ง€์ • ๋œ ๊ฐ์ฒด๊ฐ€ ์ €์žฅ๋จ
  • ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ํ™œ์„ฑํ™” ๋‹น์‹œ์— this๊ฐ€ ์ง€์ •๋˜์ง€ ์•Š์€ ๊ฒฝ์šฐ, this์—๋Š” ์ „์—ญ ๊ฐ์ฒด๊ฐ€ ์ €์žฅ ๋จ
  • ๊ทธ ๋ฐ–์—๋Š” ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ this์— ์ €์žฅ๋˜๋Š” ๋Œ€์ƒ์ด ๋‹ค๋ฆ„

profile
๐Ÿš€ ๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ์“ฐ๋Š” ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ

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