Thread
프로그램을 실행시키는 가장 작은 단위이다. thread는 process에 포함되며, Multiple threads는 한 개의 process안에 존재한며, process에 공통적으로 할당된 메모리와같은 리소스들을 공유하며 동시다발적으로 접속하고 또 동시다발적으로 실행시킨다. 동시적으로 일을 수행하기에 효율적으로 프로그래밍이 동작할 수 있다.
Multi-Threading이란 한 프로세스안에서 여러가지 thread가 동시다발적으로 일어나는 것을 의미한다.
Single thread vs Multi thread
하지만, 자바스크립트는 single threading programming 언어이다. 한 번에 한 개의 명령만 실행시키며, 즉 single sequence 안에서 실행 명령을 포함한다.
Single-thread:
single threaded, each statement is run synchronously. This means that statements in the language can not be executed at the same time, or in parallel.
- Execute task 1
- Execute task 2
- Execute task 3
- Execute task 4
- Execute task 5
- Execute task 6
- Execute task 7
- Execute task 8
- Execute task 9
Multi-threaded:
Thread1:
- Execute task 1
- Execute task 2
- Execute task 3
Thread2:
- Execute task 4
- Execute task 5
- Execute task 6
Thread3:
- Execute task 7
- Execute task 8
- Execute task 9
Call Stack
여러가지 함수들을 호출할 수 있도록 keep track 하기 위해 만들어진 메커니즘. 어떤 함수들이 현재 실행되고 있는지, 어떤 함수들이 그 함수 안에서 호출됐는지 등!
자바스크립트는 single thread 이기 때문에, 한 번에 하나의 single call stack만을 가지고 있고, 한번에 한 개의 함수만 실행시킬 수 있다.
💡 How does call stack work
함수를 호출했을 때, call stack에 추가가 되고, 함수가 실행된다.
호출 된 함수로부터 호출된 어떤 함수 또한 그 위로 쌓이게 된다.
현재 실행되고 있는 함수가 끝나거나 값을 반환시, call stack으로부터 그 함수를 제거하고 마지막 stack 목록 중 중단한 위치에서 실행을 재개한다.
스택은 자료구조, LIFO
Last in First out => 제일 나중에 들어온 것이 제일 처음으로 나간다.
만약 할당된 공간보다 더 많이 차지한다면, "stack overflow"란 에러가 뜬다.
Call back Queue
자바스크립트 언어 자체는 multi-threading을 할 수 있는 방법은 없지만 이 자바스크립트가 동작하고 있는 브라우저 위에는 여러가지 thread가 들어 있다. 그래서 우리가 브라우저, 즉 웹 APIs들을 이용하게 되면 multi-threading이 가능하고, 자바스크립트가 동작하고 있는 실행 환경에서는 다양한 방식을 이용해서 조금 multi-threading 같은 효과를 얻을 수가 있다.
그리고 자바스크립트가 실행되는 이 런타임 환경에서는 이런 multi-threading 뿐만 아니라 Event Loop를 이용해서 조금 더 다양한 동작들을 수행할 수 있다.
이 웹 APIs를 통해 우리가 등록한 콜백함수는 어떻게 동작하게 되나?
함수안에, setTimeout을 호출하고, 5초 후에 콜백 함수를 등록해서 'ryan'이라는 콘솔을 출력한다고 가정한다면, setTimeout을 호출하는 순간, setTimeout은 콜백에서 지워지고 웹 API는 타이머를 시작한다. 지정된 시간이 끝나면 웹 APIs는 task queue에 콜백 함수를 넣는다.
Queue는 FIFO, FIst In First Out
처음에 들어온 함수가 제일 처음으로 나간다. 앞의 call stack , LIFO Last in First out과는 반대이다.
브라우저는 DOM, AJAX, timeout 등과 함께 event loop와 callback queue를 가지고 있다.
Event Loop
함수가 호출되고, 스택에 쌓이고, 실행이 된 후에는 callback queue에 추가한다. event loop는 call stack과 task queue를 확인하며 함수 호출이 있는지 확인하고 실행하는 역할을 한다.
call stack에 일이 남아있다면, call stack이 비워질 때까지 기다린다. 비어져 있다면 task queue에 들어있는 첫번째 함수를 call stack으로 추가해서 javascript engine이 수행할 수 있도록 도와준다.
📎https://medium.com/swlh/in-depth-introduction-to-call-stack-in-javascript-a07b8513bcc3
📎https://en.wikipedia.org/wiki/Thread_(computing)
📎https://www.youtube.com/watch?v=8aGhZQkoFbQ&list=PLpjvGpURp3yjz_OYVkXdTq1TXX2P9SCbl&index=58&t=1416s&ab_channel=JSConf
