Difference Between let vs var vs const JavaScript

In this post, we will learn the difference between let and var, and const in JavaScript.This is a frequently asked question in JavaScript interviews for beginners. Let's dive into it.

JavaScript provides three different ways to declare variables: let, var, and const. Each of these has distinct behaviors and scoping rules. 

Difference Between let vs var vs const JavaScript

Below is a table that compares let, var, and const in JavaScript, followed by an example to demonstrate their differences.

Aspect	var	let	const
Scope	Function scope	Block scope	Block scope
Hoisting	Initialized with undefined	Not initialized	Not initialized
Re-declaration	Allowed within the same scope	Not allowed within the same block	Not allowed within the same block
Re-assignment	Allowed	Allowed	Not allowed
Usage	General Variables	Variables with block scope requirements	Constants or references that shouldn't change

Now, let's dive deeper into each of these declarations: 

let: 

• let was introduced in ECMAScript 6 (ES6) and provides block scope. 
• Variables declared with let are not hoisted, and accessing them before the declaration results in a ReferenceError. 
• let allows reassignment of the variable's value, making it useful for cases where the variable needs to change its value over time. It must be initialized when declared; otherwise, it will result in a SyntaxError.
• let introduces the concept of the Temporal Dead Zone (TDZ), which prevents variables from being accessed before the declaration within their block. 

var: 

• var is the oldest way to declare variables in JavaScript and has function scope. 
• Variables declared with var are hoisted to the top of their function scope, and they can be accessed before the declaration (resulting in undefined). 
• var allows reassignment of the variable's value, which can sometimes lead to unintended bugs and issues in larger codebases. 
• Unlike let and const, var does not require explicit initialization when declared. 

const: 

• const was introduced in ES6 and provides block scope, similar to let. 
• Variables declared with const cannot be reassigned after their declaration. However, it does not make the variable itself immutable; it just prevents reassignment. It must be initialized when declared; otherwise, it will result in a SyntaxError. 
• const is useful when you want to ensure that the variable remains constant throughout its lifecycle. 

Example 

Below is an example to illustrate the differences:

// Using var
function varExample() {
  if (true) {
    var x = 5; // x can be accessed outside this block
  }
  console.log(x); // Outputs 5
}

// Using let
function letExample() {
  if (true) {
    let y = 10; // y can't be accessed outside this block
  }
  console.log(y); // ReferenceError: y is not defined
}

// Using const
function constExample() {
  const z = 20; // z must be assigned at declaration
  z = 30; // TypeError: Assignment to constant variable
  console.log(z);
}

var has function scope, so x is accessible throughout the function.

let has a block scope, so y is only accessible within the block where it's defined.

const also has block scope, but it must be initialized when declared, and its value cannot be changed once assigned, as demonstrated with z.

Conclusion

In modern JavaScript development, it is generally recommended to use let and const over var. Use const when you want to ensure that the variable remains constant and use let when you expect the variable's value to change over time. Avoid using var in ES6 projects to prevent potential issues caused by hoisting and function scope. By understanding the differences between let, var, and const, developers can write more maintainable and bug-free JavaScript code.