Understanding the Difference Between var, let, and const in JavaScript

In JavaScript, variables play a crucial role in storing and manipulating data. Traditionally var keyword was used to declare variables. However, with the introduction of ES6 (ECMAScript 2015) let and const were introduced, offering more controlled and predictable variable scoping. In this article, we will explore the differences between var, let, and const and when to use each one.

Introduction to var

The var keyword is the oldest way to declare variables in JavaScript. Variables declared with var have function scope or global scope (window object in browsers), depending on whether they are declared inside a function or outside any function

function XYZ() { 
  var name = “Joe” 
}; 
XYZ() 
console.log(name) // undefined

What is hoisting?
Hoisting is a mechanism in JavaScript where variable and function declarations are moved to the top of their respective scopes during the compilation phase, before the code is executed. This means that regardless of where variables and functions are declared in the code, they are effectively “hoisted” or brought to the top of their containing scope.

hoisting initializes variables declared only with the var keyword. During the hoisting process, variables declared with var are hoisted to the top of their scope and automatically initialized with the value undefined. This means that even though the actual assignment of a value may occur later in the code, the variable is accessible and has the value undefined from the beginning of its scope.

foo() // "Hello!"
function foo() {
  console.log("Hello!");
}


x = 10;
console.log(x); // 10
var x;

Introduction to let and const

Block Scope and Temporal Dead Zone are two important concepts related to the behaviour of variables declared with let and const in JavaScript. Let's explore each of these concepts:

Block scope refers to the scope of variables that are limited to the block in which they are defined. In JavaScript, a block is typically denoted by a set of curly braces {} and can include code within functions, loops, conditional statements, or any code block enclosed by curly braces.

function example() {
  if (true) {
    let x = 10; // block-scoped variable
    const y = 20; // block-scoped constant

    console.log(x); // 10
    console.log(y); // 20
  }

  console.log(x); // ReferenceError: x is not defined
  console.log(y); // ReferenceError: y is not defined
}

In the above code, the variables x and y are declared with let and const inside the if block. They are accessible within that block but not outside of it. Trying to access them outside the block results in a ReferenceError because they are out of scope.

Temporal Dead Zone (TDZ) is a behaviour specific to variables declared with let and const that prevents them from being accessed or assigned a value until they are declared.

Before a variable declared with let or const is actually declared in the code, it enters the Temporal Dead Zone (TDZ). During this period, any attempt to access or assign a value to the variable will result in a ReferenceError. The TDZ ends when the variable declaration is reached.

function example() {
  console.log(x); // ReferenceError: Cannot access 'x' before initialization
  let x = 10;
}

Why const is special?

We actually know difference between var and let, const but what is difference between const and let?

Assignment and Re-assignment:

• const: Constants declared with the const keyword cannot be changed once they have been assigned a value. When declaring a constant, you must provide an initial value, and any attempt to reassign a different value will result in an error.
• let: Variables declared with the let keyword can be changed and reassigned multiple times within their scope. You have the option to initialize a let variable with an initial value or leave it uninitialized.

Why to Avoid Using var

1. Redeclaration and Overwriting: The use of var introduces the possibility of variable redeclaration within the same scope. This means that you can declare the same variable multiple times without any errors. However, subsequent declarations of the same variable name override the previous ones. This behaviour can lead to confusion and unexpected results, especially in larger codebases where variable names might collide unintentionally. It is generally considered a best practice to avoid variable redeclaration to ensure code clarity and prevent potential bugs.
2. Global Scope Pollution: When a variable is declared with var outside of any function or block, it becomes a property of the global object (e.g., window in the browser environment). This can cause global scope pollution, where variables declared with var can clash with other variables or libraries that are also using the global scope. This can introduce naming conflicts and make it difficult to isolate and encapsulate functionality. By using let and const, which have block scope, variables can be kept within their intended scopes, reducing the risk of global scope pollution.

Summary:

In this article, we explored the differences between var, let, and const in JavaScript. We learned that var has function scope or global scope, while let and const have block scope. We also discussed the concept of hoisting, which affects var variables. Additionally, we examined the Temporal Dead Zone (TDZ), a behaviour specific to let and const variables that prevents their access before they are declared.