Javascript why what and how

Agenda
1. Javascript
2. JS interpretation & memory model
3. Compilation, variable hoisting and variable shadowing
4. Function execution
5. Scope chain and Closure
6. JS runtime and Event Loop
7. Async example
8. Single threaded parallel execution visualisation
9. NodeJS

What is Javascript
Javascript often abbreviated as JS, is a high level, interpreted, scripting
language.

How JS Works
● Almost everyone has already heard of the V8 Engine as a concept, and most people
know that JavaScript is single-threaded or that it is using a callback queue.
● A popular example of a JavaScript Engine is Google’s V8 engine. The V8 engine is used
inside Chrome and Node.js for example. Here is a very simplified view of what it looks
like:

Memory Heap — this is where the memory allocation happens
Call Stack — is a data structure which records basically where in the program we are

There are APIs in the browser that have been used by almost any JavaScript developer out
there (e.g. “setTimeout”). Those APIs, however, are not provided by the Engine.
So, where are they coming from?
It turns out that the reality is a bit more complicated.

CLOSURES
What happens when a function is executed outside
of it's original scope chains?
Moreover, what happens when a variable holds on
to a function reference which get's defined in such
deep function execution chain?

So What is Closures?
It is an implicit, permanent link between a function
and it's scope chain.. A function definition's (lambda)
hidden [[scope]] reference.
● Holds the scope chain (preventing garbage
collection.)
● It is used and copied as the "outer environment
reference" anytime the function is run.

Implicit Closure
var data = "My Data!";
setTimeout(function() {
console.log(data); // prints "My Data!"
}, 3000);

Event Loop And Async Programming
Enough slides, let’s go directly to the demo and see
it in action-
http://localhost:3051

NodeJS in Brief
● Server-side Javascript
● Built on Google’s V8
● Evented, non-blocking I/O. Similar to
● EventMachine or Twisted.
● CommonJS module system.

I/O needs to be done
differently.

Many web applications have code
like this:
var result = db.query("select * from Zebay_COunterOrders");
// use result here

like this:
// use result here
What is the software doing while it
queries the database?

like this:
// use result here
What is the software doing while it
queries the database?
In many cases, just waiting for the
response.

I/O latency
● L1: 3 cycles
● L2: 14 cycles
● RAM: 250 cycles
● DISK: 41,000,000 cycles
● NETWORK: 240,000,000 cycles

Better software can multitask.
Other threads of execution can run
while waiting.

Is that the best that can be done?
A look at Apache and NGINX.

Apache vs NGINXconcurrency × reqs/sec

Apache vs NGINXconcurrency × memory

Apache vs NGINX
The difference?
Apache uses one thread per Connection.
NGINX doesn’t use threads. It uses an event loop.

Context switching is not free
Execution stacks take up memory
For massive concurrency, cannot use an OS thread
for each connection.

Code like this
either blocks the entire process or implies multiple
execution stacks.

But a line of code like this
var result = db.query("select * from Zebay_COunterOrders", functon(error, data){
// use data
});
allows the program to return to the event loop
immediately.

References
1. JavaScript VM internals, EventLoop, Async and Scope Chains
https://www.youtube.com/watch?v=QyUFheng6J0
2. https://www.youtube.com/watch?v=ztspvPYybIY

Javascript why what and how

More Related Content

What's hot

Similar to Javascript why what and how

Recently uploaded

Javascript why what and how