Javascript let Keyword
In JavaScript, let
is a keyword which is used to declare a local variable with block scope. Unlike var
keyword which declares global scope variables, with ECMAScript2016(ES6) the let
keyword was introduced to define local scope variables as defining all the variables in global scope leads to a lot of problems while writing large JavaScript applications.
It allows you to declare limited scope variables that can not be accessible outside of the scope.
Let's take an example to understand the need of let
keyword when we already had var
keyword to create variables in JavaScript. Suppose you are writing a big JavaScript code which involves multiple loops, functions, and variables, as usual in all the loops you used the same variable name for the counter which is i
, and you used the var
keyword to define the variable i
, now what will happen is, the variable i will carry on its changed value throughout the whole script as it is a global variable and if you forget to re-initialize it to zero anywhere, it will cause an error and your code will break. And you will have to put in extra efforts to look for the error.
Whereas, if you define the counter variable i
using the let
keyword, its scope will be limited to the loop only and when the first loop will end so will the counter variable. This way, using let keyword makes more sense because we use very few global variables and many local variables in general programming practice.
let does not create properties of the window object when declared globally.
JavaScript let
Keyword: Syntax
The syntax for using the let
keyword for defining a variable is the same as that of the var
keyword.
let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN];
As shown in the syntax above, yes, we can use a single let
keyword to define multiple variables, but this is not new, we can do so using the var
keyword too.
Let's see a few examples to see how this let
keyword is used and how it works.
Use let
inside a code block:
JavaScript variable declared inside a block { }
can not be accessed from outside the block, if we have defined the variable using the let
keyword. See the below example:
{
let x = 2;
}
alert(x) // not accessible
uncaught ReferenceError: x is not defined
In the above example, the variable is accessible only inside the block. See the below example, to see that:
{
let x = 2;
alert(x) // accessible
}
2
Use let
inside a Loop:
It is more suitable for a loop, where we declare local variables to be used as counters. So, the variable does not conflict with the code written outside of the loop. See the below example:
let i = 5;
for(let i = 0; i < 10; i++) {
// code
}
alert(i); // print 5
5
As you can see in the output it shows 5, even though the loop incremented the value of i
variable up to 10, that is because of the scope of the local variable i
in the for
loop ending with the loop itself, hence it is not accessible outside the loop.
Use let
inside a Function:
As we know, let
keyword declares the local scope variable. So variable declared inside the function will retain within the function scope. If we will try accessing such variables from outside the function, we will get an error. See the below example:
function show() {
let amount = 2500; // Function Scope
}
alert(amount) // not accessible
Uncaught ReferenceError: amount is not defined
JavaScript let
vs var
Keyword
We have already covered the difference in the introduction, but let's see some code examples to see the difference between both.
The let
and var
, both keywords are used to declare variables, but the main difference is the scope of the declared variables.
A variable declared inside a block using var
is accessible outside of the block as it has a global scope but a variable declared using the let
keyword has a local scope. Let's see an example:
{
let amount = 2500; // block Scope
var withdraw = 2000; // global scope
}
document.write(withdraw) // accessible
document.write(amount) // not accessible
2000
Uncaught ReferenceError: amount is not defined
JavaScrip let
Keyword Example:
Let's take one more example in which we will compile all the examples above to see how variables defined using the let
keyword behaves.
As you can see, the variable x
defined at the top has a global scope and will remain accessible until the end of the script, whereas the variables x
defined inside the code block and the function, have the scope until the code block or function ends.
Conclusion
In this tutorial, we have covered all about the let keyword used for defining variables in JavaScript. It was introduced with the ECMAScript2016 and is recommended to be used for defining variables rather than using the var keyword for creating JavaScript variables.