[JavaScript] 작동 환경 | 실행 원리 간단히 정리하기

동기 & 비동기에 대해 공부하다보니 자바스크립트 런타임 환경이 동작하는 원리에 대한 개념이 잘 정리되어 있지 않은 것 같아서 차근 차근 정리해보았다.

먼저, JavaScript의 Runtime 환경을 그림으로 간단히 표현하면 아래와 같다.

• JavaScript Engine
  • 소스코드를 이해하고 번역해서 실행함
  • ex) 구글 - V8
• Memory Heap
  • 동적인 객체가 생성되는 공간
• Call Stack 동기적
  • 함수 실행 순서를 기억함
  • 들어온 순서의 역순으로 나간다
    • input : a() → b() → c()
    • output : c() → b() → a()
  • JavaScript - 하나의 Context Stack을 가짐 = Single Thread
    • 한번에 한 가지 일만 할 수 있다
    • 동기적!
    • 앞의 일이 끝나지 않으면 뒤의 일이 진행되지 못함
      • 사용자가 오래 기다려야할 수 있어, UX에 좋지 못함

따라서, 이런 경우에는 비동기적 실행이 필요하다!

• Web APIs 비동기적
  • JS는 동기적이지만, JS가 작동하는 Runtime 환경에서 제공하는 다양한 API가 비동기적인 일을 도와준다
    • =Multi Thread
    • 브라우저 - Web APIs
    • ex) setTimeout / fetch / event listener / DOM APIs
• Task Queue
  • Web APIs가 비동기적으로 작업을 수행한 후, 그 일이 끝나는대로 수행할 그 다음 일(=callback)을 저장한다
  • 들어온 순서대로 나간다
    • input : a() → b() → c()
    • output : a() → b() → c()
  • Call Stack이 비어있을 때, 순차적으로 실행된다
• Event Loop
  • Task Queue와 Call Stack을 감시한다
  • Call Stack이 비어있을 때 Task Queue에 쌓여있는 callback함수를 Call Stack으로 보내 실행하게 하는 것이 바로 이벤트루프!

엄청 간단하게 정리해봤는데 그래도 이해하고 나니 동기와 비동기도 더 이해가 잘 됐다. 그래... 어쩐지 이해가 안되더라....ㅎ 기본 원리부터 알았어야지...🥲

동기와 비동기의 작동에 대해서는 다음 포스팅에서 정리해보잣 ⚡️

💡 참고 : Ellie DreamCoding > 자바스크립트 마스터리(ES6+ 최신문법) 강의