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.