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

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์˜ ๋ชจ์Šต์€?


ExecutionContext = {
      // ์ตœ์ดˆ ์ƒ์„ฑ๋  ์‹œ์ ์—๋Š” LexicalEnvironment === VariableEnvironment
    LexicalEnvironment: LexicalEnvironment, 
      VariableEnvironment: LexicalEnvironment,
      outer: outer Execution Context
}

B. LexicalEnvironment?

ํ˜•ํƒœ
const foo = (ninkName) => {
    const name = 'bob';
      const age = 20;

      const bar = () => {}

    return bar;
}

foo(1); // foo ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์—”์ง„์ด foo์˜ EC๋ฅผ ์ƒ์„ฑ ๋ฐ ์ดˆ๊ธฐํ™” ํ•ฉ๋‹ˆ๋‹ค.

// foo Function Execution Context
ExecutionContext: {
    LexicalEnvironment: {
        environmentRecord: {
          ninkName: 1,
          bar: Function Object  
          name: "bob",
          age: 20,
        }
    },
    variableEnvironemt: LexicalEnvironment,
    outer: global EC
}

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

1. ์„ ์–ธ ๋‹จ๊ณ„
1. ๋งค๊ฐœ ๋ณ€์ˆ˜ ์‹๋ณ„์ž ์„ ์–ธ ๋ฐ ๊ฐ’ ํ• ๋‹น
2. function statement ์‹๋ณ„์ž ์„ ์–ธ ๋ฐ ๊ฐ’ ํ• ๋‹น
3. function expression ์‹๋ณ„์ž ์„ ์–ธ
4. ๋ณ€์ˆ˜ ์‹๋ณ„์ž ์„ ์–ธ
2. ์‹คํ–‰ ๋‹จ๊ณ„
1. ๋ณ€์ˆ˜, ํ•จ์ˆ˜ ์‹๋ณ„์ž ๊ฐ’ ํ• ๋‹น

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

C. Outer?

๊ฐ’

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

const foo = () => {}
console.dir(foo);

์ถœ๋ ฅ
แ„‰แ…ณแ„แ…ณแ„…แ…ตแ†ซแ„‰แ…ฃแ†บ 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๋ฅผ ์ฐธ์กฐํ•จ.

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

const globalName = 'Global';

const foo = () => {
      const name = 'foo';
    const inner = () => {
      consoleo.log(name, globalName);
    }

    inner();
}

foo();

// ES3 scope chain
// ์ค‘์ฒฉ๋œ Scope๋ฅผ ๋ฆฌ์ŠคํŠธ ํ˜•ํƒœ๋กœ ์‚ฌ์šฉ
0 - inner Function EC // name ์‹๋ณ„์ž๋ฅผ ์ฐพ์„๋•Œ ํ˜„์žฌ ์ปจํ…์ŠคํŠธ์— ์—†์œผ๋ฉด ๋ฆฌ์ŠคํŠธ๋ฅผ ํƒ€๊ณ  ์˜ฌ๋ผ๊ฐ.
1 - foo Function EC 
2 - global EC 

// ES6 scope chain
inner Function EC: {
    environment record: {/* ์‹๋ณ„์ž: ๊ฐ’ */},
    outer: foo execution context, // inner ํ•จ์ˆ˜ ๊ฐ์ฒด๋Š” foo ์—์„œ ์ƒ์„ฑ
}

foo Function EC: {
      environment record: {/* ์‹๋ณ„์ž: ๊ฐ’ */},
    outer: global execution context, // foo ํ•จ์ˆ˜ ๊ฐ์ฒด๋Š” global ์—์„œ ์ƒ์„ฑ
}

global EC: {
        environment record: {/* ์‹๋ณ„์ž: ๊ฐ’ */},
        outer: null,
}    

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