[자바스크립트] 메모리 구조와 EventLoop

자바스크립트는 싱글스레드로 동작한다.

싱글스레드이지만 비동기적인 요소를 처리 할 수 있는데 그 이유는 EventQueue와 Event Loop가 있기 때문이다.

MDN에서는 아래와 같이 정의를 하고 있습니다.

Stack - 함수 호출은 프레임들의 스택을 형성합니다.
Heap  - 객체들은 힙 안에 할당됩니다. 힙은 구조화되지 않은 넓은 메모리 영역을 지칭합니다.
Queue - JavaScript 런타임은 처리 할 메시지 목록 인 메시지 대기열을 사용합니다. 
        각 메시지에는 메시지를 처리하기 위해 호출되는 관련 함수가 있습니다.

 

function hello(){
	console.log("hello");
}

function bye() {
	console.log("bye");
}

hello();
setTimeout(function() {
	console.log("world");
}, 0);
bye();

//hello
//bye
//world

위의 코드를 살펴보면 hello -> world -> bye 순으로 동작이 될 것 같으나, 실제로는 hello -> bye -> world순으로 출력이 된다.

 

*setTimeout은 WebAPI로 2번째 전달인자(ms단위)의 시간이 지난 후 callback 함수를 실행시켜준다.

 

이유는 setTimeout, Ajax(비동기 통신)같은 WebAPI는 EventQueue에 들어가게 되는데 EventLoop가 CallStack이 비어있는지 체크를 하고 비어있을 경우 CallStack으로 전달하게 된다.

 

따라서 콜스택이 많이 쌓여 있는 경우에는 의도하지 않게 동작 하는 경우가 있을 수 있다.

 

 

*참조사이트

https://velog.io/@wan088/JavaScript-EventLoop%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0-%EB%8F%99%EC%9E%91
https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop