자바스크립트 동작원리 (Stack, Queue, event loop)

console.log(1+1)
setTimeout(function(){}, 1000)
console.log(2+2)

//결과
2
4

console.log(1+1)
setTimeout(function(){console.log(2+2)}, 1000)

//결과
2
//1초경과
4

console.log(1+1)
setTimeout(function(){console.log(2+2)}, 1000)
console.log(3+4)

//결과
2
7
//1초경과
4

웹브라우저 : 자바스크립트를 실행시켜주는 엔진

Stack이라는 공간안에서 짜여진 코드를 한줄한줄 실행시켜줍니다.
실행을 시켜줄때 변수를 만나면 Heap라는 공간에서 변수를 가져다 사용하는 방식으로 동작합니다.

Stack은 유일하기 때문에 한번에 코드 한줄밖에 실행못합니다.
그래서 자바스크립트는 single threaded language라 합니다.

setTimeout 함수는 바로 실행할 수 없는 코드이기 때문에 Stack에 넣어 실행하지 않습니다.
처리가 오래걸리는 코드들을 대기 시켜줍니다.

대기하는 코드들 :

• Ajax 요청코드 (Ajax 서버에서 데이터를 받아오는 코드)
• 이벤트리스너
• setTimeout 등

Queue라는 공간에 대기가 끝난 코드들(setTimeout)을 차례로 Stack으로 올려보냅니다.
(Stack이 비어있을 경우에만 Queue에서 Stack으로 올려보냅니다.)

자바스크립트는 원래 동기적으로 처리됩니다.
-> stack에서 한번에 한줄 순서대로 실행이됩니다.

자바스크립트는 가끔 비동기적인 처리도 가능합니다.
(Ajax 요청코드, 이벤트리스너, setTimeout)