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

Henderson's Blog

Complex Software Engineering

Why can we have nested functions in JavaScript

Author @DevHenderson