This content originally appeared on DEV Community and was authored by The Nerdy Dev
Hey everyone ??,
In this article, let us discuss about Variables and Constants in JavaScript. This is the fifth part of my Beginner JavaScript Series on Dev.
Variables - A Complete picture of var, let and const
What is a variable ?
Variable means anything that can vary or change. JavaScript includes variables which hold the data value and it can be changed anytime. JavaScript uses reserved keyword var to declare a variable.
Remember, A variable must have a unique name.
Let us see an example to understand more on variables. So in the below example, we declare two numbers - numberOne and numberTwo using the var keyword and then we define a sumTotal variable again using the var keyword and store the sum of the two numbers - numberOne and numberTwo.
Moving from var to let and const
let keyword
A variable defined using a let statement is only known in the block it is defined in, from the moment it is defined onward.
Variables declared using the let keyword are block-scoped, which means that they are available only in the block in which they were declare and NOT outside.
At the top level (outside of the function )
var rootVariable= 1242;
let blockScopedVariable = 2143;
console.log(rootVariable); // 1242
console.log(blockScopedVariable); // 2143
console.log(this.rootVariable); // 1242
console.log(this.blockScopedVariable); // undefined (not on the global scope)
Inside a function (but outside of a block)
In this case, let and var will have the same scope.
(() => {
var a = 2142;
let b = 4443;
console.log(a); // 2142 (scoped to a function)
console.log(b); // 4443 (scoped to a block)
})();
// Outside the function, you cannot access both the variables.
console.log(a); // ReferenceError: a is not defined
console.log(); // ReferenceError: b is not defined
Inside a block
Variables declared using let keyword inside a block can't be accessed from outside that block.
{
var a= 42;
let b= 43;
console.log(a); // 42
console.log(b); // 43
// Both a and b are declared within the block, hence can be accessed within the block.
}
// a is declared using the var keyword inside a block, it can be accessed from outside
console.log(a); // 42
// b is declared using the let keyword inside a block, it cannot be accessed from outside the block because it's scope is limited to the block in which it is defined in.
console.log(b); // ReferenceError: b is not defined
Temporal dead zone
Because of the temporal dead zone, variables declared using let can't be accessed before they are declared. Attempting to do so throws an error.
console.log(a); // undefined
var a= 43;
console.log(b); // ReferenceError: b is not defined
let b = 42;
const keyword
const is quite similar to let—it's block-scoped but we do have subtle differences between let and const as well. So let us discuss them first :
No reassignment
Variable declared using const can't be re-assigned.
const a = 23;
a = 33; // TypeError: Assignment to constant variable
Note that it doesn't mean that the value is immutable. Its properties still can be changed.
So in essence this means that the variable will always have a reference to the same object or primitive value, because that reference can't change. Only the reference is immutable and not the value that is held by that variable.
Check my video on variables and constants to get more understanding on these:
So this is it for this one.
If you are looking to learn Web Development, I have curated a FREE course for you on my YouTube Channel, check the below article :
Spare 2 Hours ? If so, utilize them by creating these 10 JavaScript Projects in under 2 Hours
?? Follow me on Twitter : https://twitter.com/The_Nerdy_Dev
?? Check out my YouTube Channel : https://youtube.com/thenerdydev
This content originally appeared on DEV Community and was authored by The Nerdy Dev
The Nerdy Dev | Sciencx (2021-06-19T07:54:02+00:00) Beginner JavaScript – 5 – Variables and Constants. Retrieved from https://www.scien.cx/2021/06/19/beginner-javascript-5-variables-and-constants/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.