자바스크립트 동작 원리

안녕하세요.

 

야생에서 등장한 하프 입니다 🫠

 

프론트엔드라면 꼭 중요한 자바스크립트의 원리에 대해서 짚고 넘어가겠습니다.

 

📝 목차

 

 

---

자바스크립트는 싱글 스레드?

1. 싱글 스레드 (Single-Thread)

싱글 스레드란 프로세스가 단일 스레드로 동작하는 방식입니다.

처리를 단일 스레드로 직렬 처리하는 프로그래밍 기법 입니다.

 

요약하면 하나씩 처리하겠다는 뜻 입니다.

자바스크립트 자체는 싱글 스레드가 맞지만 자바스크립트 런타임은 싱글 스레드가 아닙니다.

런타임은 또 뭐냐 이럴텐데 지금은 그냥 넘어갑시다.

 

2. 왜 싱글 스레드를 채택했을까?

자바스크립트는 원래 웹 페이지의 보조적인 기능을 수행하려고 만들어진 언어 입니다.

멀티 스레드인 자바는 다소 무거운 면이 있고, 동시성 문제가 존재하다보니 복잡한 시나리오를 신경 쓸 필요가 없는 싱글 스레드 형식이 채택되었습니다.

 

실제로 구글 Chrome 브라우저는 동시성 문제를 일으킬 수 있다는 이유로 단일 웹 사이트 페이지의 자바스크립트 코드가 동시에 실행되는 것을 허용하지 않습니다!

 

 

3. 자바스크립트 비동기 런타임 과정

자바스크립트가 비동기 코드를 어떻게 동작시키는지 알아보기 위해서는 자바스크립트 런타임 환경에 대해 알아야합니다.

자바스크립트가 실행될 때는 다음과 같은 요소들이 실행을 도와줍니다.

 

 

 

• Call Stack : 자바스크립트에서 순차적으로 처리해야할 함수들이 저장되어 있는 공간
• Web API : 웹 브라우저에서 제공하는 API로 Ajax난 Timeout등 비동기 작업들
• Task Queue : Callback Queue라고도 하며 Web API에서 넘겨받은 Callback 함수를 저장
• Event Loop : Call Stack이 비어 있다면 Task Queue의 작업을 Call Stack으로 옮김
• Memory Heap :  객체(변수)들의 정보

 

4. 동작 과정

쉽게 설명을 해드리자면

Stack은 여러분들의 코드 실행시키는 곳이고 하나밖에 없습니다.

하나밖에 없어서 싱글 스레드 언어 라고 합니다.

그래서 병렬처리를 못합니다.

 

 

setTimeout, ajax와 같은 함수를 처리하려면, 대기실로 이동을 합니다.

 

 

대기실에서 대기가 끝난 코드들은 Task Queue로 흘러가게 됩니다.

 

 

Task Queue에서 Stack으로 옮기려면, Stack이 비어있어야만 가능합니다.

그래서 실행중인 작업이 있을경우, Queue에서 빠져나올수가 없습니다 🥹

그리고 Task Queue에서 Call Stack으로 옮기는 과정을Event Loop라고 합니다.

 

---

 

동작 예시

분명 이론적으로만 들으면 아 그래! 뭔지 알겠어 이러겠지요

어떻게 아냐구요? 알고 싶지 않았어요

 

 

1. 예시 1

코드를 보고 한번 결과를 생각해봅시다!

console.log(1);
setTimeout(() => {console.log(2)}, 1000); 
console.log(3);

 

 

이럴 경우, 굳이 생각을 하지 않아도 1 3 2가 뜨는건 아실 겁니다.

왜냐? 당연하니까!

 

 

그럼 다음 경우는 어떻게 생각하시나요?

console.log(1);
setTimeout(() => {console.log(2)}, 0); 
console.log(3);

 

대기시간이 0이니 1 2 3이 뜨지 않을까 싶지만, 1 3 2가 뜨는걸 볼 수 있습니다.

 

왜 1 3 2냐 하믄, setTimeout, ajax등의 코드 들은 무조건 대기실로 간다고 했었죠

대기실을 통해 Queue에서 Stack의 작업이 끝나기를 기다리니, 3이 먼저 실행이 되겠습니다!

 

 

2. 예시 2

스택은 바쁘면 안된다고 했습니다.

그럼 스택을 바쁘게 해보면 어떻게 될까요?

setTimeout(()=>{console.log("hello world")}, 1000);
let cnt = 0;
while(cnt <= 1500000000) {
    cnt += 1;
}
console.log("end");

 

 

실행시키는순간 잠깐 멈추더니 5초 정도 후에 end와 hello world가 동시에 나오는걸 볼 수 있습니다.

생각대로라면, 1초뒤에 hello world가 먼저 나오고, 그 후로 end가 나와야 맞을 것 같지만

 

스택이 바쁜 작업으로 인해 hello world가 못 빠져나오는걸 볼 수 있습니다.

 

또한!! 스택이 하나밖에 없기 때문에 해당 작업이 실행되는 동안 클릭이 아예 안먹는것도 볼 수 있지요!

그러니 마우스나 키보드 이벤트 또한 Call Stack에서 작업을 한다고 볼 수 있습니다!

 

 

---

 

이걸로 교훈을 얻어갈 수 있겠네요

1. Stack을 바쁘게 하지말자

2. Queue도 바쁘게 하지 말자 (Queue또한 바쁘게 하면 느릿느릿한 결과를 볼 수 있습니다)

ex) 클릭 한번당 ajax, setTimeout 100개씩 추가한다던가 등등..

 

 

 

 

참고문헌

싱글 스레드와 멀티 스레드

 

자바스크립트는 왜 싱글 스레드(Single thread)일까?