[프론트엔드] 자바스크립트와 비동기처리

소개

오늘은 자바스크립트의 비동기처리에 대해 알아보도록 하겠습니다.

---

목차

- 자바스크립트가 비동기 처리가 가능한 이유

- 비동기처리 예시

---

1) 자바스크립트는 싱글스레드임에도 비동기 처리가 가능한 이유

• 싱글스레드 외에 Web API, Task Queue, Event Loop 와 같은 요소들이 존재하기 때문입니다.
• 즉, 자바스크립트 자체는 싱글스레드이지만 자바스크립트가 브라우저 위에서 동작하기 때문입니다.

 

• Web API: 브라우저에서 제공하는 API 입니다. DOM, Ajax,Timeout 등이 있으며 CallStack에서 실행된 비동기 함수는 Web API 를 호출하고, Web API는 콜백 함수를 Task Queue 에 넣습니다. 
• Event Loop: CallStack 과 Task Queue의 상태를 체크하여, CallStack이 비어 있을 때, Task Queue의 첫번째 콜백을 CallStack에 밀어 넣습니다. 

---

2) 비동기처리 예시

console.log('hello');

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

console.log('hello3');

// hello
// hello3
// hello2

 

1. console.log('hello') 구문이 CallStack에 push되고 실행된 뒤 pop 됩니다. 그럼 콘솔창에는 hello가 출력됩니다. 
2. 다음은 setTimeout을 호출합니다. setTimeout은 브라우저에서 제공하는 API로 Web API로 호출됩니다. CallStack에서는 setTimeout 호출 자체는 완료되었으므로 스택에서 pop합니다. 
3. 다음은 console.log('hello3'); 구문이 CallStack에 들어오고 실행되고 다시 지워집니다. 
4. 3초 후 콜백을 Task Queue로 넣습니다. 
5. 이벤트 루프는 CallStack과 Task Queue의 상태를 체크하면서 스택이 비어있을 경우 Task Queue의 첫번째 콜백을 CallStack에 넣습니다.
6.  console.log('hello2')이 CallStack에 들어와 실행됩니다.