VM Internals Compile & Run Time Run & Load Situations Hoisting Variable Shadowing Scope Resolution Closure Call Stack Render Queue Callback & Callback Queue Event Loop

1. Javascript VM Internals
Programming is like a chess, You can learn the rules
in an hour but it takes years to master.

2. Agenda
● VM Internals
○ Compile & Run Time
○ Run & Load Situations
○ Hoisting
○ Variable Shadowing
○ Scope Resolution
○ Closure
○ Call Stack
○ Render Queue
○ Callback & Callback Queue
○ Event Loop

3. Some Examples
var employeeId = 'abc123';
function foo() {
employeeId = '123bcd';
return;
}
foo();
console.log(employeeId);

4. Some Examples
var employeeId = 'abc123';
function foo() {
employeeId = '123bcd';
return;
function employeeId() { }
}
foo();
console.log(employeeId);

5. Interpreter
An interpreter is a program that reads in as input a source program, along with
data for the program, and translates the source program instruction by
instruction.

6. Compile & Run
JavaScript is interpreted at runtime by the client browser. There is a tool called
the Rhino JavaScript Compiler that supposedly compiles JavaScript into Java
class files, though.

7. Hoisting
Hoisting teaches that variable and function declarations are physically moved
to the top of your coding, but this is not what happens at all. What does
happen is that variable and function declarations are put into memory during
the compile phase, but stays exactly where you typed it in your coding.

8. Closure
A closure is the combination of a function and the lexical environment within which that
function was declared.
It is a permanent link between a function and its scope chain.
Two types of closure:
1. Implicit
2. Explicit

9. Concurrency Model and Event Loop

10. Call Stack
A call stack is a mechanism for an interpreter to keep track of its place in a script
that calls multiple functions — what function is currently being run, what functions
are called from within that function and should be called next, etc.
● Javascript runtimes only of heap and call stack.
● One thing at a time === One thread === One call stack.

11. Call Stack
● When a script calls a function, the interpreter adds it to the call stack and then
starts carrying out the function.
● Any functions that are called by that function are added to the call stack
further up, and run where their calls are reached.
● When the main function is finished, the interpreter takes it off the stack and
resumes execution it left off in the main code listing.
● If the stack takes up more space than it had assigned to it, it results in a
"stack overflow" error.

12. Heap
Objects are allocated in a heap which is just a name to denote a large mostly
unstructured region of memory.

13. Event Loop
The Event Loop is a queue of callback functions. When an async function
executes, the callback function is pushed into the queue. The JavaScript engine
doesn't start processing the event loop until the code after an async function has
executed.

14. Event Loop - Queue
JavaScript runtime contains a message queue, which is a list of messages to be
processed. A function is associated with each message. When the stack has
enough capacity, a message is taken out of the queue and processed. The
processing consists of calling the associated function (and thus creating an initial
stack frame). The message processing ends when the stack becomes empty
again.

15. Event Loop- Adding Messages
Adding messages In web browsers, messages are added any time an event
occurs and there is an event listener attached to it. If there is no listener, the
event is lost. So a click on an element with a click event handler will add a
message--likewise with any other event.

16. Event Loop - Run to Completion
Each message is processed completely before any other message is processed.
A downside of this model is that if a message takes too long to complete, the web
application is unable to process user interactions like click or scroll. The browser
mitigates this with the "a script is taking too long to run" dialog.
This differs from C, for instance, where if a function runs in a thread, it can be
stopped at any point to run some other code in another thread.

17. Event Loop - Zero Delay
Zero delay doesn't actually mean the callback will fire-off after zero milliseconds.
Calling setTimeout with a delay of 0 (zero) milliseconds doesn't execute the
callback function after the given interval.
The execution depends on the number of awaiting tasks in the queue.

18. Never Blocking
A very interesting property of the event loop model is that JavaScript, unlike a lot
of other languages, never blocks. Handling I/O is typically performed via
events and callbacks, so when the application is waiting for an XHR request to
return, it can still process other things like user input.

19. Asynchronous Programming
JavaScript is single-threaded. As a result, JavaScript programs must use
async APIs to stay responsive to user input while performing long-running
tasks like server requests and animations. You can't get very far in a JavaScript
program without running across an asynchronous API.

20. Promises ??
Promises are an alternative to callbacks for delivering the results of an
asynchronous computation. They require more effort from implementers of
asynchronous functions, but provide several benefits for users of those
functions.

21. Thanks
I am leaving all this to open discussion. Thanks.
Reference:
- Work of Philip Roberts - Euro Conf
- Has Geek talk, Described in You do not know JS - Kyle Simpson
- Concurrency Model - MDN
Next talk, We’ll discuss about Promises and Generators.