Memory Heap : 메모리 할당이 일어나는 곳
Heap : 구조화 되지 않은 넓은 메모리 영역 → 객체(변수, 함수 등) 담긴다.
Call stack(호출 스택) : 실행될 코드의 한 줄 단위로 코드를 해석하고 실행되는 것 → 인터프리터 언어
Web APIs(노드에서는 백그라운드로 설명된다) : 비동기 처리를 담당한다.
Callback Queue(Task Queue, Evnet Queue 등 다양한 형태로 설명 된다) : 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당 된다.
Event Loop : Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해준다.
function first(){
second();
console.log('첫 번째');
}
function second(){
third();
console.log('두 번째');
}
function third(){
console.log('세 번째');
}
first();
third();
=======================
세 번째
두 번째
첫 번째
세 번째
Call Stack안에 anonymous가 먼저 쌓이고 Node에서는 main이라고 함
// 이렇게 함수 호출이 되면 Call stack 이 다 쌓이면 실행이 된다.
1. anonymous → first() → second() → third() → console.log('세 번째')
// third가 실행이 끝나면 역순으로 돈다.
2. anonymous → first() → second() → console.log('두 번째')
// second() 호출도 끝나면 첫번째만 남는다.
3. anonymous → first() → console.log('첫 번째')
// first(); 함수가 다 실행되면 또 아래 있는 third(); 가 실행 된다.
4. anonymous → third() → console.log(’세 번째’)
// 다 끝나면 Call Stack안에 있는 것들이 모두 사라진다.
Call Stack마다 한계가 있는데 한계점을 넘어서면 종료된다. call stack size exceeded에러가 떨어진다. 보통 1만개를 가지고 있다 브라우저마다 다름 크롬은 약 12만개다.
이벤트 루프는 처음에 비동기 함수를 백 그라운드로 보냈다가 => 태스크 큐로 옮겨 간다.
단!!!! => 콜 스택이 비었을 때만, 이벤트 루프가 콜 스택으로 올려보낸다.
즉, stack을 너무 바쁘게 만들면, 비동기 함수가 제때 들어가지를 못하고, 브라우져 프리징 현상이 발생한다.
=> 즉, 우리는 콜 스택을 너무 바쁘게 만들지 말고, 하나의 이벤트에 너무 많은 이벤트 리스너를 달아놓는 방식을 지양해야 한다.