[JavaScript] 자바스크립트 동작원리 (Stack, Queue, 동기와 비동기)

자바스크립트 코드의 동작 원리

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

이 코드를 실행하면

2

6

4

이러식으로 출력 결과가 나온다.

이 원리는 웹브라우저는 자바스크립트 코드를 실행시켜주는 엔진이다.

 

이때 해석할 때 단계는,

스택이라는 공간에 코드를 집어넣고 한줄한줄 실행을 해준다.

(변수를 만났을 때는 힙이라는 공간에 넣고 가져다 쓴다.)

 

스택은 하나밖에 없기 때문에 한번에 코드 한줄 밖에 실행을 못한다. 이를 single threaded 라고 한다.

setTimeout같은 코드는 바로 실행을 할 수 없는 코드이기 때문에, 잠깐 대기실에 놔두고 실행하다.

 

이 대기실에 보내는 코드들은 Ajax요청 코드, 이벤트 리스너 , setTimeout 등이 있다.

 

1초가 지났을 때 스택에 바로 옮겨 오는 곳이 아니라 큐라는 대기실이 있어 처리가 완료된 코드들을 줄을 세우고 스택에 하나씩 올려보낸다. (이때, 조건은 스택이 비었을때만 올려보낸다. )

동기와 비동기 이해

이 원리를 이용하면 동기적 비동기적 용어를 쉽게 이해할 수 있다.

자바스크립트는 동기적(스택에서 한번에 한줄씩 실행)으로 실행된다.

 

하지만 비동기적인 처리도 가능하다. 한번의 한줄씩이 아닌, 빨리 되는 것 먼저 실행하고 대기실을 거쳐 실행되는 코드를 비동기적이라고 하며, Ajax요청 코드, 이벤트 리스너 , setTimeout 등이 있다.