자바스크립트 작동 방식

작동 방식

1. 브라우저가 웹페이지에서 자바스크립트를 발견하면 프로그램의 텍스트를 자바스크립트 컴파일러로 전달한다.
2. 컴파일러는 프로그램에 에러가 있는지 검사하고, 프로그램을 모형 컴퓨터처럼 만들어 낸 컴퓨터의 어셈블리 언어 명령어로 컴파일한다.
3. 모형 컴퓨터 같은 시뮬레이터를 실행하여 자바스크립트 프로그램이 수행하기로 되어 있는 모든 기능을 수행한다.

자바스크립트 동작 구조

• 자바스크립트의 대표적인 엔진은 Google에서 만든 V8 엔진이다.
• 엔진은 Memory Heap 과 Call Stack 으로 구성되어 있다. Memory Heap은 메모리 할당이 발생하고, Call Stack (호출 스택)은 코드 스택에 따라 하나씩 쌓이는 곳이다.

• 자바스크립트에서는 수 많은 API를 사용하고 있다. 하지만 이런 API들은 자바스크립트 엔진에서 제공해주는 요소가 아니라 웹 브라우저나 Node.js같은 자바스크립트 런타임에서 지원해주는 API 이다. 그래서 어떤 브라우저는 지원을 해줄 수도 있고, 안 해 줄 수도 있다.
• 여기서 setTimeOut()과 같은 비동기 코드 작성이 가능함에도 자바스크립트 자체에는 비동기 코드를 처리하기 위한 개념을 갖고 있지 않다.
• Event Loop & Callback Queue를 통해 비동기 코드를 처리 할 수 있게 한다.

[ Call Stack (호출 스택) ]

• 콜 스택은 기본적으로 자바스크립트를 한 줄씩 읽어가며 우리의 코드가 순서대로 돌 수 있도록 보장해주는 데이터 구조이다. 스택을 사용하기 때문에 후입선출 (LIFO)의 구조를 갖는다.
• 만약 스택이 초과하게 된다면 에러가 발생하게 되고 이것을 Stack Overflow 라고 한다.

• 이처럼 자바스크립트는 하나의 Call Stack을 가지고 코드를 순차적으로 처리하기 때문에 한 번에 하나의 명령어만 실행될 수밖에 없다.
• 그래서 자바스크립트는 단일 스레드이며 동기식 언어라고 할 수 있다.
• 하지만 하나의 Call Stack 에서 전부 처리하려고 하면, 어떤 작업의 경우에는 처리하는데 오래 걸릴 수 있기 때문에 제대로 동작하지 않게 될 수 있다.

[ Event Loop & Callback Queue ]

1.제일 먼저 foo()라는 함수가 Call Stack에 쌓이게 된다.

2. foo() 함수 안에 있는 console.log()가 Call Stack에 쌓이게 된다.

3. 콘솔 창에 1을 출력한다.

4. foo() 함수는 종료되었으니 Call Stack에서 빠지게 되고, setTimeOut()이 Call Stack으로 들어온다.

5. setTimeOut()은 비동기 함수이므로  Web API에서 처리하도록 보낸다. 만약 node js 같은 경우에는 백그라운드에서 처리하도록 보낸다. 그리고 그다음 함수인 foo2() 함수를 불러온다.

6. foo2() 함수 안에 있는 console.log()가 Call Stack에 쌓이게 된다.

7. 콘솔 창에 2를 출력한다.

8. foo2() 함수는 종료되었으니 Call Stack에서 빠지게 된다. setTimeOut()의 시간을 2초로 설정해 두었으니 2초간은 Wab API에서 처리하게 된다. 2초가 지난 후에는 setTimeOut()의 콜백 함수를 Callback Queue로 보내게 된다.

이 때 Call Stack에서는 foo2() 함수를 처리하고 있었고, Web API에서는 setTimeOut()을 2초 동안 돌리고 있었던 것을 의미한다.

9. Event Loop는 Callback Queue에 있는 콜백 함수를 Call Stack으로 보내서 처리하기 위해 Call Stack이 비어있는지를 검사한다. 만약 Call Stack이 비어 있다면 Callback Queue에 있던 함수를 Call Stack으로 보내서 처리하게 된다.

9. Call Stack에 있던 console.log()를 콘솔에 출력하는 것으로 프로그램이 종료!

💡 자바스크립트는 기본적으로는 단일 스레드에 동기식 언어이지만, 웹 브라우저나 런타임들의 도움을 받아서 비동기 작업들을 처리할 수 있게 되었고, 마치 멀티 스레드인 것처럼 동작할 수 있는 언어이다.