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. Think of them as boxes that can store all sorts of things (values).
The implementations differ based on the language but they serve the same purpose. Variables are important in that we do not have to create a value everytime we need it, we can just reference the already created value by the variable name as many times as we need it.
var user = "Adam";
console.log(user); //Adam
The snippet above is how a variable is declared and assigned a value in JavaScript. See how that we created the string value "Adam" once and anytime we need it, we just reference it as user, this saves memory and time.
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.
Variable declaration - Initiating the creation of a variable. (Buying an empty box).
Variable assignment - Assigning a value to the created variable. (Putting stuff into the empty box).
In JavaScript, variable deceleration and assignment can be done at the same time or a variable can be declared initially and assigned a value later (except while using const keyword).
So now that we have an idea of how a JavaScript variable looks like, let's get into the crux of this article.
Always Use let, const, or var for Variable Declarations:
Declaring variables explicitly not only prevents runtime errors but also makes your code more predictable and easier to debug. Prefer const for values that won't change and let for those that might.
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.
Never create variables without explicitly declaring them, as they become global and can lead to unpredictable behavior, especially in large projects.
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.
"use strict" //on line 1
//Remaining code follows
Strict mode in JavaScript helps eliminate the possibilities of any errors and bugs, including those that cannot be detected in non-strict environments.
"use strict"
function getName(){
user = "Adam";
}
getName();
console.log(user); //user is not defined
Notice the difference? The use of strict mode does not allow the creation of variables on the fly, without using the variable deceleration keyword, preventing errors in the long run.
It however goes without saying that JavaScript developers should inculcate the habit of using strict mode in their code, this generally "forces" you to write code in the safest way possible.
Adding "use strict" won't break older JavaScript code; it simply enforces stricter parsing rules for better coding practices.
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!