Why use let instead of var in JavaScript?

Block Scope: let vs var

var: Variables declared with var are function-scoped, meaning they are accessible throughout the function in which they are declared, even if they are inside a block like an if statement or a loop.

<script>
  function example_var () {
    if (true) {
      var x = 10;
    }
    document.write(x)	// Output: 10, however variable x is accesible outside the block.
  }

  example_var();   
</script>

let (was introduced in ES6): Variables declared with let are block-scoped, meaning they are only accessible within the block they are defined in. This leads to fewer bugs and more predictable behavior.

<script>
  function example_let () {
    if (true) {
      let x = 10;
    }
    document.write(x)		// Output: Uncaught ReferenceError: x is not defined.
  }

  example_let();  
</script>

Preventing Accidental Global Variables

var: If you declare a variable with var inside a function but forget to use var, it will become a global variable.

<script>
  function example_var () {
    if (true) {
      x = 10;
    }
  }
  example_var();
  document.write(x)		// Output: 10. Variable can be accessed from any where. Since, I have declared no "var".
</script>

let: Using let reduces the risk of creating accidental global variables, because it enforces block scoping.

<script>
  function example_let () {
    if (true) {
       let x = 10;
    }
  }
  example_let();
  document.write(x)		// Output: Uncaught ReferenceError: x is not defined
  
  // x is declared using "let". It is "block scroped".
</script>

🚀 Remember: let can be declared "globally". However, its access will be limited to the block in which it is declared.

Example using for loop

Here's another example that shows the difference and advantage of using let instead of var.

<script>
  // for loop using var.
  for ( var i = 0; i < 3; i++) {
    setTimeout(function() {
      document.write(i);  // Output: 3, 3, 3 (due to function scope)
    }, 500);
  }

  // for loop using let.
  for ( let i = 0; i < 3; i++) {
    setTimeout(function() {
      document.write(i);  // Output: 0, 1, 2 (due to block scope)
    }, 1000);
  }
</script>

For loop using var: The variable "i" is function-scoped, so the same variable is shared across all iterations of the loop. By the time the setTimeout function executes, "i" has already reached its final value of 3.

For loop using let: "i" is block-scoped, meaning a new "i" is created for each iteration of the loop, preserving the correct value.

Cannot Redeclare let Variables

The let keyword ensures that variables cannot be redeclared within the same scope. For instance, if you declare a variable using "let name" within a particular scope, you cannot redeclare it again using "let" within that same scope. In contrast, using var allows for the accidental redeclaration of the same variable name elsewhere in the code, which can still execute without errors. This can lead to confusion and incorrect outputs.

Example: redeclare variable name using var

<script>
  var name = 'Arun'
  var name = 'Shouvik';
  document.write (name);	// Output: Shouvik. There will be no ERROR.
</script>

Example: redeclare variable name using let

<script>
  let name = 'Arun';
  let name = 'Shouvik';
  
  document.write (name);  // SyntaxError: Identifier 'name' has already been declared
</script>

← PreviousNext →