🏭 실행 컨텍스트(EC)

javascript
1let front = 'react';
2let back = 'spring';
3let browser = 'chrome';
4var appStack;
5
6function createApp(...stacks){
7	let devops = 'aws';
8  	stacks.push(devops, browser)
9    return stacks
10}
11
12appStack = createApp(front, back);

1. Execution Phase 전 GEC의 형태

일반 코드, 변수가 작동하는 것과 같이 동작한다.

처음 초기화를 하기 전에 선언

GlobalExectionContext = {
  LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 식별자 바인딩
      front: < uninitialized >,
      back: < uninitialized >,
      browser: < uninitialized >,
      createApp: < func >
    }
    outer: <null>,
    ThisBinding: <Global Object>
  },
  VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // 식별자 바인딩
      appStack: < uninitialized >,
    }
    outer: <null>,
    ThisBinding: <Global Object>
  }
}

2. 변수 할당이 끝난 후 GEC

선언한 변수에 값 초기화

GlobalExectionContext = {
LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      // Identifier bindings go here
      front: 'react',
      back: 'spring',
      browser: 'chrome',
      createApp: < func >
    }
    outer: <null>,
    ThisBinding: <Global Object>
  },
VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Object",
      appStack: undefined,
    }
    outer: <null>,
    ThisBinding: <Global Object>
  }
}

3. 함수가 호출된 FEC

함수 호출했으니 함수 실행하기 위해 렉시컬이 FEC로 넘어간다.

outer(GEC)에서 외부에 참조해야하는 값이 있는지 확인한다. 여기서는 하나의 바로 GEC를 참조하기 때문에 browser(만약 node.js라면 node) 값 있는지 확인

FunctionExectionContext = {
LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      Arguments: {front: 'react', back: 'spring', length: 2},
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>,
  },
VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      stack: undefined
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>
  }
}

4. 실행 단계가 된 FEC

함수 실행 끝나고 다시 GEC로 렉시컬 넘어감

FunctionExectionContext = {
LexicalEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      Arguments: {front: 'react', back: 'spring', length: 2},
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>,
  },
VariableEnvironment: {
    EnvironmentRecord: {
      Type: "Declarative",
      stacks: ['react', 'spring', 'aws', 'chrome']
    },
    outer: <GlobalLexicalEnvironment>,
    ThisBinding: <Global Object or undefined>
  }
}