JS 이벤트 루프 & 실행 컨텍스트

이벤트 - 루프

• JS와 브라우저가 진행되는 시점에 이벤트 루프가 돌아감
• 이벤트 루프는 비동기 방식으로 동시성을 지원하는 방법임, JS엔진은 한 번에 한 개의 코드만 실행할 수 있음, 하지만 사용되는 환경은 동시에 많은 작업이 처리됨
• 그래서 이에 대해서 이벤트 루프를 통해서 동시성을 지원하는 것임
• 프로세스 / 스레드 / 스택 / 큐의 개념을 알아야함
• 프로세스는 프로그램을 메모리에 할당하는 것이고 스레드는 프레스 내의 실행 단위임
• 스택은 Last In First Out의 성격을 가진 자료구조고 큐는 First In First Out의 성격을 자료구조임
• JS엔진의 경우 내부에, Heap 구조화 되어 있지 않은 단순한 영역(객체 할당)과 Call Stack 함수 처리를 저장하는 영역을 가지고 있음
• 이 때 Web API를 통해서 웹을 만들 때 사용하는 모든 인터페이스를 사용하면 이에 대해서 Task Queue에 Web API에서 비동기 작업들이 실행된 후 호출되는 콜백 함수들이 대기를 함
• 이를 이벤트 루프를 통해 Task Queue에 있는 작업들이 JS 엔진에 Call Stack으로 넘어가서 사용이 됨(Call Stack이 비어있을 때 들어감, Task Queue에서 대기하고 있던 함수가 이벤트 루프를 통해 들어감)
  
  
  

• 아래의 사이트에서 이 과정을 직관적으로 확인해볼 수 있음
• 참고 사이트
• 참고자료

실행 컨텍스트

• JS가 실행되는 방식을 담고 있는 핵심 원리임, JS엔진이 코드를 읽고 실행에 필요한 정보를 모아놓은 것
• 실행 컨텍스트의 종류는 Global(전역, GEC), Function(함수, FEC), Eval(eval 메서드)로 구분되는데 Eval은 잘 안 씀
• 전역 공간은 this, Object, 변수 같은 선언해 놓은 환경을 관리할 수 있음
• 함수 공간은 상위의 실행 Context에 접근할 수 있음 마찬가지로 this, 매개변수 등이 들어와서 Context를 가져올 수 있고, arguments도 마찬가지임
• 이렇게 각각 실행하는 공간에 대해서 구분하고 처리할 수 있음
• 실행 컨텍스트의 경우 생성 단계(Creation Phase), 실행 단계(Execution Phase)의 단계를 거침
• 생성 단계에선 JS엔진이 함수를 호출했지만 실행이 시작되지 않은 단계임, 실행 단계는 전역 변수의 값 할당이 발생하며 코드를 실행하는 단계임
• 아래 예시로 정리해볼 수 있음

/*
*
*  # 생성 단계
*  1. 전역 객체 생성
*  2. 변수 생성
*  3. 변수는 undefined로 초기화
*  4. hello 함수는 메모리에 위치
*
*  # 실행 단계
*  1. 함수 호출시 함수 실행 컨텍스트 생성
*  2. arguments 접근 가능
*  3. GEC에서 생성된 환경에서 접근 가능
*  4. 만약 함수가 다른 함수 호출시 새로운 함수의 실행 컨텍스트 생성되며 반복
*
*/

var name = 'zero';

function hello() {
  console.log(this.name);
  console.log(name);
}

• 또 다른 예시

var x = 'xxx';

function foo () {
  var y = 'yyy';

  function bar () {
    var z = 'zzz';
    console.log(x + y + z);
  }
  bar();
}
foo();