The document discusses the event loop in JavaScript. It explains that JavaScript is single-threaded but asynchronous, relying on an event loop to handle non-blocking operations and callbacks. It provides an example of how the event loop processes tasks in the call stack and queues, demonstrating that code after asynchronous functions like setTimeout() and promises may execute first. The event loop continuously checks the call stack and queues to update the call stack and execute queued callbacks.

1. München Aachen Bamberg Berlin Boswil Đà Nẵng Dresden Grenoble Hamburg Köln Leipzig Nürnberg Prag Stuttgart Washington Zug
The Mystery of Event Loop in JavaScript
Trình Đức Trần
Đà Nẵng, 04/01/2020

2. 04.01.20 2
Trình Đức Trần
@tranductrinh

3. 04.01.20 3

4. 04.01.20 4

5. 04.01.20 5
Functional
Object-oriented
Single-threaded
Non-blocking
Asynchronous

6. 04.01.20 6

7. 04.01.20 7
console.log('Zero');
setTimeout(() => console.log('One'), 0);
Promise.resolve().then(() => console.log('Two'));
console.log('Three');

8. 04.01.20 8
Demo

9. 04.01.20 9
console.log('Zero');
setTimeout(() => console.log('One'), 0);
Promise.resolve().then(() => console.log('Two'));
console.log('Three');

10. 04.01.20 10
v8 SpiderMonkey JavaScriptCore

11. 04.01.20 11
JavaScript Engine

12. 04.01.20 12
JavaScript Engine
Call stack

13. 04.01.20 13
JavaScript Engine
Call stack Heap

14. 04.01.20 14
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);

15. 04.01.20 15
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);
Call stack

16. 04.01.20 16
Call stack
Global execution
context
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);

17. 04.01.20 17
Call stack
Global execution
context
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);

18. 04.01.20 18
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);
Call stack
Global execution
context
Function execution
context
(sum)

19. 04.01.20 19
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);
Call stack
Global execution
context
Function execution
context
(sum)
Function execution
context
(minus)

20. 04.01.20 20
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);
Call stack
Global execution
context
Function execution
context
(sum)

21. 04.01.20 21
Call stack
Global execution
context
const minus = function(num1, num2) {
return num1 - num2;
}
const sum = function(num1, num2) {
minus(num1, num2);
return num1 + num2;
}
sum(0, 1);

22. 04.01.20 22
Demo

23. 04.01.20 23
JavaScript Engine
Call stack Heap

24. 04.01.20 24
JavaScript Engine
Call stack Heap
JavaScript Runtime
JavaScript Engine
Call
stack
Heap

25. 04.01.20 25
JavaScript Engine
Call stack Heap
JavaScript Runtime
JavaScript Engine
Call
stack
Heap
Web APIs
DOM
XMLHttpRequest
setTimeout

26. 04.01.20 26
JavaScript Engine
Call stack Heap
JavaScript Runtime
JavaScript Engine
Call
stack
Heap
Callback queue
Web APIs
DOM
XMLHttpRequest
setTimeout

27. 04.01.20 27
JavaScript Engine
Call stack Heap
JavaScript Runtime
JavaScript Engine
Call
stack
Heap
Job queue
Web APIs
DOM
XMLHttpRequest
setTimeout
Callback queue

28. 04.01.20 28
JavaScript Engine
Call stack Heap
JavaScript Runtime
JavaScript Engine
Call
stack
Heap
Event loop
Job queue
Web APIs
DOM
XMLHttpRequest
setTimeout
Callback queue

29. 04.01.20 29
console.log('Zero');
setTimeout(() => console.log('One'), 0);
Promise.resolve().then(() => console.log('Two'));
console.log('Three');

30. 04.01.20 30
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Event Loop
Callback queueJob queue

31. 04.01.20 31
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
console.log('Zero');
Callback queueJob queue
Event Loop

32. 04.01.20 32
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Zero
setTimeout(
() => console.log('One’)
, 0
);
Callback queueJob queue
Event Loop

33. 04.01.20 33
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
Callback queue
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Job queue Zero
Event Loop
Promise.resolve().then(
() => console.log('Two’)
);
setTimeout

34. 04.01.20 34
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
Callback queue
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Job queue Zero
() =>
console.log(‘One');
() =>
console.log(‘Two');
console.log('Three');
Event Loop

35. 04.01.20 35
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
Callback queue
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Job queue Zero
() =>
console.log(‘One');
() =>
console.log(‘Two');
Three
Event Loop

36. 04.01.20 36
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
Callback queue
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Job queue Zero
() =>
console.log(‘One');
Three
console.log(‘Two');
Event Loop

37. 04.01.20 37
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
Callback queue
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Job queue Zero
() =>
console.log(‘One');
Three
Two
Event Loop

38. 04.01.20 38
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
Callback queue
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Job queue
console.log(‘One');
Zero
Three
Two
Event Loop

39. 04.01.20 39
JavaScript Runtime
JavaScript Engine
Call stack
Web APIs
Callback queue
console.log('Zero');
setTimeout(
() => console.log('One'),
0
);
Promise.resolve().then(
() => console.log('Two')
);
console.log('Three');
Job queue Zero
Three
Two
One
Event Loop

40. 04.01.20 40
JavaScript Engine
Call stack Heap
JavaScript Runtime
JavaScript Engine
Call
stack
Heap
Event loop
Job queue
Web APIs
DOM
XMLHttpRequest
setTimeout
Callback queue

41. 04.01.20 41
Q&A

42. 04.01.20 42
My upcoming TechTalk
ES6 to ESNext: An in-depth look
In March 2020

43. 04.01.20 43
Innovation Implemented.
mgm technology partners GmbH
Frankfurter Ring 105a
80807 München
Tel.: +49 (89) 35 86 80-0
Fax: +49 (89) 35 86 80-288
www.mgm-tp.com
PragMünchen Berlin Hamburg Köln NürnbergGrenoble LeipzigDresdenBamberg ZugĐà NẵngAachen WashingtonStuttgart