자바스크립트 이벤트 루프와 비동기 통신의 이해

싱글 스레드 자바스크립트

프로세스

스래드

자바스크립트는 왜 싱글 스레드?

1995년에 처음 나왔고 그때는 멀티 스레드에 대한 개념이 대중화 되던 시기가 아니였다. 브렌던 아이크가 브라우저의 간단한 스크립트를 지원할 목적으로 LiveScript를 만든게 자바스크립트의 시작.

자바스크립트의 싱글스레드는 무엇을 의미하나

비동기란?

console.log(1)
setTimeout(() => {
	console.log(2)
}, 0);
setTimeout(() => {
	console.log(3)
}, 100);
console.log(4)

이벤트 루프

호출 스택과 이벤트 루프

function bar(){
	console.log('bar')
}
function baz(){
	console.log('baz')
}
function foo(){
	console.log('foo')
	bar()
	baz()
}
foo()

1. foo가 호출스택에 들어감

2. foo 내부의 console.log가 호출스택에 들어감

3. 2의 실행이 완료되고 다음 코드로 진행

4. bar가 호출 스택에 들어감

5. bar 내부의 console.log가 호출스택에 들어감

6. 5의 실행이 완료되고 다음 코드로 진행

7. bar에 남은 코드가 없으니 호출스택에서 bar가 제거

8. baz가 호출 스택에 들어감

9. baz내부에 console.log가 호출스택에 들어감

10. 9의 실행이 완료되고 다음 코드로 진행

11. baz에 남은 코드가 없으니 스택에서 제거

12. foo에 남은 코드가 없으니 스택에서 제거

13. 호출 스택이 완전히 비었다.

function bar(){
	console.log('bar')
}
function baz(){
	console.log('baz')
}
function foo(){
	console.log('foo')
	setTimeout(bar(), 0)
	baz()
}
foo()

1. foo가 호출스택에 들어감

2. foo 내부의 console.log가 호출스택에 들어감

3. 2의 실행이 완료되고 다음 코드로 진행

4. setTimeout이 호출 스택에 들어감

5. 4번에 대한 타이머 이벤트가 실행되어 태스크 큐로 들어가고 바로 호출 스택에서 제거된다.

6. baz가 호출 스택에 들어감

7. baz내부에 console.log가 호출스택에 들어감

8. 9의 실행이 완료되고 다음 코드로 진행

9. baz에 남은 코드가 없으니 호출 스택에서 제거

10. foo에 남은 코드가 없으니 호출 스택에서 제거

11. 호출 스택이 비어짐

12. 이벤트 루프가 호출 스택이 빈것을 확인 태스크 큐를 확인하니 4번에서 들어온 내용이 있어 bar를 호출스택에 넣음

13. bar내부의 console.log가 호출 스택에 들어감

14. 13의 실행이 끝나고 다음으로 넘어감

15. 더이상 bar에 남은 코드가 없어 호출 스택에서 제거

태스크 큐

비동기 함수의 수행 주체

태스크 큐와 마이크로 태스크 큐

function bar(){
	console.log('bar')
}
function baz(){
	console.log('baz')
}
function foo(){
	console.log('foo')
}

setTimeout(foo, 0)
Promise.resolve().then(bar).then(baz)

console.log('a')

setTimeout(() => {
	console.log('b')
}, 0)

Promise.resolve().then(() => {
	console.log('c')
})

window.requestAnimationFrame(() => {
	console.log('d')
})

requestAnimationFrame는 브라우저의 다음 리페인트 전에 콜백 함수 호출을 가능하게 하는 함.

이벤트 루프 자세히 살펴보기

웹브라우저와 Node.js의 Web API 차이웹브라우저의 Web APIs 와 Node.js 의 Node.js APIs 들은 구성은 비슷하지만 동작 측면에서 약간 차이가 있다. 웹브라우저의 Web APIs는 비동기 작업이 끝나면 스스로 callback queue에 적재하지만, Node.js API들은 이벤트 루프가 직접 옮겨준다. 예를들어 Timer Web API에서 타이머가 모두 지나가면, 자바스크립트 환경이 웹브라우저냐 Node.js 냐에 따라 차이가 갈린다.Node.js : Timer API가 타이머 완료 이벤트를 발생시키고, 이벤트 루프가 이를 감지하여 Task Queue에 콜백 함수를 추가한다.웹브라우저 : Timer API가 스스로 Task Queue에 콜백 함수를 추가한다. 출처: https://inpa.tistory.com/entry/🔄-자바스크립트-이벤트-루프-구조-동작-원리 [Inpa Dev 👨‍💻:티스토리]

Async/Await 오해와 진짜 동작

let x = await bar(); // bar() 함수 정의는 생략
console.log(x);
console.log('Done');

bar().then(x => { 
    console.log(x); 
    console.log('Done'); 
});

const one = () => Promise.resolve('One!');

async function myFunc(){
	console.log('In function!');
	const res = await one();
	console.log(res);
}

console.log('Before Function!');
await myFunc();
console.log('After Function!');

const one = () => Promise.resolve('One!');

async function myFunc(){
	console.log('In function!');
	const res = await one();
	console.log(res);
}

console.log('Before Function!');
await myFunc();
console.log('After Function!');

/* ---------------- ↓↓↓ 변환 ↓↓↓ ---------------- */

const one = () => Promise.resolve('One!'); 

function myFunc(){
	console.log('In function!');
	return one().then(res => {
	  console.log(res);
	});
}

console.log('Before Function!');
myFunc().then(() => {
  console.log('After Function!');
});