시작하기전에
다른사람들과 개발을 하면서 느꼈던건 내가 자바스크립트의 동작원리에대해 알고있다고 생각했지만 개발을 하면서 아는게 아닌거라고 느껴서 이렇게 처음 정리를 해보게 되었다.
자바스크립트란 무엇일까?
간단하게 말하자면 자바스크립트는 싱글 스레드언어이다
싱글스레드란?
한번에 한가지 일밖에 못한다고 생각하면 된다(Call Stack이 하나다). 즉 어떠한 작업을 하고있으면 다른작업은 그 작업이 끝날때까지 기다려야한다. 그래서 자바스크립트는 동기식언어라고 볼 수 있다.이 앞에글만 보면
그럼 자바스크립트는 어떤작업이 너무 오래걸리는경우에는 다음 작업이 끝날때까지 계속 기다려야되는건가?
라는 의문이 들것이다.정답은 아니다. 이것은 자바스크립트의 어떻게 동작을하는지 알게되면 해결된다.
자바스크립트는 어떻게 동작할까?
출처: https://medium.com/sessionstack-blog/how-does-javascript-actually-work-part-1-b0bacc073cf
그림을 보면 알 수 있듯이
자바스크립트 엔진에는 하나의 Call Stack과 MemoryHeap이 있는걸 확인할 수 있다. 그리고 함께 동작하는 요소로는 Web APIs, Callback Queue, EventLoop가 있다.
자바스크립트 엔진이란?
자바스크크립트 코드를 실행하게 해준다고 보면된다.
대표적으로는 구글에서 만든 V8이 있다.
Call Stack이란?
코드가 실행될때 함수의 호출을 스택형식으로 쌓이는 공간
자바스크립트에서는 함수를 호출하면 Call Stack이라는곳에 하나씩 순서대로 쌓이게되는데 쌓이게되면 맨마지막에 Call Stack에 들어온 함수가 제일 먼저 반환된다. 예를들어 엘레베이터에 사람이타게되면 가장 마지막에 탄사람이 가장먼저 내리게되는 구조라고 보면 된다. 아래 예시코드를 보면 쉬울 것이다.
function a(){
b();
console.log("a");
}
function b(){
c();
console.log("b");
}
function c(){
console.log("c");
}
a();
/*출럭
c
b
a
*/
위와같은 코드에서의 결과값은 c->b->a가 나올것이다.
아래의 그림을 보면 쉽게 이해할 수 있다.
위에 그림에서 나와 있듯이저렇게 쌓이게 되는데 순서를보면
1. a함수를 호출
2. 호출된 a함수를 CallStack에 추가
3. a함수의 코드를 읽기 시작
4. b함수 호출
5. 호출된 b함수를 CallStack에 추가
6. b함수의 코드를 읽기 시작
7. c함수 호출
8. 호출된 c함수를 CallStack에 추가
9. c함수의 코드를 읽기 시작
10. console.log("c")실행
11. c함수의 코드를 전부 실행하였기에 CallStack에서 제거
12. CallStack 제일 위에있는 b를 실행
13. console.log("b")실행
14. b함수의 코드를 전부 실행하였기에 CallStack에서 제거
15. CallStack 제일 위에있는 a를 실행
16. console.log("a")
따라서 결과는 c -> b -> a 로 나오게된다.
Memory Heap이란?
자바스크립트에서 사용되는 메모리공간이다. 프로그램에서 선언한 변수,함수,객체등 메모리 할당을한다
여기까지가 자바스크립트의 엔진인데 앞에서 말한것처럼 자바스크립트는 싱글스레드 언어라 한번에 한가지일 즉 동기적으로 작업을 수행 할 수 있다.
그래서 비동기적으로 수행하기위해 Web APIs, Event Queue(Task Queue),Event Loop를 사용한다.
Web API란?
자바스크립트 엔진 밖에서 동작하는, 웹 브라우저에 내장된 API이다.
Ajax 요청, setTimeout(), 이벤트 핸들러의 등록과 같이 웹 브라우저에서 제공하는 기능들을 말한다.
비동기 처리를 Web ApI에서 한다음 결과를 Task Queue로 이동시킨다
Task Queue란?
Web API 결괏값을 쌓아 두는 큐
전달 받은 함수들을 먼저들어오면 먼저나가는 구조이다
Task Queue에는 3가지의 종류가 있는데 이것은 나중에 다루어 보도록 하자!
Event Loop
이벤트 루프는 Call Stack 과 Task Queue를 주시하다가 Call Stack이 비워져 있을때 우선순위에 따라 Task Queue에서 하나씩 빼서 Call Stack에 넣어주는 역할을 한다
각각의 하는 역할들에 대해서 알았으니 이제 동작을 어떻게 하는지
간단하게 요약해보면 비동기 동작 의 수행과정은
Call Stack에서 비동기 함수가 호출되면 Call Stack에 먼저 쌓였다가 Web API로 이동한 후 해당 함수가 등록되고 Call Stack에서 사라진다.
Web API에서 비동기 함수의 이벤트가 발생하면 해당 콜백 함수는 Callback Queue로 옮겨진다.
이제 Call Stack이 비어있는지 이벤트 루프가 확인을 하는데 만약 비어있으면 Call Stack에 Callback Queue에 있는 콜백 함수를 넘겨준다.
Call Stack에 들어온 함수는 실행이 되고 실행이 끝나면 Call Stack에서 사라진다.
아래 그림을 보면 쉽게 이해할 수 있을것이다.
결론
자바스크립트는 싱글스레드인 동기적 언어 이지만 별도의 API를 통해 비동기적으로 처리가 가능하다는것을 알 수 있다.