[JavaScript] Event Loop (setTimeout, 동기와 비동기)

🦋목차🦋

1. setTimeout()

2. 동기와 비동기

3. JavaScript는 동기 언어이다.

4. 내부에서 어떻게 진행되는지 살펴볼까요

5. setTimeout의 지연 시간이 0이라면?

---

setTimeout()

전역 setTimeout() 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정한다.

두 번째 매개변수로 들어간 밀리초 단위가 지난 후, 첫 번째 매개변수인 콜백 함수가 호출이 된다.

console.log('1');

setTimeout(()=> {
	console.log('2');
}, 3000);

console.log('3');

>> 3초 이후에 console.log(2)를 호출.

---

동기와 비동기

동기 (Synchronous, 시간을 맞춤)	비동기 (Asynchronous, 시간을 맞추지 않음)
대학생이 되는 법 1학년 2학년 3학년 대학교가기	취직하는 법 토익공부 자격증 취득 영어공부 취업

둘의 차이

• 동기 - 어떤것을 끝내고 나서 다음꺼를 할 수 있음 (이전의 것이 끝나야 다음것 가능)
• 비동기 - 1번을 하면서 2번을 할 수 있고, 3,4번도 할 수 있다.

JavaScript는 동기 언어이다.

자바스크립트는 한 줄 실행하고 또 한 줄 실행하는 동기 언어이다.

하지만 맨 위에서 본 settimeout에 콜백함수를 실행하는 비동기 코드를 사용했다.

뭐야? 자바스크립트는 동기 언어인데 어떻게 비동기 코드를 사용하는거야? 라고 할 수 있다.

Window.document.

비동기 코드 작성을 위해 이외의 도움을 받아서 처리한다.

위에 setTimeout도 보면 사실 자바스크립트의 부분이 아니다!

브라우저에서 사용을 한다면 브라우저 api를 사용하는 것이며 (window object)

Node에서 사용한다면 Node api를 사용하는 것이다. (global object)

결국!

자바스크립트는 비동기처럼 사용할 수 있지만, 결국은 다른 것의 도움을 받아서 비동기처럼 사용할 수 있다!

---

내부에서 어떻게 진행되는지 살펴볼까요

아래 있는 소스코드가 자바스크립트와 Web API를 사용해서 어떻게 진행되는지 살펴보자.

자바스크립트 엔진 메모리 힙과 호출스택

 

자바스크립트 코드를 실행하려면 자바스크립트 엔진이 필요하다.

그리고 엔진은 두 가지 주요 요소인 메모리 힙과 호출 스택으로 구성된다.

• 메모리 힙 : 메모리 할당이 발생하는 곳 (변수를 정의하면 저장이 되는 창고)
• 호출 스택 : 코드가 실행될 때 스택들이 이곳에 쌓이게 된다.

더이상 실행할 함수가 없다면 호출 스택이 비게된다.

 

⇒ 여기서 call stack이 어떻게 작동할까

---

Call Stack 작동하는 것 살펴보기

아래 있는 소스코드를 사용해서 Call Stack에서 어떻게 진행되는지 살펴보자

 

→ B는 A 함수 안에서 호출이 되네용

A-1 출력한다음 B가 1.5초 이후에 호출이되므로, A-2 출력

---

---

setTimeout의 함수가 어디로 갔다가 다시 온건가

callstac에서 webAPI로 전달해서 여기서 1.5초 대기. 그 후 콜백 큐로 전달.

이벤트루프는 콜백큐와 콜스택을 주시를 하다가 먼저 들어온 순서대로 콜백큐의 함수를 콜스택으로 전달해줌.

---

내부 진행되는 모습을 보여주는 사이트

• http://latentflip.com/loupe
• https://kamronbekshodmonov.github.io/JELoop-Visualizer/

---

setTimeout의 지연 시간이 0이라면?

setTimeout(fn, 0) 이렇게 되면 0초 후에(즉시 실행) 되는 것을 보장할까?

⇒ 그렇진 않다. (보장하지 않음)

0초 이후에 함수가 호출되는것을 보장하는거지, 딱 0초가 지난 다음에 콜백함수 호출하는것을 보장하는것은 아님.

---

callstack size exceeded

아래와 같이 소스코드가 작성되면 에러가 나게 된다.

에러코드

 

⇒ 쌓을 수 있는거 이상으로 쌓여버리면 에러가 난다.