Js Stack, Queue

 Js 에서는

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

이렇게 하면 어떻게 출력될까 ?

답은 2 6 ... 4가 출력된다 

 

보통의 다른프로그래밍언어와 동작을 하는 방식과는 다르다 파이썬에 경우는 

2 ... 4 6

이런식으로 출력이 된다

 

왜 이렇게 출력이 되는걸까 ? 

자바스크립트는 코드순서에 상관없이 빠른처리가 가능한거 부터 실행하기 때문이다 

 

웹브라우저 내부에는 스택과 콜이 있다 

스택( Stack)

우리가 쓴 코드를 한줄한줄 넣고 실행한다

한번에 하나의 코드만 실행이 가능하다 그래서 Js는 싱글 쓰레드 언어라고 한다 

변수와 함수를 만나면 Heap 이라는 곳에 가서 저장된 변수, 함수를 가져다가 사용한다 

 

 

그러면 처리가 오래걸리는 코드는 어떻게 처리를 하냐 ! 

 

Ajax 요청코드 

이벤트리스너

setTimeout 등과 같이 

 

Js 내부적으로 시간이 걸리는 코드는 따로 대기실에 보관하고  Stack 이 다 끝나고 비워져있을때 

그 코드를 Queue 로 이동시키고 스택으로 하나하나씩 올려서 스택에서 처리를한다

 

 

위에서부터 하나하나 처리하는게 아니고 따로 보관하다가 스택이 비워있으면

큐로 보내고 실행하기 때문이다 

 

그래서 이걸 비동기적인 처리 라고 한다 

 

 

시간이 오래걸리는 코드가 있으면 스택에서

그 코드를 처리해야하므로 다른기능에 

마비가 생긴다 ! 

 

스택에서 오래걸리는 코드를 처리하고 있을때 이벤트리스너나 Ajax요청 코드 와 같이 비동기적인 처리를 하려고 하면 

이런식으로 브아우저에서 응답 없는 페이지가 모달창으로 나오게 된더

 

이런식으로 뜬다

 

 

 

 

코딩애플센서 : 코드를 잘짜고 싶으면 동작원리를 배우면 된다 

그리고 웹브라우저 동작원리도 알아야한다

 

우리가 짠 Js 코드는 브라우저 엔진이 실행하기 때문이다 !!