Introduction
In JavaScript, the act of declaring a variable involves creating a variable and assigning it a name, allowing it to hold a value. A variable serves as a named storage unit for a value, which enables it to be utilized for data storage and manipulation within a program.
In JavaScript, there are three methods to declare variables: var, let, and const. Each of these methods has distinct characteristics regarding scope, hoisting behavior, and the rules governing re-assignment.
What are var, let, and const in JavaScript?
var: In JavaScript, the var keyword is utilized to declare a variable that possesses either function-level or global scope. It permits both re-declaration and modification within the same scope.
The let keyword in JavaScript is used to declare a variable that possesses block scope. This means that the variable can be updated within the block but cannot be redeclared within the same block scope.
The const keyword in JavaScript is utilized to declare variables that are confined to the block scope and cannot be reassigned once they have been initially assigned a value.
How to Declare Variables with var, let, and const in JavaScript
Declare Variables with var
In JavaScript, the keyword var serves as the initial method for declaring variables. The scope of the var keyword can either be function-scoped or globally scoped, contingent upon the location of its declaration.
Example
var demo = "Example";
console.log(demo);
Output:
Example
Declare variables with let
Variables that are defined using the let keyword can possess a global, local, or block scope. The let declaration introduces block-level scoping, indicating that the variable is only available within the specific block in which it has been declared.
Example
if (true) {
let grade = "A";
console.log(grade);
}
console.log(grade)
Output:
Declare variables with const
In JavaScript, the const keyword is employed to declare a variable that is intended to remain unaltered following its initial assignment. Similar to the let keyword, const is also constrained to block scope.
Example
const name = "Rohit";
console.log(name);
Output:
Re-declaring Variables with var, let, and const
Re-declaring variables with var
When a variable is declared multiple times utilizing the var keyword, it permits re-declaration within the same scope. Consequently, the last console.log(a) will output 10, as it supersedes the earlier assigned value.
Example
var a = 5;
var a = 10;
console.log(a);
Output:
Re-declaring variables with let
When you define a variable using the keyword let, it permits you to reassign values to that variable, but it does not allow you to redeclare it within the same scope.
Example
let name = "Rohit";
name = "Akash";
console.log(name);
Output:
Re-declaring variables with const
The value of a const variable is immutable. After we assign a specific value to it, that value remains fixed and cannot be altered during the remainder of the program's execution.
Example
const myvar = "first";
console.log(myvar); // first
// reassignment
myvar = "second";
console.log(myvar); // TypeError
// redeclaration
const myvar = "third";
console.log(myvar); // Syntax Error
In this scenario, reassigning a variable results in a Type Error. Additionally, if we attempt to re-declare it, a syntax error will occur due to its block-level scope.
Hoisting Behaviour of var, let, and const
In JavaScript, hoisting refers to a phenomenon in which variable declarations are elevated to the top of their respective scope. Nevertheless, the mechanism of hoisting varies among the keywords var, let, and const.
Hoisting with var
When utilizing the var keyword, the declaration of the variable is elevated to the beginning of its scope, while the actual assignment stays in its original position. If you attempt to reference a var variable prior to its declaration and initialization, it will yield undefined.
Example
console.log(myVariable); // Output: undefined
var myVariable = 10;
console.log(myVariable); // Output: 10
Output:
undefined
10
Hoisting with let
In JavaScript, variables that are declared using the let keyword do not undergo hoisting to the top of their respective scope. Consequently, if an attempt is made to access a variable prior to its declaration, it will inevitably result in a Reference Error.
Example
console.log(myvar); // ReferenceError
let myvar = 50;
console.log(myvar); // output 50
In this illustration, you will observe that attempting to print the variable prior to its declaration results in an error.
Hoisting with const
Variables that are defined using const do not experience hoisting to the upper part of their scope. It can be stated that variables declared with const are not subject to hoisting and must be given an initial value at the moment of their declaration.
Example
console.log(x)
const x=10
Difference between var, let, and const in JavaScript
| var | let | const |
|---|---|---|
| The scope of a var variable is functional and global scope. | The scope of let variable is block scope. | The scope of const variable is also block scope. |
| var can be updated, and it can also be re-declared in the same scope. | let can be updated, but it cannot be re-declared in the same scope. | const can neither be updated nor re-declared in any scope. |
| It can be declared withoutInitialization. | It can be declared without initialization. | It cannot be declared without initialization. |
| It can be accessed without initialization as its default value is "undefined". | It cannot be accessed without initialization; otherwise, it will givereferenceError. | It cannot be accessed without initialization, as it cannot be declared without initialization. |
| These variables are hoisted. | These variables are hoisted but stay in the temporal dead zone until the initialization. | These variables are hoisted but stay in the temporal dead zone until the initialization. |
Initialization.
referenceError.