JavaScript 동작 원리?

1. JavaScript 엔진

• 인터프리터란?
  • 프로그래밍 언어의 코드를 실행하는 컴퓨터 프로그램 또는 환경
  • 자바스크립트를 실행하기 위해서는 자바스크립트 엔진이 필요하다. 대표적으로 Google의 V8 엔진, Firefox의 SpiderMonkey, Safari의 Webkit이 있다. 
• JavaScript 엔진의 주요 구성요소
  • 메모리 힙(Memory Heap): 동적으로 할당 된 메모리를 저장하는 곳
    • 객체, 배열, 함수 등의 데이터 구조와 변수가 저장되는 공간
    • 메모리 관리는 대부분 Garbage Collection에 의해 이루어진다. 더 이상 사용되지 않는 메모리를 자동으로 탐지하여 해제한다.
    • 웹 페이지의 각 탭마다 별도의 메모리 힙이 할당되며, 각 힙은 해당 탭에서 실행되는 자바스크립트 코드와 관련되 모든 자원을 포함한다.
  • 콜 스택(Call Stack): 호출 스택이 쌓이는 곳
    • JavaScript는 기본적으로 Single Thread로 작업을 처리한다. 따라서 하나의 콜 스택을 사용한다는 것이다.
    • 출입구가 하나인 데이터 구조라고 생각하면 된다. 따라서 Fist in Last Out(FILO) 구조다.
    • 콜 스택은 정해진 스택 사이즈가 존재하며, 용량이 초과하게 될 경우 에러가 발생하게 된다. 이런 현상을 Stack Overflow라고 한다.

function foo() {
  console.log('foo');
}

function bar() {
  foo();
  console.log('bar');
}

function baz() {
  bar();
  console.log('baz');
}

baz();

==> 함수를 선언한 것은 중요하지 않다. 호출한게 중요하다. 제일 마지막에 baz()가 첫번째로 스택에 쌓이고 baz 함수안에서 bar()가 선언되었으므로 두번째로 bar(), 다음으로 foo()가 쌓인다. 따라서 baz() => bar() => foo() 순서대로 콜 스택이 쌓인 것. 따라서 나오는 순서는 반대인 foo() => bar() => baz() 순서대로 나온다. 그러므로 foo, bar, baz 순서로 출력된다.

 

2. JavaScript 런타임

• JavaScript는 Single Thread 기반 언어이므로 다른 작업을 수행하기 위해서 현재 작업이 종료될 때까지 기다려야 한다는 단점이 있다.
• 이런 단점을 보완하기 위해 오랜 시간이 걸리는 작업들은 백그라운드에서 처리하고 간단하게 처리할 수 있는 작업들만 콜 스택에서 효율적으로 처리할 수 있게 하는 과정들이 JavaScript 런타임이다.
• Web API
  • 브러우저에서 제공되는 API
  • setTimeout, Ajax 요청, DOM 이벤트 등의 메소드를 지원
  • Web API를 이용하여 백그라운드에서 비동기적으로 작업을 처리할 수 있다.
• Callback Queue
  • 비동기적으로 처리되는 작업들의 콜백 함수들이 대기하는 대기열
  • Event Loop를 통해 관리된다.
• Event Loop
  • 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지 확인하고 비어있다면 콜백 큐에서 콜백 함수를 콜 스택에 옮겨 실행한다.
  • 이를 통해 비동기 작업의 결과를 처리하고 적절한 시점에 콜백 함수를 실행할 수 있다.

console.log("Start");

setTimeout(function() {
  console.log("Inside setTimeout");
}, 2000);

console.log("End");

==> setTimeout 함수는 2초 후에 콜백 함수를 실행하도록 예약. 콜백 함수는 2초 후에 콜백 큐에 추가. 따라서 "Start"와 "End"가 먼저 출력되고 2초 후에 "Inside setTimeout"이 출력된다.