The Elements of JavaScript (How javascript Works)

Published on November 4, 2014

In order understand JavaScript first we need to understand how JavaScript works. To be honest I faced a hard time to understand it. Because anyone can easily find what are the stuff in JavaScript but how it works? Naaa. It’s very hard to find. So after reading several articles and doing some experiments with some code finally I figured out some of it. For me it’s totally fun hope you do too. So put together what I learned.

Understanding JavaScript

Why we need to understand JavaScript? Because we can’t start our journey without understanding it. Ya it is. So first let’s try to understand what is JavaScript? And how does it work? If you know a little JavaScript and if I ask you what is JavaScript? Your answerer would be. “It’s a programming language to enhance the website.” It’s correct thought my answer to this question would be. JavaScript is a

Single threaded Non-blocking Asynchronous Concurrent Runtime

I know I answered it in more of technical. But this is perfect.

How does it work? A very few people can answer this. Even I couldn’t answer this before but know I can. So the answer would be. Stack The Heap Queues An Event Loop APIs

With help of all above JavaScript works. Wow, that’s great. But how does this stuff work again? Let me explain.

Stacks

Ya Stacks. You might heard of this if you are from Computer Science background. Stacks are one of the basic Data Structure concept. Stack are also know as first in last out concept. What I mean is whenever I put last I can take it first. Just like CD Stand. In JavaScript Compiler design stacks plays a key role. In matter of fast stacks plays the key role in almost all compiler design what’s why you often see error call “Stack Overflow” Mean the data we put in stack exceed the limit. Now, let’s apply this to our JavaScript and see how it works. Let’s consider the below example.

//stack.js
function msg(str) {
  console.log(str);
}
function foo(msg) {
  msg(msg);
}
function bar() {
  foo("im bar");
}
bar();

When we execute this it will be placed on stack as below.

The Heap

Heap is a general programming concepts exists in all programming language (I mean compilers). Basically heap is something which know how to allocate memory on RAM. When we write the code.

var i = 0;

Heap will create some space may be 8bits (Don’t know exacts bits) and record there address locations (In other words References). If use JavaScript before you often get the error “ReferenceMissing” when you try to use the variable which is not declared yet. In general The Heap+ Stack its self called as JS environment.

Queues

Queues are again another Data structure concept. In queues it work in First in first out models. Like first come first serve. We will see more about Queues in next section when we talk about Events. Events are more or less depends on queues.

Events

Events are as old as JavaScript itself. Events are very special in JavaScript. I think 80% of JavaScript depending on events. Ryan Dahl didn’t create node.js so that people can run JavaScript on server. He was looking for a single-threaded Event Driven Programming language and the answer was right in front of him. That is JavaScript. So, what is an Event? Event is something which we want to execute in future. For Example when user click on a button we want to do something. But we don’t know when does he going to click it. In such case we will create events. How does events work? JavaScript Events work totally different manner. It’s really very important to understand about the events. So let’s see how events work. Whenever an event created I will put on queues and the source code execution will be proceeded. Even thought any event callback is ready to execute it won’t get execute unless the thread is free. Remember JavaScript is a single threaded programming language. Let’s see an example.

for (var i = 1; i < 9; i++) {
  setTimeout(function() {
    document.write(i + " "); //expect 1 2 3 ...
  }, 0);
}

Here setTimeOut is an Asynchronous function. In other words it creates some an event. So when we execute above code it will put all the callbacks on queues and execute it once the thread is free.

The Event Loop

Event Loop? What the heck is it? Your might think like this. No worry that’s the same feeling when I heard about it too. But basically Event loop plays a key role in JavaScript. So, when do we use Event loop? How does it work? Event loop start works right from the beginning execution of the JavaScript file. That’s why we call it as Event Loop Engine. The Event loop job is to track the events and there callback function. So, whenever there is an event fired by user or some code. The event loop Engine detects it and pull the respective callback function form the queue and put it on stack for execution. This process is continues till the browser tab is closed.

API s

JavaScript alone can do a lot of stuff but the real power of JavaScript in in these apis. One example is DOM API, Which Is used to access and do manipulation on the DOM tree on the webpages. One Important point here. The JavaScript Stranded are specified by ECMA whereas Most of the API’s Standards are specified by W3C org.

Credits

Image Credit. www.freepik.com