HOW JAVASCRIPT WORKS INSIDE THE JAVASCRIPT RUNTIME

SO… what is JavaScript?

why does JavaScript become so popular right now?

Github Language Stats 2018

Variations

No content

No content

Variations (ES6)

Variations (TypeScript)

Variations (CoffeeScript)

No content

Variations (JavaScript)

how JavaScript works?

The JavaScript Engine

The Runtime

The Call Stack

The Call Stack Each entry in the Call Stack is called a Stack Frame.

The Call Stack (The Stack Trace)

The Call Stack (The Stack Trace) LIFO (Last In First Out)

The Call Stack (The Stack Trace) How About This?

The Call Stack (The Stack Trace)

Fun Fact: JavaScript is Single Thread & Synchronous

Concurrency & the Event Loop

What happens when you have function calls in the Call Stack that take a huge amount of time in order to be processed?

No content

V8 — open source, developed by Google, written in C++ Rhino — managed by the Mozilla Foundation, open source, developed entirely in Java SpiderMonkey — the first JavaScript engine, which back in the days powered Netscape Navigator, and today powers Firefox JavaScriptCore — open source, marketed as Nitro and developed by Apple for Safari KJS — KDE’s engine originally developed by Harri Porten for the KDE project’s Konqueror web browser Chakra (JScript9) — Internet Explorer Chakra (JavaScript) — Microsoft Edge Nashorn, open source as part of OpenJDK, written by Oracle Java Languages and Tool Group JerryScript — is a lightweight engine for the Internet of Things. JavaScript Engines (JavaScript Engines)

Inside The V8 Engine V8 used to have two compilers full-codegen — a simple and very fast compiler that produced simple and relatively slow machine code. Crankshaft — a more complex (Just-In-Time) optimizing compiler that produced highly- optimized code.

Event loop and the rise of Async programming

Building Blocks The most common block unit is the function.

Building Blocks A simple way of “waiting” for an asynchronous function to return its result is to use a function called callback:

Can i make Synchronous AJAX Request?

Building Blocks If you make a synchronous Ajax request, the UI of your JavaScript app will be blocked  Users won’t be able to click, enter data, navigate, or scroll.

Building Blocks

Building Blocks

JavaScript Runtime

What is Event Loop? The Event Loop has one simple job to monitor the Call Stack and the Callback Queue. If the Call Stack is empty, it will take the first event from the queue and will push it to the Call Stack, which effectively runs it.

How This Block of Codes Will Be Executed?

No content

How setTimeout works? It’s important to note that setTimeout(…) doesn’t automatically put your callback on the event loop queue. It sets up a timer. When the timer expires, the environment places your callback into the event loop, so that some future tick will pick it up and execute it.

How setTimeout works? That doesn’t mean that myCallback will be executed in 1,000 ms but rather that, in 1,000 ms, myCallback will be added to the queue. The queue, however, might have other events that have been added earlier — your callback will have to wait.

Callbacks

Nested Callbacks? This kind of code is often called a callback hell.

Promise

Promise

ES8 Async/Await

Async/Await

how to write optimized JavaScript?

Clean Code VS

Error Handling VS

Conditional VS

thank you :) let’s keep in touch @riskteria rizky@ottencoffee.co.id