🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

1. Introduction

In JavaScript, var and let are two different ways to declare variables, which are like containers for storing data. The var keyword has been around since the beginning of JavaScript and declares a variable with function scope. This means the variable is available throughout the function where it's declared. The let keyword was introduced in ES6 (ECMAScript 2015) and declares a variable with block scope, which restricts its access to the block of code where it's used, much like variables in most other programming languages.

2. Key Points

1. Scope: var is function-scoped, and let is block-scoped.

2. Hoisting: Variables declared with var are hoisted and automatically initialized as undefined, while let variables are hoisted but not initialized.

3. Re-declaration: You can re-declare the same variable with var in the same scope, but doing so with let in the same block will throw an error.

4. Temporal Dead Zone: Accessing a let variable before its declaration will result in a ReferenceError, something that does not happen with var.

3. Differences

Feature	var	let
Scope	Function-scoped	Block-scoped
Hoisting	Hoisted and initialized as undefined	Hoisted but not initialized
Re-declaration	Allows re-declaration in the same scope	Does not allow re-declaration in the same block
Temporal Dead Zone	No Temporal Dead Zone	Accessing before declaration results in ReferenceError

4. Example

// Step 1: Declare a variable with 'var' and attempt to use it before its actual declaration.
function testVar() {
  console.log(oldSchool); // Due to hoisting, this will output 'undefined'.
  var oldSchool = 'Declared with var!';
  console.log(oldSchool); // This will output 'Declared with var!'.
}

// Step 2: Declare a variable with 'let' and attempt to use it before its actual declaration.
function testLet() {
  // Uncommenting the line below will throw a ReferenceError due to the Temporal Dead Zone.
  // console.log(newWave); // ReferenceError: Cannot access 'newWave' before initialization
  let newWave = 'Declared with let!';
  console.log(newWave); // This will output 'Declared with let!'.
}

testVar();
testLet();

Output:

undefined
Declared with var!
Declared with let!

Explanation:

1. var declarations are processed before any code is executed, so the variable exists as undefined initially.

2. let declarations are also hoisted, but accessing them before the declaration is encountered in the executing code results in a ReferenceError.

3. You can re-declare a var variable multiple times, which can be problematic as it may lead to confusion or unexpected behavior in your code.

4. let variables are contained within the block they are declared in, which makes them more predictable and avoids the issue of re-declaration within the same scope.

5. When to use?

- Use var if you're working with older code or need a variable to be available throughout a function regardless of block scope.

- Use let for more predictable behavior and to prevent errors associated with hoisting and re-declaration, especially if you are working on a modern codebase where block-scoped variables are the norm.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog

Difference between var and let in JavaScript

1. Introduction

2. Key Points

3. Differences

4. Example

Output:

Explanation:

5. When to use?

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

ChatGPT + Generative AI + Prompt Engineering for Beginners

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

Building Real-Time REST APIs with Spring Boot - Blog App

Building Microservices with Spring Boot and Spring Cloud

Java Full-Stack Developer Course with Spring Boot and React JS

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

Testing Spring Boot Application with JUnit and Mockito

Spring Boot Thymeleaf Real-Time Web Application - Blog App

Master Spring Data JPA with Hibernate

Spring Boot + Apache Kafka Course - The Practical Guide

Java Testing: Mastering JUnit 5 Framework

Reactive Programming in Java: Spring WebFlux and Testing

Spring Boot + RabbitMQ Course - The Practical Guide

Functional Programming in Java (Includes Java Collections)

ChatGPT for Java Developers: Boost Your Productivity with AI

Comments