[javascript] Call Stack과 Event Loop 알아보기

아래 내용은 제로초님의 강의를 듣고 나름대로 정리를 하는 내용입니다.

[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지 - 인프런 | 강의

동기 & 비동기

• 동기 : 요청 후 응답을 받으면서 위에서부터 순서대로 다음 동작 실행
  • 응답을 받기 전에는 다음 동작이 실행되지 않는다.
• 비동기 : 요청 후 응답과 상관없이 다음 동작이 실행

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

function run(){
	console.log("run-run");
	setTimeout(()=>{
		console.log("wow~");
	},0);
	new Promise((resolve,reject)=>{
		resolve("hi");
	}).then((result)=>{
		console.log(result);
	});
	onemore();
}

setTimeout(()=>{
	return run();
},5000);

위 파일을 실행하면 출력이 어떤 순서로 되는지 알기 위해서는 CallStack과 Background, Task Queue, Event Loop에 대해 알고 있어야 한다.

기본적으로 동기 함수는 CallStack에 있다가 순차적으로 실행되지만 비동기 함수는 Background에서 Task Queue로 넘어가고 CallStack이 비어있을 때 Event Loop를 통해 Task Queue에 있던 동작이 CallStack으로 넘어가며 실행된다.

이미지를 새탭으로 열면 크게 보실 수 있습니다.