Concept of Runtime Variables in JavaScript.

Concept of Runtime Variables in JavaScript.

In my previous article, I explained how the this keyword is handled in JavaScript, in this article, we will be talking about another concept in JavaScript - Runtime Variables.

Although, developers don't fall into problems like this but this will give you an understanding of how JavaScript works under the hood.

First of, what are variables? Variables abound in every programming language and they are simply memory reserved for storing all sorts of data. The implementations differ based on the language but they serve the same purpose.

var user = "Adam";

The snippet above is how a variable is declared and assigned a value in JavaScript.

• var - variable declaration keyword. Tells the JavaScript engine that we are declaring a variable. let or const can also be used as keywords but we would not be discussing that here.

• user - variable name. The name that will be used to reference "Adam" in the entire program.

• = - the equal sign, it is not called like that in JavaScript, it is called "the assignment operator". It takes the string "Adam" and assigns it to the variable user.

---

So now that we have an idea of how a JavaScript variable looks like, let's get into the crux of this article.

It should be noted that JavaScript variable references are created during parsing (a stage where variable references and scopes are created) and not during code execution (runtime). This means that all variables references or mappings have been created and the engine has a model (Abstract Syntax Tree - AST) of the different variables in the program before execution begins.

This allows the code to run without the need for creating variables at the same time, this saves time and allows our code to run faster, saving us from bugs.

Have you ever wondered what happens if you create a variable without using the variable declaration keyword? (This is bad practice so you should never do it in production, it is just for educational purposes ;)).

user = "Adam";
console.log(user); //Adam

In non-strict JavaScript environments, this should not cause an issue, the variable is created and can be accessed and used just like every JavaScript variable.

Now, consider the snippet:

function getName(){
    user = "Adam";
}

getName();
console.log(user); //Adam

Something does not feel right, eh? A variable within a function is directly accessed from outside the function scope.

This is because when the function getName() is called during runtime, the variable user has not been created in the AST (because the variable user is not declared using a keyword like var, let or const), the variable is created during runtime and is available in the global scope, even though it was declared within a function scope.

This variable created during runtime is referred to as a runtime variable (I coined the name though, it's not the standard ) and we should avoid this at all costs. It slows down your program and puts you at risk of bugs. Solution? Simple, use strict mode.

There you go! I hope you have a better understanding of how JavaScript variables are handled under the hood now.

Leave a like and a comment if you enjoyed this.

Till next time folks!