In this article, we will explore the keywords var, let, and const in JavaScript. We will delve into each keyword in detail, examining their individual characteristics and uses.
var keyword
In JavaScript, the var keyword is employed to declare variables within the code. The syntax is as follows:
var variableName = value;
In the above syntax,
var: It is the keyword.
variableName: The term variableName is substituted with the designated name of the variable.
value: This refers to the data assigned to the variable. In cases where no value is assigned to the variable, it will automatically receive a default value of undefined.
Properties of var keyword:
Scope of the var keyword
The var keyword is scoped to the function or is global in nature. Variables that are defined using the var statement are initialized with a value prior to the actual execution of the code. In cases where a value is not explicitly assigned, the variable will automatically be assigned a default value.
Variables that are declared within a function are inaccessible from outside that function.
Variables that are defined at a global scope, meaning they are declared outside of any function, cannot be removed. However, these global variables can be accessed from any part of the program.
Hoisting of var keyword
Variables in JavaScript experience hoisting, which means they are elevated to the top of their respective scope. When a variable is declared and assigned a value after it has been logged to the console, the declaration is hoisted above the console statement. However, the assignment does not get hoisted alongside the declaration, resulting in the variable being initialized to undefined at that point. This behavior is unique to the var keyword in JavaScript.
Demonstrations of JavaScript var keyword
Demo 1:
In the upcoming demonstration, we will define a variable at a global scope.
Code:
var x = 24
function f() {
var y = 36
console.log(x, y);
}
f();
console.log(x);
Output:
It is evident that the global variable can be accessed both within the function and from outside of it.
Demo 2:
In the upcoming demonstration, we will initialize three variables simultaneously within a single statement.
Code:
var x = 25,
y = 30,
z = 39;
function xyz(){
console.log(x, y, z);
}
xyz();
console.log(x, y, z);
Output:
In the output, we can observe that the three variables are being accessed both internally within the function as well as externally from outside the function.
Demo 3:
We will define a variable within a function and examine how it behaves when it is accessed from outside that function.
Code:
function cars(){
var car = "BMW";
console.log(car);
}
cars();
console.log(car);
Output:
In this output, we observe that when the variable "car" is accessed within the function, it produces the expected result. However, attempting to access the variable "car" from outside the function results in an error, as the variable's scope is limited to the function itself.
Demo 4:
Within a function, we will define a variable subsequent to it being output to the console.
Code:
function showHoisting() {
console.log(message);
var message = "Demonstration of Hoisting";
console.log(message);
}
showHoisting();
Explanation:
Within a function, we have defined a variable named "message" which is subsequently logged to the console. By hoisting the variable "message" to the top of the function, it allows for the variable to be printed to the console; however, its value will be undefined at that point.
Output:
In the provided output, it becomes evident that when the variable "message" is referenced within the function prior to its declaration, it results in an output; however, the value of "message" remains undefined. Conversely, when the variable "message" is accessed within the function after it has been declared, it successfully outputs the value that has been assigned to "message".
Demo 5:
In the upcoming demonstration, we will perform both the redeclaration and reassignment of the variable within the same scope.
var place = "Mumbai";
console.log(place);
var place = "Noida";
console.log(place);
Explanation:
We have redefined the variable "place" and subsequently output it to the console. Initially, we declared and assigned a value to the variable "place," followed by logging the value of "place" to the console. After this, we declared and assigned a new value to the variable "place" once more, and once again we logged the message pertaining to the variable.
Output:
In this output, we observe that the value of the variable "message" is displayed in the console following the sequence of its declaration.
let keyword
In JavaScript, the let keyword is employed for the purpose of declaring a variable.
Syntax:
{
let variableName = value;
}
In the above syntax,
let: It is the keyword.
variableName: The designation of the variable will be substituted in place of variableName.
value: This refers to the specific value assigned to a variable. In the event that no value is allocated to the variable, a default value will be automatically established.
Properties of let keyword:
Scope of let keyword
The let keyword accommodates block scope, global scope, and function scope.
Hoisting of var keyword
It does not support hoisting.
Redeclaration and reassignment of var keyword
It allows for redeclaration and reassignment across various blocks; however, it does not permit redeclaration and reassignment within the same block.
Demonstrations of JavaScript let keyword
Demo 1:
In the provided demonstration, a variable has been defined within a specific block, indicating that its accessibility is limited exclusively to that block.
Code:
{
let car = "BMW";
console.log(car)
}
console.log(car)
Output:
In the following output, it can be observed that accessing the variable car within the block yields a result, whereas attempting to access the variable car outside of the block results in an error.
Demo 2:
We will create a variable within the global scope, indicating that it will be accessible throughout the entire program.
Code:
let quantity = 51;
console.log(quantity);
function fun() {
console.log(quantity);
}
fun();
Output:
In the output presented below, it is evident that when the variable quantity is referenced from any location within the program, it produces a result.
Demo 3:
Within the function, we will define a variable, indicating that it will be accessible exclusively within that function.
Code:
function colors() {
let color = "orange";
console.log(color);
}
colors();
console.log(color);
Output:
It can be observed that when the variable color is accessed within the function, it produces the expected output; however, when the variable color is accessed outside of the function, an error is displayed.
Demo 4:
We will declare the identical variable across various blocks.
Code:
let place = "Noida";
{
let place = "New Delhi";
console.log(place);
}
console.log(place);
Output:
It can be observed that the identical variable color is retrieved from various blocks, resulting in distinct outputs.
Demo 5:
We will define the identical variable within the same scope and observe the outcome.
Code:
{
let place = "New Delhi";
console.log(place);
let place = "Noida";
console.log(place);
}
Output:
It is evident that accessing the same variable within a block results in an error, indicating that declaring the same variable within the same block is not permitted.
const keyword
The const keyword functions similarly to the let keyword, as it is employed for declaring local variables.
Syntax:
{
const variableName = value;
}
In the above syntax,
const: It is the keyword.
variableName: The designation of the variable is provided in place of variableName.
value: It is the value provided to the variable.
Properties of const keyword:
Scope of the const keyword
The const keyword accommodates both block scope and function scope.
Hoisting of const keyword
It does not support hoisting.
Re-declaration and re-assignment of const keyword
It allows for redeclaration and reassignment across various blocks, but does not permit this within a single block.
Demonstrations of JavaScript const keyword
Demo 1:
A variable that has been declared within a block scope can only be accessed from within that specific block.
Code:
{
const language = "Hindi";
console.log(language);
}
console.log(language);
Output:
It is observable that when the variable is accessed within the block, it correctly produces the output. However, if the variable is referenced outside the block, an error is generated.
Demo 2:
Within the function, we will define a variable, indicating that this variable will be restricted to access solely within the scope of that function.
Code:
function countries() {
let country = "India";
console.log(country);
}
countries();
console.log(country);
Output:
It can be observed that when the variable country is referenced within the function, it yields the expected output. However, when an attempt is made to access the variable country from outside the function, it results in an error.
Demo 3:
We will define the identical variable across various blocks.
Code:
let number = 2511;
{
let number = 46;
console.log(number);
}
console.log(number);
Output:
It is observable that the identical variable, specifically number, is accessed from various blocks and yields distinct outcomes.
Conclusion:
In this article, we have explored the keywords var, let, and const in JavaScript. Each keyword has been thoroughly examined with the aid of practical demonstrations to enhance understanding.