JavaScript Let

❮ Previous Next ❯

Block Scope

Before 2015, JavaScript didn't have something called Block Scope.

JavaScript used to have Global Scope and Function Scope.

ES6 brought in two fresh words for JavaScript: let and const.

These two words offer Block Scope in JavaScript:

Example

Variables declared inside a { } block cannot be accessed from outside the block:

{
let x = 2;
}
// x can NOT be used here

Global Scope

Variables created with the var keyword have a wide reach, known as Global Scope.

Variables declared with the var word can't be limited to a specific block of code:

Example

Variables declared with varinside a { } block can be accessed from outside the block:

{
var x = 2;
}
// x CAN be used here

Cannot be Redeclared

Variables created using the let keyword cannot be declared again.

You can't accidentally use the same name for a variable that you've already used with let.

With let you can not do this:

let x = "John Doe";

let x = 0;

Variables defined with var can be declared again.

With var you can do this:

var x = "John Doe";

var x = 0;

Redeclaring Variables

Redeclaring a variable using the var keyword can impose problems.

If you declare a variable again inside a section, it will also be declared again outside that section.

Redeclaring a variable using the let keyword can solve this problem.

Changing a variable's value within a specific section of code won't affect the variable's value outside of that section.

Difference Between var, let and const

	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

What is Good?

let and const have block scope.

let and const can not be redeclared.

let and const must be declared before use.

let and const does not bind to this.

let and const are not hoisted.

What is Not Good?

var does not have to be declared.

var is hoisted.

var binds to this.

What's not okay?

Variables created using var are moved to the top and can be set at any point.

The code var connects with the keyword this.

Browser Support

Internet Explorer 11 and older versions don't work with the let and const keywords.

The following table defines the first browser versions with full support:

Redeclaring

You can use the var keyword in JavaScript to declare a variable again anywhere in your code.

Using the let keyword, you cannot declare the same variable again within the same section of code.

Example

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

You can use the let keyword to declare a variable again in a different part of your code. This is allowed.

Let Hoisting

Variables created using var are moved to the top before the code runs, and you can give them a value whenever you want.

Meaning: You can use the variable before it is declared:

If you'd like to understand hoisting better, read the section on JavaScript Hoisting.

Variables created using let are also moved to the top of the code block but aren't given a starting value.

Explanation: If you use a let variable before you declare it, you will get a ReferenceError.

<!DOCTYPE html>
<html>
  <body>
    <h2>Redeclaring a Variable Using var</h2>
    <p id="demo"></p>
    <script>
      var x = 10;
      // Here x is 10
      {
        var x = 2;
        // Here x is 2
      }
      // Here x is 2
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>Redeclaring a Variable Using let</h2>
    <p id="demo"></p>
    <script>
      let x = 10;
      // Here x is 10
      {
        let x = 2;
        // Here x is 2
      }
      // Here x is 10
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript let</h2>
    <p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program: </p>
    <p id="demo"></p>
    <script>
      var x = 2;
      // Now x is 2
      var x = 3;
      // Now x is 3
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript let</h2>
    <p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed: </p>
    <p id="demo"></p>
    <script>
      let x = 2; // Allowed
      {
        let x = 3; // Allowed
      } {
        let x = 4; // Allowed
      }
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Hoisting</h2>
    <p>With <b>var</b>, you can use a variable before it is declared: </p>
    <p id="demo"></p>
    <script>
      carName = "Volvo";
      document.getElementById("demo").innerHTML = carName;
      var carName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Hoisting</h2>
    <p>With <b>let</b>, you cannot use a variable before it is declared. </p>
    <p id="demo"></p>
    <script>
      try {
        carName = "Saab";
        let carName = "Volvo";
      } catch (err) {
        document.getElementById("demo").innerHTML = err;
      }
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics

JavaScript Let

Block Scope

Example

Global Scope

Example

Cannot be Redeclared

Redeclaring Variables

Difference Between var, let and const

What is Good?

What is Not Good?

What's not okay?

Browser Support

Redeclaring

Example

Let Hoisting

Web Development