JavaScript let

Example

let age = 25;
let name = "John";
console.log(age);  
console.log(name); 

You can also try this code with Online Javascript Compiler

Run Code

Output: 

25
John

Block Scope

Variables declared with let are limited to the block in which they are defined. A block is any code enclosed in curly braces ({}). This behavior makes let a preferred choice for declaring variables within loops, conditions, and functions.

Example

{
    let blockScoped = "I am inside a block";
    console.log(blockScoped); 
}
// console.log(blockScoped);

You can also try this code with Online Javascript Compiler

Run Code

Output: 

I am inside a block
 Error: blockScoped is not defined

Explanation:

The blockScoped variable is only accessible inside the curly braces. Trying to access it outside results in an error.

Global Scope

When a variable is declared using let outside any function or block, it becomes a global variable. However, unlike var, it doesn’t create a property on the global window object.

Example

let globalVar = "I am global";
console.log(globalVar);  
// Checking if it’s a property of the global object
console.log(window.globalVar); 

You can also try this code with Online Javascript Compiler

Run Code

Output

I am global
undefined

Function Scope

Variables declared with let inside a function are accessible only within that function.

Example

function greet() {
    let message = "Hello, World!";
    console.log(message);
}


greet();
// console.log(message);

You can also try this code with Online Javascript Compiler

Run Code

Output

Hello, World!
Error: message is not defined

Explanation:

The message variable is confined to the greet function and cannot be accessed outside of it.

Redeclaring Variables in Different Blocks

Using let, you can redeclare a variable in separate blocks without any issues. Each block will have its own version of the variable.

Example

{
    let name = "Alice";
    console.log(name); // Output: Alice
}


{
    let name = "Bob";
    console.log(name);
}

You can also try this code with Online Javascript Compiler

Run Code

Output: 

Alice
Bob

Explanation:

The name variable is declared twice but in separate blocks, so no conflict occurs.

Redeclaring Variables in the Same Block

Unlike var, you cannot redeclare a variable with let in the same block. Doing so will result in an error.

Example

let city = "New York";
// let city = "Los Angeles"; // Error: Identifier 'city' has already been declared
console.log(city); 

You can also try this code with Online Javascript Compiler

Run Code

Output:

New York

Explanation:

Redeclaring the city variable in the same block throws an error, ensuring safer code.

Does Not Support Hoisting

Variables declared with let are hoisted to the top of their scope but are not initialized. Accessing them before declaration results in a ReferenceError.

Example

console.log(number); // Error: Cannot access 'number' before initialization
let number = 42;

You can also try this code with Online Javascript Compiler

Run Code

Explanation:

The number variable is hoisted, but it cannot be accessed before its declaration.

Supported Browser

The let keyword is supported in all modern browsers. Here’s a breakdown:

Frequently Asked Questions

What is the difference between let and var?

• let has block scope, while var has function scope.
   
• let does not allow redeclaration in the same block, but var does.
   
• let variables are not added to the global object, while var variables are.

Why does let throw a ReferenceError when accessed before declaration?

This is due to the "temporal dead zone" (TDZ). Variables declared with let are hoisted but cannot be accessed before initialization.

Can I use let to declare constants?

No, for constants, you should use const. Variables declared with let can be reassigned, but constants cannot.

Conclusion

The let keyword in JavaScript is a powerful tool for declaring variables with block-level scope. It helps in writing clean and error-free code by avoiding issues like accidental redeclaration and unexpected hoisting behaviors. In this article, we discussed let syntax, its scope, behavior in different contexts, and browser compatibility. By using let, you can make your JavaScript code more predictable and maintainable.