[JavaScript_study] 자바스크립트의 작동 원리

* 자바스크립트의 실행 순서 (콜스택)

• 자바스크립트 런타임 환경이라면 항상 자바스크립트 엔진이 탑제되어 있다.
  • 그래서 소스코드를 자바스크립트 엔진이 이해하고 번역해서 실행하는것이다.
  • 소스코드에서 동적으로 객체를 생성하는 경우에는 Memory Heap에 생성이 된다.
    • 대부분 구조화되지 않는 '더미'같은 메모리 영역을 'heap'라고 표현한다.
• Call Stack는 우리의 함수 실행순서를 기억한다.
  
  • Call Stack을 이용해서 어디에서 실행되었는지 어디로 돌아가야되는지를 확인한다.
  • Call Stack는 하나의 싱글 컨텍스트 스택을 가지고 있다(한번에 하나의 일만 처리 가능)
  • 이를 싱글 쓰레드(Single Thread)라고 한다.
  • 단 하나의 스트림으로만 한가지의 일을 한번에 처리 가능
  • 자바스크립트는 기본적으로 동기적으로 진행

 

* 자바스크립트 런타임 환경에서 제공해주는 다양한 API가 있는데 해당 API들은 비동기적으로 작동한다.

• DOM API, setTimeout, setInterval, fetch, event listener
• 비동기적으로 작동하기 때문에 멀티스레드 환경에서 작동한다.
• 다양한 일들을 동시다발적으로 수행가능

* 자바스크립트에서 비동기적으로 수행하려면 (총 정리)

• 자바스크립트 런타임 환경에서 제공해주는 다양한 API들을 사용해야한다.
• 해당 API를 호출할때 우리가 원하는 callback함수를 던져놓으면 내부적으로 비동기적인 일을 수행하고나서 그 일이 다 끝나면 우리가 등록해놓은 callback함수를 Task Queue에 넣게되고 자바스크립트 엔진에 빙글빙글 돌고있는 이벤트루프가 Call Stack과 Task Queue를 감시하면서 Call Stack가 비어있을때만(어플이 한가할때만) Task Queue에 있는 callback함수를 Call Stack으로 가져와준다.
• 자바스크립트 엔진에서는 Call Stack에 들어온 코드들만 사용할 수 있다.

* 우리가 Web API를 여러개 호출하면 해당 함수들이 비동기적으로 끝이나면 우리가 등록해놓은 callback함수들이 순차적으로 Task Queue에 쌓이게 되고 Event Loop가 빙글빙글 돌면서 확인을 한다. 

Call Stack가 비어있다면 하나씩 Call Stack으로 가져온다.

 

* 자바스크립트 동기적 코드

// 자바스크립트는 동기적으로 수행이 되기때문에 아래와 같은 긴긴 반복문을 만나면
// 해당 반복문이 끝날때까지 계속 기다리고 있는다.
// 따라서 해당 작업처럼 무겁거 오래걸리는 작업은 하는것이 좋지 않다.
function a() {
  for (let i = 0; i < 1000000000000000; i++);
  return 1;
}

function b() {
  return a() + 1;
}

function c() {
  return b() + 1;
}

console.log('시작했다!');
const result = c();
console.log(result);