Introduction
If you wanna get a bit more in depth on the differences between the ways of declaring variables with var, let, and const, then this is the article for you. We will be learn about scoping, features, and other important things we should really know about when declaring variables for our data. Let's take a step back and freshen up our javascript variable knowledge.
In javascript we are allowed to store data values / types in what we know as variable_names or in technical terms identifiers. It's easier for the developer to work with data when we give it a name and can pass it any where in our code simply by using its variable name. When we want to declare a variable we have the options to choose from three keywords var, let, or const. Each have there pros and cons on when to be used but it really comes down to it on how your data will work. We will dig a bit more in depth on each of these keywords to understand what the differences are and when to use the proper declarations.
Declaring variables with var
Before we were introduced into ES6 (modern javascript) there was only one way to declare variables and that was with the var
keyword, also there was no other way to declare constants either. But luckily for us the syntax for declaring variables are all alike. Even though they have the same syntax they have important differences.
Variables when declared with var
do not have a block scope, instead they are body
scoped. If we were to take MDN's definition.
MDN : "The scope of a variable declared with var is its current execution context and closures thereof, which is either the enclosing function and functions declared within it, or, for variables declared outside any function, global."
Meaning no matter how deep nested the variables are, if they are declared inside a function they stay within the scope of that function.
var x = 'xyz';
var name = 'oscar';
var age = 25;
var data = [];
// can be declared in a single line statement too
var name = 'oscar', age = 25, data = [];
If you do decided to declare a variable outside a function, globals declared with var
are implemented as properties to the globalObject
. You can go inside your dev tools and access the console, while on the console declare a variable globally and access it with the globalThis
object like so.
var x = 2; // global variable
function greet(str) {
const name = str; // body scoped variable
return "Hello" + name
}
console.log(globalThis.x); // output 2
It's strange to say that you can have duplicates variable names when declared with var
and won't trigger any errors even in strict mode.
Declaring variables with let
In modern javascript we declare variables with the let
keyword, which has a block-scope, it does not create properties of the globalObject
when declared globally.
For example
let name = 'oscar';
let i = 0;
let o;
If you don't assign any value to your declared let
variable, it will still be declared but will be undefined
. Meaning the variable exists but has no value
. You can also declare multiple variables with a single let
statement.
let a = 0,b = 12,c = 4;
The main difference between var
and let
is the power of scope
. Here is an example of seeing them both in action.
var x = 'global';
let y = 'global';
console.log(this.x); // "global"
console.log(this.y); // undefined
let
variables on the other hand are allowed to have their values changed unlike our other keyword const
which will give us an error if we tried to change it's when already declared. So if you know that your data is going to be dynamic, you can save your from future bugs that sometimes are very hard to spot because of the way we declared our variables.
Declaring variables with const
It's important to not that the major difference when declaring with const
is that the values can not be changed once they have been declared, can not be re-assigned, otherwise it will throw a TypeError
. But just like the let
keyword, when declared globally it will not become a property of the window
object unlike var
variables. But it is required to initialize the when its declared, cause again you can not re-assign or change data of a const
in the future, which makes sense on why you need to initialize it right away.
const name = 'oscar';
const age = 25;
In one approach, we use const only for values that must not change. In the other, we use const for any value that does not happen to change. I prefer the former approach in my own code.
David Flanagan
Conclusion
I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.
These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe that should be made to help me and others. Thank you for your time for sticking this far!
Top comments (1)
Values can be changed. Just the assignment cannot.
In other languages which offer
const
it is actually constant and cannot be changed (e.g. C, C++, also C# but limited).