실행컨텍스트 1)

실행컨텍스트란 ?

: 실행 할 코드에 제공할 환경 정보들을 모아놓은 객체 (자바스크립트에서 가장 중요한 핵심 개념 중 하나!)

• 실행컨텍스트를 이해하기 위해서는 자료구조
  1 ) 스택 - 출입구가 하나인 구조 ex ) a, b, c, d => d, c, b, a
  2 ) 큐 - 출입구가 두개인 구조 ex ) a, b, c, d => a, b, c, d

실행 컨텍스트 자료 구조에 따라서 함수가 어떻게 실행 되는지 이해하면 된다.

1 ) 실행컨텍스트 + 콜 스택
: 자바스크립트 자료를 만나면 자동으로 전역컨테스트 객체가 쌓인다.
( 자바스크립트 파일이 열리는 순간 자동으로 전역 컨텍스트가 활성화 된다고 이해하면 된다. )
: 그 후로 실행되는 함수가 쌓여서 실행되게 해준다.

자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는데 필요한 환경 정보들을 수집해서 실행 컨텍스트 객체에 저장한다. (개념!)
이 객체는 자바스크립트 엔진이 활용할 목적으로 코드를 확인 할 순 없다.
담기는 정보들은 다음과 같다.

(활성화 된 실행 컨텍스트의 수집 정보)

• VariableEnvironment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보 + 선언 시점의 lexical environment의 스냅샷으로 변경 사항은 반영되지 않음.

  VariableEnvironment 내부
  1 ) environmentRecord
  2 ) outer-environmentReference

• LexicalEnvironment : 처음에는 VariableEnvironment와 같지만 변경 사항을 실시간으로 반영됨.

  LexicalEnvironment 내부
  1 ) environmentRecord
  2 ) outer-environmentReference

EnvironmentRecord 와 호이스팅

• 현재 컨텍스트와 관련된 코드의 식별자 정보를 저장한다. 컨텍스트 내부 전체를 처음부터 끝까지 쭉 훑어나가며 순서대로 수집한다.
  코드가 실행되기 전인데, 이미 자바 스크립트 엔진은 이미 코드의 변수명들을 모두 알고 있다. 자바스크립트 엔진은 식별자들은 최상단으로 끌어올려 놓은 다음 실제 코드를 실행한다 라고생각해도 문제 될게 없다.
  여기서 호이스팅 개념이 등장한다. (변수를 위로 끌어올려준다.)

• 현재 실행될 컨텍스트의 대상 코드 내에 어떤 식별자가 있는지에만 관심이 있고, 각 식별자에 어떤 값이 할당되어 있는지는 관심이 없다. 변수만 호이스팅 할 뿐 할당 과정은 그 함수 자리에 그대로 남겨둔다.

  
  

• 그러면 자바스크립트는 실행 되기 전에 이미 식별자들을 정보를 다 수집해 놓은 상황임.
• arguments(전달 인자) : 함수의 메서드의 입력 값

A(1, 4);

• paramiter (매개변수) : 함수와 메서드의 입력 변수명

 function A (a, b) {
     return a + b;
  }

[ 호이스팅을 생각하지 않았을 경우 ]

function a() {
  console.log(b);     //b is not defined
  function b () {}
  console.log(b);     //b () {}
  let b = 'A';
  console.lob(b)      // 'A'
}
a();

[ 호이스팅을 마친 경우 ]

function a() {
  let b;
  function b () {};
    
  console.log(b);     //b () {}
  console.log(b);     //b () {}
  b = 'A';            // 할당 부분은 남아있고, 선언 부분만 올라가 있는다.
  console.lob(b)      // 'A'
}

그래서 함수 선언문 vs 함수 표현식도 호이스팅의 경우에 해당된다.
함수 선언문 : 함수 전체를 끌어올린다.
함수 표현식 : 변수만 끌어올린다.

let sem = function sum (a , b) {
    return a + b
}
let sample ;

console.log(sum(3,4));      //ok
console.log(sample(4,5));   //not function

sample = function sample (a, b) {
    return a + b
}

변수가 선언한 지점에 따라 데이터 영역의 주소값이 바뀌기 때문에 함수실행 위치를 잘 파악하고 적용해야 한다.