So, why do we need variables?
Think about it: would programming make any sense if there were no variables? There would be no way to receive data from an API, store calculated data, or build data structures.
Variables play a pivotal part in programming.
They are containers that store data.
Now, coming to JavaScript variables.
There are three keywords used to declare variables in JavaScript that you need to keep in mind.
- var
- let
- const
Understanding Variables declared with the var keyword
1. Scope: Function Scoped
Now, what do I mean by function scoped?
What do I even mean by scope?
Scope in programming means the accessibility of the variable within a block of code (The code wrapped inside curly brackets ).
By function scoped I mean the variable is not accessible outside the function.
If a variable is created inside a function and you try to log it outside the function, it won't work.
You get a Reference Error: (variable name) is not defined.
Variables declared with the var keyword are function-scoped.
2. Can be updated and redeclared.
You can update these variables with new values. You can actually redeclare these variables. Yes, you heard that right.
Variables declared with var can be redeclared and reassigned.
3. Hoisting
These variables are hoisted to the top of their scope and are initialized with undefined.
Hoisting is a really big topic on its own. I am not exploring it deeply here.
Hoisting means all the variables and the function declarations are moved to the top of their scope. However, there is no actual movement of code.
If the variable is accessed before the declaration, it evaluates to undefined.
Understanding Variables declared with the let keyword
1. Scope: Block Scoped
Variables declared with the let keyword are block-scoped (code inside curly brackets {}) and are not accessible outside that block of code.
2. Can be updated but not redeclared within its scope.
You can update these variables with new values. You cannot redeclare these variables within the same scope.
If you try to redeclare one, you get an error.
3. Hoisted to the top of their scope but are not initialized.
These variables are hoisted but not initialized, not even with undefined.
Here is proof that JavaScript actually hoists the let variables. The ReferenceError says "Cannot access 'variable name' before initialization" because it has been declared but not yet initialized. If it's not declared at all, you get "variable name is not defined".
Understanding Variables declared with the const keyword
1. Scope: Block Scoped
Just like let, it can't be accessed outside the scope in which it's declared.
2. Cannot be updated or redeclared within its scope.
Variables declared with the const keyword cannot be updated or redeclared because a const declaration creates a read-only reference to a value.
In cases where the value is an object or array, this means the object's contents (e.g., its properties) can be changed or the array's elements can be changed.
3. Hoisted to the top of their scope but are not initialized.
These variables are hoisted but not initialized — that's why JavaScript is able to detect that the variable is actually defined but it's being referenced before the initialization.
Quick Recap
Variables are containers that store data.
Before ES6, we had var x = 10;
After ES6, we have let x; const x = 10;
Variables declared with var keyword:
- Scope: Function Scoped
- Can be reassigned
- Can be updated and re-declared within its scope.
- Hoisted to the top of their scope and are initialized with undefined.
Variables declared with let keyword:
- Scope: Block Scoped
- Can be reassigned
- Can be updated but not re-declared within its scope.
- Hoisted to the top of their scope but are not initialized.
Variables declared with const keyword:
- Scope: Block Scoped
- Cannot be reassigned
- Can neither be updated nor re-declared within its scope.
- Hoisted to the top of their scope but are not initialized.