TIL
1. 동기(Sync)와 비동기(Async)에 대한 개념
JS is a synchronous, blocking, single-threaded language. Only one operation can be in progress at time.
• Synchronus: 하나의 코드가 끝나야지만 다른 코드 실행 가능
• Asynchronus: 코드가 병렬적으로 실행 가능
보는 것과 같이 Async는 여러개의 코드가 병렬적으로 동시에 수행이 되고 있고, Sync는 하나의 코드가 완료되어야지만 다음 코드가 실행되고 있는 것을 볼 수 있다.
그런데 여기서 문득 궁금증이 들 수가 있다. JS는 call stack(말 그대로 function을 call하고 stack은 아래에서부터 차곡차곡 쌓이는 저장소의 개념으로 이해하면 된다.)이 하나밖에 없는데 비동기적으로 함수를 수행하려면 call stack이 여러개가 있어야지만 가능한 것 아닐까?
JS가 비동기가 가능한 이유는 Web APIs(DOM, AJAX, Timeout(setTimeout))들이 call stack으로부터 함수를 대신 받아서 마치 call stack이 여러개인 것처럼 실행할 수 있게 해주기 때문이다.
console.log('Hi')
setTimeout(function cb1(){
console.log('cb1');
}, 5000);
console.log('Bye')a)
b) console.log('Hi') stack(FILO)에서 실행되고 다 실행되면 call stack에서 없어진다.
c) setTimeout cb1이 call Stack에 쌓이고 실행된다.
d) setTimeout은 실행되었으므로 stack에서 빠지고 5초 동안 WebAPIs내에 cb1이 존재한다.
e) console.log('Bye')가 스택 내로 들어간다. 아직 5초가 지나지 않았으므로 Web APIs내에는 아직 cb1이 존재한다.
f) 5초가 지나면 cb1이 callback queue(FIFO)안으로 들어간다.
g) Event Loop은 call stack과 callback queue를 계속 monitoring 하면서 콜스택에 실행되고 있는 함수가 없으면 큐 안에 있는 함수를 보낸다
h) cb1안에 있는 console.log('cb1')이 불러져온다(call back)
i) console.log('cb1')이 실행되고 cb1은 console.log('cb1')의 동작만 수행하도록 되어있으므로 이제 모든 Function이 수행되고 stack이 비워지게 된다.
j) output
