[JavaScript] JavaScript 웹 브라우저 동작 원리

파이썬 같은 언어는 순서대로 코드를 실행해 주지만

but 자바스크립트는 순서대로 코드 실행하지 않는다.

 

ex)

console.log(1+1)

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

console.log(3+3)

위의 코드를 실행시키면

1+1 → 3+3 → 2+2

순으로 코드가 실행된다.

원래 순서대로면 1+1 → (1초 후) 2+2 → 3+3 실행되어야 하지않나

 

 

코드 위에 적든 밑에 적든

빠른 것부터 실행이 되는 것이다.

 

 

 

웹 브라우저 동작 원리

 

 

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

 

 

웹 브라우저 내부에 Stack이라는 공간이 있고 거기서 코드를 하나하나 실행시켜 준다 (코드를 실행해 주는 곳)

Stack은 하나밖에 없어서 한 번에 코드 한 줄만 실행을 시키는 것!

그래서 자바스크립트를 single threaded라고 한다.

 

 

setTimeout은 바로 실행되지 않고 1초 후에 실행되는 메소드이므로 잠깐 대기실에 보내졌다가 실행되는 것이고

( * 대기실로 보내는 코드들 = 기다림이 필요한 코드들 : Ajax 요청 코드, 이벤트리스너, setTimeout 

대기 끝난 코드들은 Queue라는 공간에 줄을 세우고 Stack으로 하나씩 올려져서 실행된다. 단, Stack이 비어있을 때만 올려 보냄)

 

 

만약 setTimeout을 0초 후에 실행되게 코드를 짠다면 순서대로 실행될까? NO!

setTimeout은 무조건 대기실로 보낸다.

 

 

※ 오늘의 교훈

1. Stack을 바쁘게 만들면 안 됨

2. Queue를 바쁘게 만들면 안 됨

3. 자바스크립트는 동기적으로 처리 (한 번에 한 줄 순서대로 코드가 실행)

4. 가끔 비동기적인 처리도 가능(setTimeout, 이벤트리스너, ajax 함수 쓸 때)