Understanding JavaScript Variables: var, let, and const
Contents
Understanding JavaScript Variables
Learn about the differences between var, let, and const in JavaScript, JavaScript variable scoping rules, JavaScript hoisting, and JavaScript variable reassignment capabilities.
In JavaScript:
- The let keyword is used to declare block-scoped variables.
- Variables declared with let are limited to the block (a section of code between curly braces {}) in which they are defined, such as within a function, loop, or conditional statement.
- This means that the variable is only accessible within that specific block and its nested blocks.
Here’s an example of how let can be used:
function exampleFunction() {
let x = 10; // x is only accessible within this function
if (true) {
let y = 20; // y is only accessible within this if statement block
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10
console.log(y); // Error: y is not defined (outside its block)
}
exampleFunction();
complete code example :
<HTML>
<head>
</head>
<body>
<script>
function exampleFunction() {
let x = 10; // x is only accessible within this function
if (true) {
let y = 20; // y is only accessible within this if statement block
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10
console.log(y); // Error: y is not defined (outside its block)
}
exampleFunction();
</script>
</body>
</HTML>
Explanation:
1-In the example above, the variable x is declared using let within the exampleFunction().
2-It is accessible within the function and its nested blocks.
3-The variable y is declared using let within the if statement block and is only accessible within that block.
4-If we try to access y outside of its block, it will result in an error.
5-Unlike variables declared with var, variables declared with let are not hoisted to the top of their scope.
They are only accessible after their declaration within the block.
Overall, let provides block-level scoping in JavaScript and helps avoid the issues associated with variable hoisting and accidental redeclaration of variables within the same scope.
Complete code in html
Here’s a complete HTML code example that incorporates the use of JavaScript’s let keyword:
<!DOCTYPE html>
<html>
<head>
<title>Let Example</title>
<script>
function exampleFunction() {
let x = 10; // x is only accessible within this function
if (true) {
let y = 20; // y is only accessible within this if statement block
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10
console.log(y); // Error: y is not defined (outside its block)
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In the code above, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Within this function, we declare two variables, x and y, using the let keyword.
4-The if statement block creates a nested block, where the variable y is declared. Inside this block, we output the values of x and y using console.log().
5-When you click the button and open the browser’s console, you will see the values of x and y printed.
However, if you try to access y outside of its block, an error will occur because y is not defined in that scope.
Try to save this code in an HTML file and open it in a web browser to see it in action.
Properties of JavaScript Let
In JavaScript, the let keyword has the following properties:
Block-level Reassignment:
If a variable is declared with let in an outer block, it can be reassigned a new value in an inner block.
The reassignment will only affect the variable’s value within that inner block, leaving the outer block’s value unchanged.
These properties make let a useful keyword for creating variables with block scope and preventing unintended variable redeclaration within the same scope.
Block Scope:
Variables declared with let have block scope, meaning they are limited to the block in which they are defined.
Blocks are sections of code enclosed within curly braces {} like in functions, loops, or conditional statements.
Block Scope: complete code in html
Here’s a complete HTML code example that demonstrates the block scope of variables declared with let in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Block Scope Example</title>
<script>
function exampleFunction() {
let x = 10; // x is only accessible within this function
if (true) {
let y = 20; // y is only accessible within this if statement block
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10
console.log(y); // Error: y is not defined (outside its block)
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In this code example, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we declare two variables using let: x and y. x is declared at the function level and is accessible within the entire function. y is declared within the if statement block, creating a nested block.
4-Therefore, y is only accessible within that block.
We use console.log() to output the values of x and y in the respective blocks.
If you open the browser’s console, you will see 10 and 20 printed when the button is clicked.
However, if you try to access y outside of its block, it will result in an error because y is not defined in that scope.
The example demonstrates how variables declared with let have block scope and are limited to their specific blocks, ensuring they are only accessible where they are intended to be.
Hoisting:
Variables declared with let are hoisted to the top of their block but are not initialized.
This means that while the variable declaration is hoisted, the variable is not accessible until it is declared in the code.
Hoisting:complete code in html
In JavaScript, variables declared with let are hoisted to the top of their block but are not initialized.
Here’s a complete HTML code example that demonstrates hoisting with let:
<!DOCTYPE html>
<html>
<head>
<title>Hoisting Example</title>
<script>
function exampleFunction() {
console.log(x); // Output: undefined
let x = 10; // x is hoisted to the top, but not initialized until this line
console.log(x); // Output: 10
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In the code example above, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we attempt to log the value of x before its declaration. Since x is declared with let, it is hoisted to the top of the block but not initialized until the line where it is declared.
When you click the button and open the browser’s console, you will see that the first console.log(x) outputs undefined because x is hoisted but not yet initialized. The second console.log(x) outputs 10 after x is declared and assigned the value 10.
This example illustrates how variables declared with let are hoisted to the top of their block but are not accessible until they are declared in the code.
No Variable Redefinition:
Unlike the var keyword, let does not allow redeclaring the same variable within the same scope.
If you try to declare a variable with let using the same name within the same block, it will result in an error.
Example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Strings as Objects Example</title>
</head>
<body>
<h1>reass</h1>
<script>
// the first declaration of x
let x=10;
// Redefinition of x
let x=20;
let y=x+y;
console.log(y);
</script>
</body>
</html>
Another Example:
No Variable Redefinition: complete code in html
Here’s a complete HTML code example that demonstrates the inability to redeclare a variable with let within the same scope:
<!DOCTYPE html>
<html>
<head>
<title>No Variable Redefinition Example</title>
<script>
function exampleFunction() {
let x = 10;
let x = 20; // Error: SyntaxError: Identifier 'x' has already been declared
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In this code example, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we attempt to declare a variable x with the value 10 using let. However, immediately after that, we try to redeclare x with the value 20.
4-When you click the button and open the browser’s console, you will see a SyntaxError being thrown with the message “Identifier ‘x’ has already been declared”.
5-This error occurs because variables declared with let cannot be redeclared within the same scope. Each variable declaration must have a unique name within its scope.
This example demonstrates that attempting to redeclare a variable with the same name using let within the same scope results in a syntax error.
Temporal Dead Zone (TDZ):
Variables declared with let are said to be in the TDZ from the start of the block until the point of declaration.
Accessing the variable before its declaration within the block will result in a ReferenceError.
Example:
<!DOCTYPE html>
<html>
<head>
<title>x variable in Temporal Dead Zone (TDZ)</title>
</head>
<body>
<script>
console.log(x);
let x=10;
</script>
</body>
</html>
Temporal Dead Zone (TDZ):complete code in html
Here’s a complete HTML code example that demonstrates the Temporal Dead Zone (TDZ) and the error it produces when trying to access a variable before its declaration:
<!DOCTYPE html>
<html>
<head>
<title>Temporal Dead Zone Example</title>
<script>
function exampleFunction() {
console.log(x); // Output: ReferenceError: Cannot access 'x' before initialization
let x = 10; // Variable declaration and initialization
console.log(x); // Output: 10
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In this code example, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we attempt to log the value of x before its declaration. Since x is declared with let, it is subject to the Temporal Dead Zone (TDZ).
4-Accessing the variable before its declaration within the same block results in a ReferenceError.
5-When you click the button and open the browser’s console, you will see the error message “ReferenceError: Cannot access ‘x’ before initialization” for the first console.log(x).
6-This error occurs because x is in the TDZ until the line where it is declared and initialized with the value 10.
7-The second console.log(x) outputs 10 once x is declared and assigned the value.
This example demonstrates how accessing a let variable before its declaration within the same block results in a ReferenceError due to the Temporal Dead Zone.
Lexical Environment:
Variables declared with let are stored in their own lexical environment, which keeps track of the variable’s scope, value, and other relevant information.
Lexical Environment: complete code in html
Here’s a complete HTML code example that demonstrates the concept of a lexical environment with variables declared using let:
<!DOCTYPE html>
<html>
<head>
<title>Lexical Environment Example</title>
<script>
function exampleFunction() {
let x = 10;
{
let y = 20;
console.log(x); // Output: 10
console.log(y); // Output: 20
}
console.log(x); // Output: 10
console.log(y); // Error: ReferenceError: y is not defined
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In this code example, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we declare two variables: x and y, using let. x is declared in the outer block of the function, and y is declared within a nested block.
4-We use console.log() to output the values of x and y in their respective blocks. 5-When you click the button and open the browser’s console, you will see 10 and 20 printed for the console.log(x) and console.log(y) statements within the nested block.
6-However, if you try to access y outside of its block, it will result in a ReferenceError because y is not defined in that scope.
This example demonstrates how variables declared with let are stored in their own lexical environment, which keeps track of their scope and allows access within the appropriate block.
Mutable Value:
Variables declared with let can have their values reassigned.
Once a variable is declared with let, you can change its value later in the code.
Mutable Value: complete code in html
Example:
<!DOCTYPE html>
<html>
<head>
<title>reassigned of x value</title>
</head>
<body>
<script>
let x=100;
let y=100;
// reassigned of x value
x=200;
alert(x);
</script>
</body>
</html>
Here’s a complete HTML code example that demonstrates how variables declared with let can have their values reassigned:
<!DOCTYPE html>
<html>
<head>
<title>Mutable Value Example</title>
<script>
function exampleFunction() {
let x = 10;
console.log(x); // Output: 10
x = 20; // Reassigning the value of x
console.log(x); // Output: 20
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In this code example, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we declare a variable x using let and assign it an initial value of 10.
4-We then output the value of x using console.log(), which displays 10.
5-Next, we reassign the value of x to 20 by simply assigning a new value to the variable. Subsequently, we output the updated value of x, which now displays 20.
This example demonstrates that variables declared with let can have their values reassigned.
Once a variable is declared using let, you can change its value later in the code.
Block-level Reassignment:complete code in html
Here’s a complete HTML code example that demonstrates block-level reassignment using variables declared with let:
<!DOCTYPE html>
<html>
<head>
<title>Block-level Reassignment Example</title>
<script>
function exampleFunction() {
let x = 10;
console.log(x); // Output: 10
if (true) {
let x = 20; // Variable reassignment within the block
console.log(x); // Output: 20
}
console.log(x); // Output: 10 (value remains unchanged outside the block)
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In this code example, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we declare a variable x using let and assign it an initial value of 10.
4-We then output the value of x using console.log(), which displays 10.
5-Within an if statement block, we declare another variable x using let and assign it a new value of 20.
6-This reassignment of x within the block does not affect the outer variable with the same name.
7-Next, we output the value of the inner x within the block, which displays 20.
8-Finally, we output the value of the outer x outside the block, which remains unchanged at 10.
This example demonstrates that variables declared with let can be reassigned within a nested block, allowing you to have different values for variables with the same name in different scopes.
Difference Between var, let and const: complete code examples in html
Here’s a complete HTML code example that demonstrates the differences between var, let, and const in JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Variable Declaration Examples</title>
<script>
function exampleFunction() {
// var example
var x = 10;
if (true) {
var x = 20; // Variable redeclaration with the same name
console.log(x); // Output: 20
}
console.log(x); // Output: 20 (value changed)
// let example
let y = 30;
if (true) {
let y = 40; // Variable with block scope
console.log(y); // Output: 40
}
console.log(y); // Output: 30 (value unchanged)
// const example
const z = 50;
console.log(z); // Output: 50
// z = 60; // Error: TypeError: Assignment to constant variable
}
</script>
</head>
<body>
<button onclick="exampleFunction()">Click Me</button>
</body>
</html>
Explanation:
1-In this code example, we have an HTML document with a button.
2-When the button is clicked, the exampleFunction() is invoked.
3-Inside the function, we demonstrate the differences between var, let, and const by declaring variables and performing different operations.
var Example:
- We declare a variable x using var and assign it an initial value of 10.
- Within an if statement block, we redeclare x with the same name and assign it a new value of 20.
- This redeclaration affects the outer x as well due to var hoisting and function scope.
- We output the value of x within the block, which displays 20.
- Finally, we output the value of x outside the block, which remains 20.
let Example:
- We declare a variable y using let and assign it an initial value of 30.
- Within an if statement block, we declare y with the same name but using let, creating a new block scope variable.
- We output the value of y within the block, which displays 40.
- Finally, we output the value of y outside the block, which remains 30 as the outer y is unaffected by the block-level declaration.
const Example:
- We declare a variable z using const and assign it an initial value of 50.
- We output the value of z, which displays 50.
- Attempting to reassign a new value to z by uncommenting the line // z = 60; will result in a TypeError since const variables are read-only and cannot be reassigned.
These examples showcase the differences in scoping, redeclaration, and immutability between var, let, and const variables in JavaScript.
Quiz with answers
Here’s a multiple-choice quiz with answers related to the concepts discussed in this lesson (var, let, const).
1-Which keyword is used to declare variables with function scope?
a) var
b) let
c) const
d) all of the above
Answer: a) var
2-Variables declared with let have ______ scope.
a) global
b) function
c) block
d) object
Answer: c) block
3-Variables declared with let are subject to ______.
a) hoisting
b) redeclaration
c) temporal dead zone
d) mutable values
Answer: c) temporal dead zone
4-Which keyword does not allow redeclaring a variable within the same scope?
a) var
b) let
c) const
d) none of the above
Answer: c) const
5-Variables declared with const are ______.
a) mutable
b) immutable
c) block-scoped
d) hoisted
Answer: b) immutable
6-What happens when you try to reassign a value to a const variable?
a) It results in a syntax error.
b) The new value is assigned without any error.
c) It throws a reference error.
d) It throws a type error.
Answer: d) It throws a type error.
7-Variables declared with var are hoisted to the top of the ______.
a) file
b) function
c) block
d) HTML page
Answer: b) function
8-Which keyword allows variables to be reassigned but not redeclared?
a) var
b) let
c) const
d) both b) and c)
Answer: b) let
9-What is the scope of a variable declared with const?
a) global
b) function
c) block
d) object
Answer: c) block
10-The Temporal Dead Zone (TDZ) occurs with variables declared using ______.
a) var
b) let
c) const
d) both b) and c)
Answer: d) both b) and c)
11-Which keyword has the highest level of restriction among var, let, and const?
a) var
b) let
c) const
d) They have the same level of restriction.
Answer: c) const
12-Which keyword should you use when declaring a variable that will not be reassigned?
a) var
b) let
c) const
d) any of the above
Answer: c) const
13-Which of the following keywords is not limited to block scope?
a) var
b) let
c) const
d) all of the above
Answer: a) var
14-Variables declared with let can be accessed before their declaration within the same block. (True/False)
Answer: False
15-What is the difference between let and const regarding reassignment?
a) let allows reassignment, while const does not.
b) const allows reassignment, while let does not.
c) Both let and const allow reassignment.
d) Neither let nor const allows reassignment.
Answer: a) let allows reassignment, while const does not.
16-Which keyword is commonly used for variables that store constant values?
a) var
b) let
c) const
d) all of the above
Answer: c) const
17-Variables declared with const must be initialized with a value at the time of declaration. (True/False)
Answer: True
18-What is the difference between var and let regarding hoisting?
a) Variables declared with var are hoisted, while let variables are not.
b) Variables declared with let are hoisted, while var variables are not.
c) Both var and let variables are hoisted.
d) Neither var nor let variables are hoisted.
Answer: a) Variables declared with var are hoisted, while let variables are not.
19-Which keyword allows variables to be declared without initializing them?
a) var
b) let
c) const
d) all of the above
Answer: a) var
20-The scope of a variable declared with let is limited to the ______.
a) entire program
b) current function
c) current block
d) global environment
Answer: c) current block
21-Variables declared with const must be assigned a value at the time of declaration. (True/False)
Answer: True
22-Which keyword provides block-level scoping in JavaScript?
a) var
b) let
c) const
d) both b) and c)
Answer: d) both b) and c)
23-What happens if you declare a variable with the same name using let in an inner block?
a) It creates a new variable with the same name within the inner block, shadowing the outer variable.
b) It results in a syntax error.
c) It automatically promotes the inner variable to the outer block.
d) It throws a reference error.
Answer: a) It creates a new variable with the same name within the inner block, shadowing the outer variable.
24-Variables declared with let or const are hoisted to the top of their block. (True/False)
Answer: True
25-Which of the following keywords is used for defining constants?
a) var
b) let
c) const
d) final
Answer: c) const
26-Variables declared with let or const are accessible before their declaration within the same block. (True/False)
Answer: False
27-Which keyword allows variable redeclaration within the same scope?
a) var
b) let
c) const
d) both a) and b)
Answer: a) var
28-The TDZ (Temporal Dead Zone) refers to the period between ______.
a) variable declaration and initialization
b) variable hoisting and initialization
c) variable initialization and reassignment
d) variable redeclaration and assignment
Answer: a) variable declaration and initialization
29-Which keyword provides block-level scoping and prevents accidental redeclaration of variables within the same scope?
a) var
b) let
c) const
d) all of the above
Answer: b) let
30-Variables declared with const can have their values reassigned. (True/False)
Answer: False
References
Here are some references you can use to further explore the concepts discussed in this lesson:
Mozilla Developer Network (MDN) – let –
Mozilla Developer Network (MDN) – const –
Mozilla Developer Network (MDN) – var –