1. Thread of Execution, Functions, and Call Stack

1. Thread란 [여기]

- main thread: 브라우저가 유저 이벤트, 렌더링, 페인팅 등을 하기 위해서 사용하는 것. 웹 페이지나 앱에서 사용하는 것이다. 한 thread에서 일어나기 때문에 스크립트가 느리면 브라우저가 멈출 수 있다. 

 

- web workers: modern javascript는 추가적인 thread를 생성할 수 있다. 서로와 통신할수도 있으면서 각자 실행할 수도 있는 이 기술을 web worker라고 부른다. main thread와 동시에 실행된다. 이를 통해서 multi-core processors의 이점을 이용할 수도 있다. 

 

- service worker: 특별한 종류의 워커로, 유저의 권한이 있다면 사이트가 꺼져있을때도 실행되면서 notification 같은 것을 보내준다. 

 

 

 

2. Thread of execution이란?

Goes through the code line-by-line and runs("execute") each line

 

JavaScript는 실행하면서 만나는 data - strings, arrays, 그리고 functions - 을 메모리에 저장한다. 이때 코드는 통채로 string인것처럼 메모리에 저장된다. JS에서는 Thread of execution은 하나뿐이라 한번에 하나만 실행 할 수 있다. 

 

 

 

3. Function 이란?

Fuctions: Code we save("define") functions & can use(call/invoke/execute/run) later with the function's name & ()
Execution context: created to run the code of a function has 2 parts: thread of execution and memory

함수가 실행되면 새로운 execution context 가 생성된다.

 

- execution context 의 경우 처음 실행하면 global execution context(with global memory) 가 생성되고 함수가 실행되면 그 함수의 실행을 위한 execution context(with local memory)가 생성된다. 

 

 

 

4. Thread of execution 과 execution context

Thread of execution 이란 현재 실행중인 부분 정도로 이해하면 될것같다(한국어 번역자료를 못찾았다). 중요한것 언제 execution context가 생성되는 것이다. 

 

 

 

5. Call stack

JavaScript keeps track of what function is currently running: where's the thread of execution
Run a function - add to call stack
Finish running the function - JS removes it from call stack
Whatever is top of the call stack: that's the function we're currently running

callstack을 통해서 어떤 함수를 실행하고 있는지 확인한다. callstack의 가장 아래에는 항상 global이 있다. 

 

 

 

 

 

- 출처: Frontend masters의 JavaScript: The Hard Parts, V2