Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript Let
The JavaScript let keyword, introduced in ES6 (2015), allows us to declare block-scoped variables. Unlike var, variables declared with let are only accessible within the block where they are defined.
Block Scope with let
Variables declared with let are confined to their block scope and cannot be accessed outside of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Let Example</title>
</head>
<body>
<h1>JavaScript Let Block Scope</h1>
<div id="result"></div>
<button onclick="testBlockScope()">Test Block Scope</button>
<script>
function testBlockScope() {
let result = document.getElementById('result');
// Variable declared inside block
{
let blockVar = "I'm inside the block";
result.innerHTML = "Inside block: " + blockVar + "<br>";
}
// Try to access the variable outside the block
try {
result.innerHTML += "Outside block: " + blockVar;
} catch (error) {
result.innerHTML += "Outside block: " + error.message;
}
}
</script>
</body>
</html>
Inside block: I'm inside the block Outside block: blockVar is not defined
let vs var Comparison
The key difference between let and var is their scope behavior:
<!DOCTYPE html>
<html>
<body>
<div id="comparison"></div>
<button onclick="compareScopes()">Compare let vs var</button>
<script>
function compareScopes() {
let output = document.getElementById('comparison');
output.innerHTML = '';
// Using var - function scoped
{
var varVariable = "I'm var";
}
output.innerHTML += "var outside block: " + varVariable + "<br>";
// Using let - block scoped
try {
{
let letVariable = "I'm let";
}
output.innerHTML += "let outside block: " + letVariable;
} catch (error) {
output.innerHTML += "let outside block: " + error.message;
}
}
</script>
</body>
</html>
var outside block: I'm var let outside block: letVariable is not defined
Key Features of let
| Feature | let | var |
|---|---|---|
| Scope | Block scoped | Function scoped |
| Hoisting | Hoisted but not initialized | Hoisted and initialized with undefined |
| Re-declaration | Not allowed in same scope | Allowed |
Temporal Dead Zone
Variables declared with let cannot be accessed before their declaration due to the temporal dead zone:
<!DOCTYPE html>
<html>
<body>
<div id="tdz-demo"></div>
<button onclick="demonstrateTDZ()">Show Temporal Dead Zone</button>
<script>
function demonstrateTDZ() {
let output = document.getElementById('tdz-demo');
try {
output.innerHTML = "Accessing before declaration: " + myLet;
let myLet = "Hello";
} catch (error) {
output.innerHTML = "Error: " + error.message;
}
}
</script>
</body>
</html>
Error: Cannot access 'myLet' before initialization
Conclusion
The let keyword provides true block scoping in JavaScript, making code more predictable and preventing common variable scoping issues. It's the preferred way to declare variables in modern JavaScript development.
Updated on: 2026-03-15T23:18:59+05:30
212 Views
Advertisements