JS가 비동기적 통신을 할 수 있는 이유에 대해 알아보자.

또한 event loop, blocking, callstack, heap 등 자주 사용하는 용어에 대해 바르게 정의해보자!

✉️ JS 런타임을 단순화해보자!

• 구글 V8 엔진을 예시로 들어보자.
  • V8은 웹 브라우저를 만드는 데 기반을 제공하는 오픈 소스 자바스크립트 엔진임.

• 엔진은 두 개의 주요 컴포넌트로 구성되어 있음.
  • Memory Heap : 메모리 할당이 일어나는 곳.
  • Call Stack : 코드의 stack frames 단위로 실행이 일어나는 곳.
• 개발에 필요한 대부분의 JS API가 있음.
  • 없는 것도 있음. 이건 뒷 부분에 알게 됨.

📥 The Call Stack

• JS는 싱글 스레드 언어임.
  • 하나의 Call Stack을 가지고 있다는 의미이자, 한번에 하나의 코드만을 실행할 수 있다는 뜻.
  • Call Stack은 자료구조가 기록되는 곳임.
• 함수를 실행하면, 해당 함수를 stack 최상단에 놓고, 만약 함수로부터 return 값을 받으면, stack에서 해당 함수를 pop함.

function multiply(x, y) {
    return x * y;
}
function printSquare(x) {
    var s = multiply(x, x);
    console.log(s);
}
printSquare(5);

Call Stack에 들어온 네모 박스를 Stack Frame이라 함.

이 예시는 어떻게 될까?

function foo() {
    foo();
}
foo();

• 엔진이 이 코드를 실행하면, 먼저 함수 foo를 실행하게 됨.
• 하지만 foo는 어떤 종료 조건 없이 자기 자신을 호출하고 있음.
• 함수가 실행될 때마다 자기 자신을 Call Stack에 추가하고 또 추가함.