Understanding how JavaScript works
Published: 2021-06-09 19:10:33

JavaScript is currently one of the most widely used programming languages. Many firms struggle to locate extremely good and fluent JavaScript engineers, thus there's a bit of a craze to learn JavaScript. But I believe the biggest issue is how we are educated. Like any language, you can study it, use it, and even speak it well, but you may never truly comprehend it. Getting a handle on the language

I've taken a lot of JavaScript courses, and it still surprises me that almost none of them actually help you understand how JavaScript works. I believe this is important not because you need to know the theory or want to know how things work, but because it will greatly aid you in debugging (finding errors), writing clean code, and communicating what your code is really doing. 

JavaScript is an interpreted language that is currently referred to as "Just in Time Compilation" in Chrome. Okay, fantastic, I'm lost, but what??? This, I believe, is where we lose the most individuals. We assume that people will simply understand what an interpreted language implies. It basically implies that it is read from top to bottom, line by line. Almost exactly like you're reading this blog article, line by line, top to bottom (at least, I hope you are).

So, let's have a look at some simple code and try to read it as if we were the JavaScript compiler.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jy39w5nclwx1z5m8ky1h.png)

Remember that JavaScript passes the code line by line and runs it. This is referred to as the execution thread. Everything is saved in the global variable environment, which is a live memory of variables containing data.

We'll start at the beginning and say store 2 in the num1 variable. Then we move to the subsequent line and say, Store 4 in the num2 variable. So far, it's been pretty simple, right? Then we go to the function, where we assign the label multiplyBy2 to the function definition. Basically, the entire function is saved under the title multiplyBy2.

So now we have the following saved in JavaScript's global memory:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/weckehrwffd6cvylqecl.png)

So, why didn't we save the function's result variable? Because the function was never called, we didn't save it. Remember that we call a function by writing parenthesis after the function label, whether or not we pass a value into those parenthesis. If you don't call the function, the execution thread will never enter the function.You will only go inside the function once you have called it.

**Let's take a look at the following code:**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7q6w1qok3xgsri4hj1i.png)

So, just like previously, we'll save num1, num2, and multiplyBy2 in global memory. We don't peek inside the code; instead, we read the next line, which states to "save what the multiplyBy2 function returns in the variable output."

Everything in JavaScript must have a value, but it doesn't know what will be returned from the function yet, it hasn't begun to go inside it yet, so it keeps undefined as the default value of output while it waits for the actual result.Output isn't interested in the multiplyBy2 function; it's just interested in what comes after the return keyword, because that's what gets saved in output. So, in order to assign it to output, we must first execute the task and check what value we will obtain from the function.

When we run a function, we generate a local execution context (not a global one), and we have a local memory and a local thread, much like our global context. This simply indicates that we are now running the code inside the function line by line and have halted the global execution.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bly1h7l86cypqmmchueq.png)

So, looking at our code, we assign the value 2 to the parameter inputNumber (this is what was stored in the variable num1). This is saved in local memory rather than global memory.The local memory is referred to as a variable environment because it resembles an environment of available variables, such as those around you or data. The variable result is then assigned the evaluated result of inputNumber*2, (2*2), which equals 4. What are we going to do with the outcome? It is returned to us.This indicates that this will be returned and saved in the output variable in global memory, replacing the default undefined.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jundy4pjp13sm994mnuv.png)

What happens to the context of execution? Because we've done calling multiplyBy2, the function's execution context is cleared, except for the returned value, which is saved in output. So, where do we proceed from here in terms of execution context? The execution context as a whole. By default, JavaScript is unaware of this. It must maintain track of that fact in some way, which we refer to as the call stack.

**The Call Stack:**
The call stack is a unique data structure that allows us to trace the execution thread in your code. Is it in the global or local execution? The global execution context is the first one we add, so that's the one we start with. JavaScript's thread, or where it is presently running your code, is whatever is at the top of the call stack, that's where you are, at the top of the call stack. The first thing you take out is the last thing you put in. It's a stack of functions, so the function is added to the call stack, which we call pushing to the call stack, and then it's removed from the call stack after it's finished.It's last  in, first out. Because of the return keyword or the closing curly brace, we know when the function is ended.If you forget to include the term return in your function, it will default to undefined. When a function is finished, it is removed from the call stack, which is known as popping. JavaScript then examines the call stack and determines that the most recent call is global, returning to the global execution context.

The following line is const newOutput = multiplyBy2(num2); we save the default value of undefined in newOutput in global memory, and then JavaScript says to create a new execution context because we called the function with parenthesis, and this new local context is added to the top of our call stack.We repeat the previous steps, saving the returned value in the newOutput variable in global memory. We return to the global execution context after removing the local context from the call stack. We presently have the following:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9gw3ui7ijl2e0yvmtrap.png)

One issue to keep in mind here is that when JavaScript came to the last line const newOutput = multiplyBy2(num2); it didn't try to figure out the function's outcome. Remember that JavaScript is read from top to bottom, line by line.When it reaches to the last line, it doesn't have to leap up; instead, it looks in global memory for that function, which we've saved under a label called multiplyBy2. This has all of the information it requires to perform that function, so it only uses what it has on hand.

You see, if you grasp how JavaScript works, decoding the code becomes much easier.

**To recap:**
1. JavaScript is an interpreted language that is read from top to bottom, line by line.

2. JavaScript uses synchronous execution and is single threaded (one thing at a time).

3. We build a global execution environment as soon as we start running our code.

4. You generate a new local execution context when you run a function.

5. When we parse and execute code line by line, we call this the thread of execution.

6. Rather than being kept in the global memory, anything declared in the function is saved in a local memory (‘Variable environment').

7. Defining a function is not the same as running, calling, or invoking it. Defining it explains what it does, whereas running it entails entering it and executing the code.

8. The call stack keeps track of the execution context we're in — that is, what function is presently being executed — as well as where we should go when an execution context is plucked off the stack.