(JavaScript) JS 동작원리

JS Engine

• Call Stack과 Memory Heap으로 데이터 및 코드 실행을 관리
  • Memory Heap 
    • 메모리 할당이 일어나는 곳, 선언한 변수나 함수 등이 이곳저곳에 무작위하게 담겨져 있다
  • Call Stack
    • 코드가 실행될 때 쌓이는 곳, 자료구조의 stack과 같은 원리(선입후출)

JS Engine 그려버리기

Web APIs

• JS Engine만으로 웹이 동작하지 않고 그 외적인 요소들의 동작도 런타임으로 이루어 진다
• 브라우저에서 제공하는 Web APIs 중 대표적 3가지
  • DOM(document)
  • Ajax(XMLHttpRequest)
  • Timeout(setTimeout)
• Call Stack에서 실행된 비동기 함수들은 Web API를 호출하고 그 호출된 함수의 Callback Function을 queue에 밀어 넣는다

Web APIs 그려버리기2

Callback Queue, Event Loop

• Call Stack과 Callback Queue를 주시한다
• 만일 Call Stack이 비어있으면 Callback Queue에 첫 번째 callback function을 Call Stack으로 밀어 넣어 실행할 수 있게 해준다

Callback Queue, EventLoop 그려버리기3

JS 동작원리

• JS파일이 실행되면 호출된 코드가 Call stack에 쌓인다
• JS는 싱글스레드 기반의 언어이기에 한 번에 한 작업씩 실행되고 실행된 코드는 Call stack에서 제거된다
• 그 중에서 비동기함수가 실행되면 Web API가 호출되면서 넘어가면서 Call Stack에서 제거
• Web API는 비동기 함수의 콜백함수를 Callback Queue에 밀어 넣는다
• Call Stack과 Callback Queue를 주시하던 Event Loop가 Call Stack이 빈 상태가 되면  Queue에 들어있는 대기가 끝난 첫 번째 콜백함수를 Stack으로 밀어 넣는다, 이동 시킨다

전체적으로 그려버리기

 

console.log(1);

function testFunc() {
  console.log(2);
  setTimeout(() => {
    console.log(3);
  }, 1000);
  console.log(4);
}

testFunc();
console.log(5);

위 코드에 대한 console.log / 동작원리를 이해한대로 작성해버리기