[JS] JS 동작원리 (stack, Queue, event loop)

🤔 다른 언어와의 차이점?

console.log('a');
setTimeout(function(){console.log('b')}, 1000);
console.log('c');

 

JS를 제외한 보통의 다른 언어들은 위에서부터 아래로 한 줄 한 줄 실행을 하여 위와 같은 코드를 작동시킨다고 하면,
a -> (1초 쉬고) b -> c 이런식으로 작동이 된다.

하지만, JS는 다르다.
setTimeout 함수를 사용하는 경우 다른 코드들을 다 실행시킨 후,
setTimeout 함수에 관한 코드만 1초(혹은 그 이상) 뒤에 작동이 된다.
왜 이렇게 동작하는지 알아보자!

---

✨ JS 동작원리

1. 코드를 작성하면 STACK이라는 곳에서 위에서부터 아래로 순서대로 실행되는데,
2. Ajax 요청 코드, 이벤트 리스너, setTimeout 같은 비동기 함수들을 대기실로 이동시키고,
3. 이동하지 않은 나머지 함수들을(동기 함수) STACK에서 먼저 실행시킨다.
4. 그리고나서, 비동기 함수들을 처리해야 하는데 , 그때 바로 STACK으로 가는 것이 아니라 QUEUE를 거쳐서 간다.
5. 처리된 비동기 함수들을 QUEUE에 줄 세워서 STACK이 비어있을 경우(동기적 함수들을 다 실행하고나서),
비동기 함수들을 순서대로 실행시킨다.

정리를 하자면 : a 실행 -> b(대기실) -> c 실행 -> 1초 후 b(queue) -> stack이 빔 -> stack으로 이동 후, b 실행

---

※ 참고 코딩 애플 : https://www.youtube.com/watch?v=v67LloZ1ieI