This article highlights new feature introduced in ECMAScript 6 called “Block Scoped Variable” & “Block Scoped Functions“. On the internet, you may find many articles on block scoped variable and functions. But this is an attempt to present the topic in the simplest and easiest way as I can so that developers of each level can understand the concept clearly.
Hope everyone reading this article knows about the concept of Block Scope. In general, SCOPE refers to the range to which the particular object is relevant and BLOCK SCOPE refers to the range inside the block. So let's dive into this concept quickly without wasting much time.
Block Scoped Variables
As per ECMAScript 6 standard, a new keyword has been introduced named as LET. It's somehow similar to the keyword VAR, though it has some differences.
Both VAR & LET keyword are the same in context of declaring variable but different regarding its scope. LET is scoped to the nearest enclosing block whereas VAR is scoped to the nearest function block. If both the keywords are present outside the block, then it behaves similarly as global.
Example 1 (with VAR Keyword)
<script>
for (var i = 0; i < 10; i++) {
}
document.write(i);
</script>
// Output : 10
Example 1 (with LET Keyword)
<script>
for (let i = 0; i < 10; i++) {
}
document.write(i);
</script>
// Output : ReferenceError: i is not defined
For the above example, with LET keyword, the variable i is locally blocked to the for loop, but in case of VAR keyword, the variable i is global.
Example 2 (with VAR Keyword)
<html>
<head>
<title>Testing Block Scoped Variables</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #000;
display: inline-block;
font-size: 30px;
text-align: center;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
for(var i = 1; i < 4; i++) {
$("#dv_blockScope" + i).on('click', function () {
alert(i);
});
}
});
</script>
</head>
<body>
<div id="dv_blockScope1">1</div>
<div id="dv_blockScope2">2</div>
<div id="dv_blockScope3">3</div>
</body>
</html>
// This will output 4 on each click as it refers to the same object.
In order to fix the above issue, we need to wrap the click event in an anonymous function and pass i as argument. But without creating function, we can fix the above issue by just using LET instead of VAR as shown in the code below.
Example 2 (with LET Keyword)
<html>
<head>
<title>Testing Block Scoped Variables</title>
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #000;
display: inline-block;
font-size: 30px;
text-align: center;
cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
for(let i = 1; i < 4; i++) {
$("#dv_blockScope" + i).on('click', function () {
alert(i);
});
}
});
</script>
</head>
<body>
<div id="dv_blockScope1">1</div>
<div id="dv_blockScope2">2</div>
<div id="dv_blockScope3">3</div>
</body>
</html>
// This will output the respective number i.e. 1, 2 & 3.
Block Scoped Functions
According to ECMAScript 6, the syntax for block scoped functions got changed. The function scope can be written in a different and easy manner. Let's go through one example to differentiate.
Example 3 (Syntax with ES5)
<script>
(function() {
var operation = function (a, b) {
return a + b + '<br>';
}
document.write(operation(1, 2));
(function () {
var operation = function(a, b) {
return a * b + '<br>';
}
document.write(operation(2, 3));
})();
document.write(operation(2, 3));
})();
</script>
The above example contains the same method but in a different function block. There are some specific notations I used in the above example which let me note it down.
- While declaring a self executable function, we had to use
(function() { .. })();. - We had to use
var = function (param1, param2, …) { … }; notation to define a function.
But with ECMAScript 6, let's see how the scoped definition for function changed.
Example 3 (Syntax with ES6)
<script>
{
function operation(a, b) {
return a + b + '<br>';
}
document.write(operation(1, 2));
{
function operation(a, b) {
return a * b + '<br>';
}
document.write(operation(2, 3));
}
document.write(operation(2, 3));
};
</script>
Check the syntax with ES6.
- We do not need to write a complicated line like this
(function() { .. })();. We only have to write { .. };, plain & simple. - We do not need to use
var = function (param1, param2, …) { … };, instead we can directly write function (param1, param2, …) { … }.
Example 4 (Syntax with ES5)
<script>
(function foo() {
let x = 1;
(function foo() {
let x = 2;
document.write(x + '<br>');
})();
document.write(x + '<br>');
})();
</script>
Example 4 (Syntax with ES6)
<script>
{
let x = 1;
{
let x = 2;
document.write(x + ' <br>');
}
document.write(x + ' <br>');
}
</script>
That’s it !!! Hope I am clear on Block Scoped Variables & Block Scoped Functions. Did you find it useful? If yes, then please like and add comments :). Thank you and I will be happy to hear from you :) :).
Note: Check here for Browser support details.
CodeProject
