The JavaScript Prototype Inheritance concept is a way of sharing object behavior, properties and templates to other objects across the language. JavaScript Prototypes are objects which work as parent or template for inherited objects.

The prototype inheritance is a powerful feature which is the base of JavaScript language and allows us to create reusable and complex code in an efficient and effective way. Which makes our language so powerful and flexible.

In this article I’m gonna explain how it works and how you can use it in your favor.

 
 
 

How it works
We usually say that everything in JavaScript is an object. And this axioma is not wrong…
In JavaScript most of its type are objects, such as: String, Number, Object, Function, null, Boolean, Symbol - and Array is not a type, it is a normal Object - all those types (except null which is a different object) are inherited by Object object (which is inherited by itself when you declare/initialize a one); also undefined is a global variable which cannot be assigned to any value.

With this idea of sharing properties and methods throughout objects, help us to extend and reuse code. 
I will demonstrate a good implementation of some code in some prototype chain. 


Example:

<pre>
<code class="code">
Array.prototype.currItrIdx = 0;

Array.prototype.currItrVal = function() { 
	return this[this.__proto__.currItrIdx];
}

Array.prototype.next = function() { 
	if ((this.currItrIdx + 1) > this.length - 1) 
		return null;
	this.__proto__.currItrIdx++;
	let nextValue = this.currItrVal();
	return nextValue;
}

Array.prototype.prev = function() {
	if ((this.currItrIdx - 1) < 0) 
		return undefined;
	this.__proto__.currItrIdx--;
	let prevVal = this.currItrVal();
	return prevVal;
}
</code>
</pre>

 In the code above, we have created an implementation of an iterator which is manually iterated using next() and prev() methods. It helps us when we need to iterate an array but not all at once. 

When you create those properties and methods in the prototype chain of the Array object, all array instances have these properties and behaviors now. 
Because JavaScript does not copy and paste the parent prototype, JavaScript points the prototype chain to the parent object. And every time you use the next() (or prev()) method JavaScript looks for this method in the object itself, if nothing is found JavaScript goes down to the object’s prototype chain, until it finds the method or property. 

 

Now every time you define or initialize a new array or instance of an array, you will have these methods binded in your array.
Now apply these functionalities to other things. It is powerful.

JavaScript Prototype and Prototype Inheritance

If you already have used other languages such as C, C++, Go, C# etc. you notice that we cannot create functions inside of other functions. We call this as nested functions. In JavaScript things are different… We have such a powerful tool to build our apps creatively.

In this article I’m gonna explain why JavaScript enables us to create functions inside other functions.

First of all, we need to assume that almost everything in JavaScript is an object: strings, numbers, booleans, symbols, functions, null and object itself.
Every time you as a developer initiate a new instance of these, under the hood you are creating a new object. And JavaScript stores its objects in the heap memory, not in the stack.

But why does JavaScript store all its objects in the heap? Would it be faster storing them in the stack instead? Yes, it would be. But Stack memory does not work as you imagine. Stack and heap memory has two different approaches. See this topic where I’m explaining how heap and stack memory works.

The JavaScript language was designed to work with data structures as objects, then stack memory would not be able to store them effectively.

Coming back to the topic, why JavaScript enables us to create nested functions.
When JavaScript reads your function and calls it, JavaScript engine initializes your declarations and stores them in the heap memory as objects. Then it creates a frame of that function with a reference of the location on heap memory of everything inside of it, such as: variables, parameters etc.
After you have your all instances written in the heap memory, it will be easy to access them.


Now the only restriction is the function’s scope. Let me explain, You have two functions A and B, B is inside of A and A has some of a couple variables in it; B can access A’s variables, but A can’t access B’s variables, because A has no access to B’s scope. Easy right? You will get that.

Conclusion, because of the design of JavaScript, you are enabled to create functions inside of functions, because JavaScript stores all its values as objects in heap memory and shares their locations to the function’s frame in the stack memory. Simple as that.


Thank you for reading my article, I really appreciate that!

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

Why can we have nested functions in JavaScript

Maybe you think that when your setTimeout expires its times it will run immediately, right? Wrong! I will explain. There’s a lot going on under the hood before your callback actually runs.

JavaScript uses a message queue to handle their events. Everytime you fire an event in JavaScript it goes to a queue where it stores a bunch of information about your event, such as: the callback which will handle the event and all the event firing data. 

This queue is organized by first-in, first-out (FIFO), which means, the first event message will be the first to be processed by the runtime.

The JavaScript event loop requires the stack memory in order to work. All the process of interpreting the JavaScript language runs around the stack and the heap.
In order to JavaScript process your event handler it needs to load your function into the stack, and to load a function into the stack you need to call it.

So what does JavaScript do?
JavaScript does not prioritize your events messages, it prioritizes its call stack. Which means JavaScript will run your event message just when stack memory is empty! 

Run this sample: 

<pre>
<code class="code">
function bench() {
 let milisec = 150;
 setTimeout(() => console.log("PRINTED"), milisec)
 let count = 0;
 while (count < 600000000) { count++ } 
 console.log("Count Finished ")
}
</pre>
</code>

This code prints two messages, but asynchronously.
As you can see, our setTimeout has a delay of just 150ms, very short. Which means it is almost instantaneous! 
But when you run our code below it takes some time to run it! 
Why? As I mentioned before, the JavaScript runtime just runs our event message when our call stack is totally empty. 


To prove this, we’re gonna see another example. 


Run this: 



<pre>
<code class="code">

function benchmark() {

 function loop(num = "1") {
	let count = 0;
	while (count < 600000000) { count++ }
	console.log("Loop " + num + " Finished")
 }

 let milisec = 0;
 setTimeout(() => console.log("PRINTED"), milisec)
 loop("1");
 loop("2");
}
</pre>
</code>


Could you see? Even with 0 delay our output is: 

Loop 1 Finished
Loop 2 Finished
PRINTED

This happens because during the execution of the benchmark function, our stack still remains a frame, which is the benchmark function itself. JavaScript ran our setTimeout callback just after the frame of the benchmark function had gone. So take care with setTimeout, the time set by you, it is not a guaranteed time, it is a minimum time!

I hope you found this article interesting and helpful!
Thank you for reading, I really appreciate it!

Henderson's Blog

Complex Software Engineering

Articles

JavaScript Prototype and Prototype Inheritance

Why can we have nested functions in JavaScript

How setTimeout works under the hood

Author @DevHenderson