JavaScript의 비동기

우선 비동기를 설명하기 전 콜백함수를 먼저 알아야 한다.

콜백함수(Callback)란?

* 다른 함수의 인자로 사용되는 함수

* 이벤트에 의해 호출되는 함수

콜백함수의 예

// 다른 함수( setTimeout() )의 인자로 사용되고 있음
setTimeout(() => {
    console.log("Hello world!")
}, 500)

function printHello() {
    console.log("Hello world!")
}
setTimeout(printHello, 500)

//이벤트에 의해 호출되고 있음
<button id="my-btn">CLICK!</button>
let objBtn = document.getElementById("my-btn")
objBtn.addEventListener("click", () => {
    console.log("HELLO!!") //이 익명함수가 콜백함수임
})

 

자바스크립트 엔진

자바스크립트 코드를 해석하고 실행하는 인터프리터이다.

특징

1. 자바스크립트 엔진은 브라우저마다 다르다.
2. 완전 동기적으로 실행한다.
3. 힙과 호출스택으로 나뇐다.
   1. 힙 : 메모리 할당이 일어남. 변수와 객체 등이 저장되는 곳
   2. 호출스택(call stack) :  함수가 호출되는 순서대로 쌓이는 스택. 호출 스택이 비어있다는 것은, 그 다음 호출할게 없다. 즉 프로그램이 끝났다는 뜻

 

브라우저의 구조

브라우저에는 이벤트루프와 콜백큐(Task Queue)가 있다.

이벤트 루프의 역할 : 콜스택과 콜백큐(태스트큐)를 주시하고 있다가, 콜스택이 비어있으면 콜백큐에서 콜백함수를 가져다가 콜스택에 넣는다. 

Web API는 브라우저에서 자주 쓰이는?것들을 쉽게 사용할 수 있도록 도와주는 객체 모음들이다.

(DOM관련한 것들, 오디오 관련, 타이머 관련, local storage관련 등등이 포함된다.)

 

예를 한번 가져왔다.

const callSomeone = () => {
    console.log(`전화를 건다.`)
}
const sayHello = () => {
    setTimeout(() => {
        console.log(`안녕하세요`)
    }, 5000)
}
const prepareMemo = () => {
    console.log('메모지 준비')
}

callSomeone()
sayHello()
prepareMemo()

콘솔에 메시지를 찍는 함수들이다.

 

1. allSomeone() 함수를 호출하였으니 콜스택에 쌓인다. 바로 실행된다.
2. sayHello() 함수를 호출하였으니 setTimeout()함수가 콜스택에 쌓인다. 
3. setTimeout함수는 타이머를 생성하여 Web API에 타이머를 토스한다. (이게 실행된거임)
4. prepareMemo()함수를 호출하였으니 콜스택에 쌓이고 바로 실행된다.
5. 그 와중에 5초가 지나면 태스크큐 (콜백큐)에 콜백함수인 () => console.log('안녕하세요')를 넣는다.
6. 콜스택이 비어있다면  () => console.log('안녕하세요') 를 콜스택으로 옮긴다.
7. 실행된다.

ppt로 만들었던 것 찍어보았음.

 

콘솔에는 아래와 같이 찍힌다.

 

 

그런데 만약, setTimeout(, 0)이라면?

0초후에 시작이므로 동기처럼 실행될까?

const callSomeone = () => {
    console.log(`전화를 건다.`)
}
const sayHello = () => {
    setTimeout(() => {
        console.log(`안녕하세요`)
    }, 0)
}
const prepareMemo = () => {
    console.log('메모지 준비')
}
callSomeone()
sayHello()
prepareMemo()

이럴 경우 콘솔에 어떻게 찍힐까?

1)

전화를건다.

안녕하세요

메모지 준비

2)

전화를건다.

메모지 준비

안녕하세요

 

정답은......

2번이다.

 

0초이지만 콜백큐에 다녀오는 프로세스를 마쳐야하고, 콜스택이 비어야 비로소 안녕하세요가 찍힐 수 있기 때문에, 2)처럼 작동하는 것이다.