JavaScript let
JavaScript Let
The let statement declares a block scope local variable.
Using var Statement
Redeclaring a global variable inside a block will also affect the global variable.
Example
<!DOCTYPE html>
<html>
<body>
<p id="point"></p>
<p id="point1"></p>
<script>
var x = document.getElementById("point");
var y = document.getElementById("point1");
var i = 0;
if(i == 0){
var i = 55;
x.innerText = "i = " +i;
}
y.innerText = "i = " +i;
</script>
</body>
</html>
Syntax
Using let Statement
Redeclaring a global variable inside a block with let keyword will not affect the global variable.
Example
<!DOCTYPE html>
<html>
<body>
<p id="point"></p>
<p id="point1"></p>
<script>
var x = document.getElementById("point");
var y = document.getElementById("point1");
var i = 0;
if(i == 0){
let i = 55;
x.innerText = "i = " +i;
}
y.innerText = "i = " +i;
</script>
</body>
</html>
Redeclare let Statement
You cannot redeclare the let statement within the same block.
Note: In the following example, the SyntaxError is thrown.
Example
<!DOCTYPE html>
<html>
<body>
<script>
let i = 0;
let i = 0; // SyntaxError thrown.
</script>
</body>
</html>
let Statement without Block
You should use curly brackets explicitly to define the block, else the SyntaxError is thrown.
Note: In the following example, the SyntaxError is thrown.
Example
<!DOCTYPE html>
<html>
<body>
<p id="point"></p>
<script>
var x = document.getElementById("point");
let i = 1;
switch(i){
case 0:
let foo = "zero";
x.innerText = foo;
break;
case 1:
let foo = "one"; // SyntaxError thrown.
x.innerText = foo;
break;
}
</script>
</body>
</html>
let Statement with Block
In the following example, we will redeclare the let statement by using curly brackets explicitly.
Example
<!DOCTYPE html>
<html>
<body>
<p id="point"></p>
<script>
var x = document.getElementById("point");
let i = 1;
switch(i){
case 0:{
let foo = "zero";
x.innerText = foo;
break;
}
case 1:{
let foo = "one";
x.innerText = foo;
break;
}
}
</script>
</body>
</html>
var vs let Statement
The following example demonstrates the difference between the var and the let statement.
Example
<!DOCTYPE html>
<html>
<body>
<p id="point"></p>
<p id="point1"></p>
<script>
var x = document.getElementById("point");
var y = document.getElementById("point1");
var i = 0;
var j = 0;
for(var i = 0; i < 10; i++){
//Empty for loop
}
for(let j = 0; j < 10; j++){
//Empty for loop
}
x.innerText = "i = " +i;
y.innerText = "j = " +j;
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 97% of JavaScript Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in JavaScript.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author
