호출 스택, 이벤트 루프

코드가 어떻게 실행될 지 호출 스택을 그려 보면 쉽게 파악할 수 있다.

호출 스택은 자바스크립트가 동기적으로 어떻게 작동하는지 파악가능하게 해 줌.

 

호출 스택

: 맨 아래에 가상의 전역 컨텍스트(크롬에서는 Anonymous라고 함)가 있고,
함수 호출 순서대로 아래에서부터 쌓이며 실행은 역순으로 된다.

함수 실행이 완료되면 스택에서 빠진다. LIFO 구조라서 스택이라고 불린다.

stack : 밑에서부터 쌓이고 위에서부터 꺼낼 수 있도록 하는 방식.

호출 스택은 실행 콘텍스트와 밀접한 연관이 있다.

 

하지만 호출스택만으로는 자바스크립트의 코드 실행순서를 모두 설명할 수 없다.

비동기함수 때문! 대표적으로 setTimeout 이 있다.

= 일정 시간 이후에 특정 함수를 실행시키도록 하는 명령어

 

코드가 백그라운드로 가면 호출 스택과 동시에 진행된다.

백그라운드가 먼저 끝나도 호출 스택이 먼저 처리된다.

 

이벤트루프

function run() {
console.log('3초 후 실행');
}
console.log('시작');
setTimeout(run, 3000);
console.log('끝');

위 파일을 시작하면 호출 스택의 맨 아래에 anonoymous가 깔린다.

함수 run이 호출되면서 메모리에 run이 저장된다.

'시작'이 호출 스택에 쌓이고 바로 실행되고 사라진다. → 콘솔창에 '시작' 뜸

setTimeout이 호출되고 끝나면서 백그라운드에 타이머를 넣어 준다. ex. 타이머(run,3초)

코드가 백그라운드로 가면 호출 스택과 동시에 실행된다.

그 이후 호출 스택에는 '끝'이 쌓이고 실행되고 사라진다. → 콘솔창에 '끝' 뜸

백그라운드에 있는 일이 끝나더라도 호출 스택이 비어 있지 않으면 우선 호출 스택에 있는 것부터 실행한다.

3초 타이머가 끝나고 백그라운드의 타이머가 태스크 큐로 이동한다. (이 때 백그라운드는 비워진다.)

이 때,
이벤트 루프가 호출 스택이 비어 있을 때
태스크 큐에 있는 함수들을 호출 스택으로 끌어와 실행해 준다.

→ 호출 스택이 run을 실행하면서 콘솔창에 '3초 후 실행' 이 뜨고 호출 스택은 모두 비워진다.

 

Task que 안에서도 우선순위가 있다.

일반 타이머보다 Promise의 then, catch /  Process의 nextTick 등이 더 우선순위가 높다.

function oneMore() {
  console.log("함더");
}
function run() {
  console.log("끼요오옷");
  setTimeout(() => {
    console.log("와아앙");
  }, 0);
  new Promise((resolve) => {
    resolve("안녕하세요?");
  }).then(console.log);
  oneMore();
}
setTimeout(run, 3000);

 

 

함수를 선언한다 = 함수를 메모리(컴퓨터의 임시 저장장치)에 올렸다 -> 새로고침하면 까먹음

 

참조 : 제로초(zerocho)님 인프런 강의

참고 링크

https://youtu.be/8aGhZQkoFbQ