JavaScript let | Definition, Syntax, Characteristics and Examples

JavaScript let | Definition, Syntax, Characteristics and Examples

4 mins read44 Views Comment
clickHere
Esha
Esha Gupta
Associate Senior Executive
Updated on Feb 29, 2024 11:34 IST

Have you heard of ‘let’ keyword in JavaScript? Well, in this blog, we will understand everything about it, starting from definition, syntax, characteristics and various examples!

 

In JavaScriptlet is a keyword introduced in ES6 (ECMAScript 2015) that is used for variable declaration. It improves upon var by providing block-level scoping, which makes it more predictable and easier to manage in modern JavaScript development.

Table of Content

JavaScript ‘let’ Definition

The let keyword in JavaScript is used to declare a block-scoped local variable, optionally initializing it to a value. It’s part of the ECMAScript 2015 (ES6) specification. Variables declared with let have their scope in the block for which they are defined, as well as in any contained sub-blocks. This differs from variables declared with var, which have their scope in the entire enclosing function.

Syntax of JavaScript ‘let’

The let keyword in JavaScript is used for declaring a variable with block scope, potentially initializing it to a value. The syntax is as follows:

1. Declaration

let variableName;

2. Initialization

let variableName = value;

Where,

  • variableName: Name of the variable.
  • value: Initial value assigned to the variable.

Characteristics of ‘let’

  • Block Scope: Unlike var, which is function-scoped, variables declared with let are block-scoped. This means they only exist within the nearest set of curly braces ({}) such as those used in loops, if-statements, or other blocks.
  • No Hoisting to Scope Start: Variables declared with let are hoisted but not initialized. This means the variable exists during the entire block but cannot be accessed until after the declaration is encountered. Accessing the variable before the declaration results in a ReferenceError.
  • No Re-Declaration in the Same Scope: With let, re-declaring the same variable within the same scope is not allowed and results in a syntax error. This helps avoid accidental re-declarations, which can lead to bugs.
  • Temporal Dead Zone: The period from the start of the block until the declaration is reached is known as the Temporal Dead Zone (TDZ) for that variable. During this time, the variable is in a “dead zone” where accessing it results in an error.
 

Examples of JavaScript ‘let’

1. Basic Declaration and Initialization


 
let message = 'Welcome to Shiksha Online!';
console.log(message);
Copy code

Output

Welcome to Shiksha Online!

Here, the variable message is initialized with the string ‘Welcome to Shiksha Online!‘ and then logged to the console.

2. Block Scope


 
let courseName = 'Shiksha Basic Course';
if (true) {
let courseName = 'Shiksha Advanced Course';
console.log(courseName);
}
console.log(courseName);
Copy code

Output

Shiksha Advanced Course
Shiksha Basic Course

This example illustrates block scoping with let. There are two variables named courseName, each declared in different scopes (one inside the if block and one outside). They are treated as different variables.

3. Reassignment


 
let userCount = 30;
userCount = 31;
console.log(`User count for Shiksha Courses: ${userCount}`);
Copy code

Output

User count for Shiksha Courses: 31

The userCount variable, representing users enrolled in “Shiksha Courses”, is initially set to 30 and then updated to 31. This demonstrates that let allows variable values to be reassigned.

4. Loops


 
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(`Loading lesson ${i + 1} of Shiksha Online`);
}, 1000 * i);
}
Copy code

Output

Loading lesson 1 of Shiksha Online
Loading lesson 2 of Shiksha Online
Loading lesson 3 of Shiksha Online

This loop demonstrates the block scoping of let within loop iterations. Each loop iteration has its own i variable, used here to simulate the loading of different lessons in “Shiksha Online”.

5. Temporal Dead Zone


 
console.log(course);
let course = 'Shiksha Web Development';
Copy code

Attempting to log course before its declaration throws a ReferenceError due to the temporal dead zone. let declarations aren’t hoisted in the same way as var.

6. Redeclaration within the Same Scope


 
let categoryName = 'Shiksha Online - Programming';
let categoryName = 'Shiksha Online - Design';
Copy code

Redeclaring a let variable within the same scope is not allowed, so the second declaration of categoryName throws a SyntaxError. This prevents accidental redeclarations in the same block scope.

How to Link JavaScript to HTML
How to Link JavaScript to HTML
Have you ever wondered how to make your website engaging and responsive? Linking JavaScript to HTML is the key to achieving this. Let’s understand more! Learning how to Link JavaScript...read more
JavaScript var | Definition, Syntax, Characteristics and Examples
JavaScript var | Definition, Syntax, Characteristics and Examples
Have you heard of ‘var’ keyword in JavaScript? Well, in this blog we will understand everything about it starting from definition, syntax, characteristics and various examples! Let us see more...read more
Difference Between var and let in JavaScript
Difference Between var and let in JavaScript
Do you ever think that how both ‘var’ and ‘let’ in JavaScript are used for variable declaration, yet are very different from each other. Let’s explore their differences!Do you ever...read more

Conclusion

Thus, the let keyword in JavaScript introduced a significant improvement in how we declare variables, addressing various issues and limitations associated with the older var keyword.

Keep learning, keep exploring!

FAQs

What is let in JavaScript?

let is a keyword introduced in ES6 for declaring variables in JavaScript. Unlike variables declared with var, which are function-scoped, let allows for declaring block-scoped variables. This means a variable declared with let is limited to the block, statement, or expression where it is used.

How does let differ from var?

The main difference between let and var is the scope. Variables declared with let have block scope (confined to the block where they are declared), while var declares variables with function scope. Additionally, let does not allow hoisting as var does, and you cannot redeclare a variable within the same scope when using let.

Can you redeclare variables with let in the same scope?

No, you cannot redeclare a variable in the same scope with let. Attempting to do so will result in a syntax error. This is beneficial as it helps prevent common errors caused by redeclaring variables, which is possible with var.

What is variable hoisting, and how does let behave differently from var in this context?

Variable hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their containing scope during the compilation phase. While declarations using var are hoisted, let declarations are not fully hoisted. A let variable is in a "temporal dead zone" from the start of the block until the declaration is encountered, meaning it cannot be accessed until it has been declared.

What are some common use cases for let in JavaScript?

let is commonly used for variables that need to be re-assigned and whose scope is limited to a specific block, such as variables in loops or within a specific function or conditional block. The block-scoped nature of let makes it suitable for cases where control over the variable's lifecycle and visibility is important for the logic and readability of the code.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio