[JS] 자바스크립트 동작원리

자바스크립트는 Single thread방식으로 한번에 한줄의 코드가 실행된다.

 

console.log('1')
console.log('2')
console.log('3')

 

코드를 실행하면, 당연히 아래와 같은 결과로 출력될 것이다.

 

만약, 바로 실행할 수 없는 setTimeout함수를 사용하면 위 코드처럼 순서대로 실행될까? 아니다. 자바스크립트는 setTimeout과 같이 바로실행 할 수 없는 Ajax, eventListener함수를 만나면 제외하고 바로 실행가능한 코드를 먼저 실행한다.

 

console.log('hello')
setTimeout(() => {
console.log('timeout')},2000)
console.log('bye')

코드를 작성한 순서대로 실행되지 않는 것을 확인할 수 있다. 

코드가 입력되면, 바로 실행가능한 코드 / 즉시 실행 불가한 코드 이렇게 분류를 한다. 

 

바로실행 가능한 코드면 stack에 나중에 입력한 코드부터 쌓인다. setTimeout은 일정 시간을 대기 한 후 실행되어야 하는 코드이기 때문에 잠시 대기한 후 큐로 이동한다. 스택에 있는 코드가 모두 실행되고 난 후 큐에서 스택으로 이동한다. 스택이 비어있어야 큐에서 스택으로 이동할 수 있음!! 

 

 

* 참고자료

https://www.youtube.com/watch?v=v67LloZ1ieI&t=245s