The Difference Between var, let, & const in JavaScript

JavaScript provides three main ways to declare variables: var, let, and const.

While all three are used to store data, they behave differently in terms of scope, hoisting, and reassignment. Understanding these differences is important because choosing the wrong one can introduce subtle bugs into your code.

In this article, we’ll look at how each keyword works, see practical examples, and discuss when to use each one.

---

var

The var keyword was the original way to declare variables in JavaScript. However, over time, its limitations became more obvious, which led to the introduction of let and const.

Characteristics of var

1. Function scope (or global scope)

   Variables declared with var are:

   • globally scoped if declared outside a function

   • function scoped if declared inside a function

    var greet = "hi"; // globally scoped

    function varFunction() {
      var name = "Ezinne"; // function scoped
      console.log(name);  // logs "Ezinne"
    }
    varFunction();

    console.log(name);   // ReferenceError: name is not defined
    console.log(greet);  // logs "hi"

2. Hoisting behavior

   Variables declared with var are hoisted to the top of their scope and initialized with undefined.

    console.log(greet);
    var greet = "hi";
   

   JavaScript interprets this as:

    var greet;
    console.log(greet); // undefined
    greet = "hi";
   

3. Redeclaration and reassignment

   Variables declared with var can be re-declared and updated within the same scope.

    var greet = "hi";
    var greet = "hello";
   

   or:

var greet = "hi";
greet = "hello";

Why var can be problematic

var does not respect block scope, which can lead to unexpected behavior:

function varFunction() {
  var greet = "hi";
  if (true) {
    var greet = "hello";
    console.log(greet); // "hello"
  }
  console.log(greet); // "hello"
}
varFunction();

The variable greet was overwritten inside the if block, which can easily cause bugs in larger applications.

---

let

The let keyword was introduced in ES2015 (ES6) as an improvement over var.

Characteristics of let

1. Block scope

   Variables declared with let are block scoped, meaning they are only accessible within the block they are defined in.

let a = 8;
console.log(a); // 8

function letFunction() {
  if (true) {
    let b = 3;
    console.log(b); // 3
  }
  console.log(b); // ReferenceError: b is not defined
}
letFunction();

2. Reassignment allowed, redeclaration not allowed

   Variables declared with let can be updated, but cannot be re-declared within the same scope.

    let a = 8;
    a = 10; // valid
   
    let a = 8;
    let a = 10; // SyntaxError
   

   However, declaring the same variable name in different scopes is allowed:

let a = 8;
if (true) {
  let a = 3;
  console.log(a); // 3
}
console.log(a); // 8

3. Hoisting behavior

   Like var, let declarations are hoisted, but they are not initialized. Accessing them before declaration results in a ReferenceError.

    console.log(a); // ReferenceError
    let a = 8;
   

   This behavior is known as the temporal dead zone.

---

const

The const keyword stands for constant and was also introduced in ES2015.

Characteristics of const

1. No reassignment or redeclaration

   Variables declared with const cannot be updated or re-declared.

const name = "Ezinne";
const name = "Cynthia"; // SyntaxError

const name = "Ezinne";
name = "Cynthia"; // TypeError

2. Block scope

   Like let, const is also block scoped.

const x = 12;
console.log(x); // 12

function constFunction() {
  if (true) {
    const x = 20;
    console.log(x); // 20
  }
}
constFunction();

3. Hoisting behavior

   const declarations are hoisted but not initialized, just like let.

console.log(x); // ReferenceError
const x = 12;

---

Important note about const

While const prevents reassignment, it does not make objects immutable. You can still modify the contents of objects or arrays declared with const.

---

Summary

• var is function or globally scoped, while let and const are block scoped.

• var can be updated and re-declared.

• let can be updated but not re-declared.

• const can neither be updated nor re-declared.

• All three are hoisted, but only var is initialized with undefined.

---

When to Use Each Keyword

• Avoid var unless you are working with legacy code.

• Use let when the variable’s value needs to change.

• Use const by default, especially when the variable should not be reassigned.

---

Final Thoughts

Understanding the differences between var, let, and const helps you write safer and more predictable JavaScript code. In modern JavaScript, const and let should be your go-to choices in most cases.

Thank you so much for reading! ❤️