var vs let vs const in JavaScript

Table of Contents

• var vs let vs const in JavaScript with Example
  • Table of Contents
    • Main Differences:
    • Understanding Key differences between var, let, and const Using Table

---

Understanding the fundamental concepts of scope, hoisting, and variable reassignment in JavaScript is crucial in order to grasp the differences between var, let, and const declarations. If you're not familiar with these concepts.

Note- I recommend clicking here to learn more about scope, hoisting, and variable reassignment and gain a better understanding.

Main Differences:

• var: It has function scope or global scope, is hoisted, allows reassignment, and is not block-scoped.
• let: It has block scope, is not hoisted, allows reassignment, and is block-scoped.
• const: It has block scope, is not hoisted, does not allow reassignment after initialization, and is block-scoped.

Understanding Key differences between var, let, and const Using Table

	Scope	Hoisting	Reassignment	Block-Scoped
var	Function-scoped (or Global-scoped)	Hoisted	Allowed	No
let	Block-scoped	Not hoisted	Allowed	Yes
const	Block-scoped	Not hoisted	Not allowed	Yes

Now let's provide examples to illustrate these differences:

1. Scope:
   • var example:

function example() {
  if (true) {
    var x = 10;
  }
  console.log(x); // Output: 10
}
example();

The variable x declared with var inside the if block is accessible outside the block due to function scope.

• let example:

function example() {
  if (true) {
    let x = 10;
  }
  console.log(x); // Output: ReferenceError: x is not defined
}
example();

The variable x declared with let inside the if block is not accessible outside the block due to block scope.

• const example:

function example() {
  if (true) {
    const x = 10;
  }
  console.log(x); // Output: ReferenceError: x is not defined
}
example();

Similar to let, the variable x declared with const inside the if block is not accessible outside the block due to block scope.

2. Hoisting:

   • var example:

   console.log(x); // Output: undefined
   var x = 10;
   console.log(x); // Output: 10

   Variables declared with var are hoisted to the top of their scope, which means they can be accessed before their declaration, but their initial value is undefined.

   • let example:

   console.log(x); // Output: ReferenceError: x is not defined
   let x = 10;
   console.log(x); // Output: 10

   Variables declared with let are not hoisted, and attempting to access them before their declaration results in a ReferenceError.

   • const example:

   console.log(x); // Output: ReferenceError: x is not defined
   const x = 10;
   console.log(x); // Output: 10

   Similar to let, variables declared with const are also not hoisted, and attempting to access them before their declaration results in a ReferenceError.

3. Reassignment:

   • var example:

   var x = 10;
   x = 20;
   console.log(x); // Output: 20

   Variables declared with var can be reassigned to new values.

   • let example:

   let x = 10;
   x = 20;
   console.log(x); // Output: 20

   Variables declared with let can also be reassigned to new values.

   • const example:

   const x = 10;
   x = 20; // Error: Assignment to constant variable.

I encourage you to take another look at the table provided here and familiarize yourself with the key differences between var, let, and const declarations. Understanding these distinctions will help you effectively utilize and differentiate between these variable declaration keywords in JavaScript.