9/12/2018 What is JavaScript and How it works under the hood | Codementor

Mukul Jain FOLLOW

Web Lover | Full Stack Developer @ Innovaccer | 4 Year of Experiance

What is JavaScript and How it works under the hood

Published May 22, 2017

What is JavaScript

Let's talk about one of the most famous languages today, JavaScript, one of
three basic component (HTML, CSS & JS) of the web. Wikipedia says ( For
understanding purpose I will breakdown de nition in few parts)

JavaScript is prototype-based with rst-class functions

To understand this, rst understand what is Prototypal inheritance, In the

prototypal inheritance form, objects inherit directly from other objects. In JS
every object has a secret link to its parent object, thus whenever an object is
asked for any property, it looks for it, if it does not have its parent will be
asked then its parent, process will be continued till property is nd or it will
give an error.

For example

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 1/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

function Circle(radius) {
this.radius = radius;
}

Circle.prototype.area = function () {
var radius = this.radius;
return Math.PI * radius * radius;
};

Circle.prototype.circumference = function () {
return 2 * Math.PI * this.radius;
};

var circle = new Circle(5);

var circle2 = new Circle(10);

circle.area() // 78.53981633974483
circle.diameter() // Uncaught TypeError: circle2.diameter is not a function

Here radius is a Number which also inherits properties from Number thats why
it outputs "5" on circle.radius.toString()

By rst-class functions, it meant that function can be stored in variables and

then can be passed around.

It also supports High Order Functions, it means function can take other
function as input and return a function as output.

Making it a multi-paradigm language, supporting object-oriented,

imperative, and functional programming styles.

Multi-paradigm means, you can program in with various coding styles like
OOP or Functional or mix of both.

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 2/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

It has an API for working with text, arrays, dates and regular expressions,
but does not include any I/O, such as networking, storage, or graphics
facilities, relying for these upon the host environment in which it is
embedded.

JS have API for text, arrays etc, this mean JS can count elements in an array or
can pop something out from it but it can't perform an API call itself, yes you
read it right JS Engine doesn't do it, browser does.

How JavaScript Works

Let's see how things work under the hood.

Javascript is single threaded, it means it can execute one thing at a time, check
the gure given below, whenever there some operation like console.log or a
+ b it pushes it into the stack operates it and pop it out.

If it is function call then it puts the function in the stack operates it, pops
everything out, like shown below

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 3/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

// taking this code as example

var add = function(a,b){
return a + b;
}

var x = 2;
var y = 7;

var z = sum(x,y);

console.log(z);

Then how it is non-blocking? why not things like setTimeout or asynchronous

call complete rst blocking other code?

Whenever there is something like asynchronous call or timeout function, it

comes stack then it passes to the browser which can do it multiple things
together, after nishing the tasks browser puts callback queue, event loop
keep looking at the stack and callback queue, when it nds the stack empty it
puts rst from queue to stack.

Let's see a working example, for simplicity we use will console.log and time
setTimeout only.

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 4/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

setTimeout(function(){
console.log("a");
},1500)

console.log("d");

setTimeout(function(){
console.log("b");
},500)

setTimeout(function(){
console.log("c");
},1000)

That's all for Today. If you have any doubts or improvement, comment here or
message me!

Thanks to Philip Roberts for wonderfull explanation on working of JS

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 5/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

Functions Prototypal inheritance Web JavaScript

Enjoy this post? Give Mukul Jain a like if it's helpful.

 10  SHARE

Mukul Jain
Web Lover | Full Stack Developer @ Innovaccer | 4 Year of Experiance
I have been programming for last 4 years, I love building things and help people to build. If
need help in debugging, building, refactoring codebase, adding new features or guidance,
feel free to ping me.

FOLLOW

Be the rst to share your opinion

Leave a reply

Hire the world’s top freelance

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 6/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

software developers
HIRE A DEVELOPER APPLY AS A DEVELOPER

Ramón Miklus

Deep copying an object in JavaScript

Using the spread syntax or Object.assign() is a standard way of copying an

object in JavaScript. Both methdologies can be equivalently used to copy the
enumerable properties of an object to another object, with the spread syntax
being the shorter of the two. They are also useful to merge objects, since both
methods automatically overwrite the properties in the target object that have
the same keys of t ... READ MORE

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 7/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

Join and start discussions with fellow developers

START A DISCUSSION

Anthony Gore

Create & Publish Web Components With Vue CLI 3

Are web components "the future" for the web platform? There are many
opinions both for and against. What is a fact, though, is that browser support
is emerging for web components and there are a growing number of tools and
resources for authors interested in creating and publishing web components
of their own.

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 8/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

A great tool for creating web components is Vue.js, and it's been made even
easier with the release of Vue CLI 3 andMORE
READ the new [@vue/web ...

Get curated posts in your inbox

Read more posts to become a better developer

Your email

SUBSCRIBE

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 9/10
9/12/2018 What is JavaScript and How it works under the hood | Codementor

Kamran Ahmed

Modern Frontend Developer in 2018

Before we begin with this post, just to give you an idea about me and about
this roadmap; I have been doing the Fullstack Development for the past 5
years and currently working as a lead engineer at tajawal where I have to wear
many di erent hats. It is not only my hobby but also one of my job
responsibilities to keep an eye on the trends and to keep the other developers
well trained. I see a lot of confusion among the beginners (and experienced
alike) when it comes to staying up to date. I had lots of friends and emails
asking me for g ... READ MORE

https://www.codementor.io/mukuljainx/what-is-javascript-and-how-it-works-under-the-hood-8bqkes6r2 10/10