Javascript Var Let And Const Keywords Complete Guide

Understanding var, let, and const

1. Scope

• var: Function-scoped or globally-scoped.
• let and const: Block-scoped ({}).

2. Hoisting

• Hoisting: JavaScript engine moves declarations to the top. However, only var gets initialized with undefined during hoisting. let and const are in a "temporal dead zone" from the start of the block until the declaration is processed.

3. Reassignment

• var and let: You can reassign a value to a variable.
• const: You cannot reassign a value once it's been set. However, for objects or arrays, you can modify the contents.

4. Redeclaration

• var: You can redeclare a variable within the same scope.
• let and const: You cannot redeclare a variable within the same scope.

Step-by-Step Examples

Example 1: Scope

Using var:

function scopeExample() {
    if (true) {
        var message = "Hello, var!";
    }
    console.log(message); // Output: "Hello, var!"
}

scopeExample();

In this example, var is function-scoped. The message variable is accessible outside the if block because it's within the same function.

Using let and const:

function scopeExample() {
    if (true) {
        let messageLet = "Hello, let!";
        const messageConst = "Hello, const!";
    }
    // console.log(messageLet); // Error: messageLet is not defined
    // console.log(messageConst); // Error: messageConst is not defined
}

scopeExample();

Here, let and const are block-scoped, so messageLet and messageConst are not accessible outside the if block.

Example 2: Hoisting

Using var:

console.log(hoistedVar); // Output: undefined
var hoistedVar = "I am hoisted!";
console.log(hoistedVar); // Output: "I am hoisted!"

When using var, the declaration is hoisted to the top, initializing with undefined.

Using let and const:

// console.log(hoistedLet); // Error: Cannot access 'hoistedLet' before initialization
// console.log(hoistedConst); // Error: Cannot access 'hoistedConst' before initialization

let hoistedLet = "I am let hoisted!";
const hoistedConst = "I am const hoisted!";

console.log(hoistedLet); // Output: "I am let hoisted!"
console.log(hoistedConst); // Output: "I am const hoisted!"

With let and const, trying to access the variable before its declaration results in a reference error because they are in a temporal dead zone.

Example 3: Reassignment

Using var:

var reassignVar = "First";
reassignVar = "Reassigned";
console.log(reassignVar); // Output: "Reassigned"

You can reassign a value to a var variable.

Using let:

let reassignLet = "First";
reassignLet = "Reassigned";
console.log(reassignLet); // Output: "Reassigned"

You can also reassign a value to a let variable.

Using const:

const reassignConst = "First";
// reassignConst = "Reassigned"; // Error: Assignment to constant variable.
console.log(reassignConst); // Output: "First"

You cannot reassign a value to a const variable. Trying to do so results in a TypeError.

Example 4: Redeclaration

Using var:

var redeclareVar = "First";
var redeclareVar = "Redeclared";
console.log(redeclareVar); // Output: "Redeclared"

You can redeclare a variable using var in the same scope.

Using let and const:

let redeclareLet = "First";
// let redeclareLet = "Redeclared"; // Error: Identifier 'redeclareLet' has already been declared

const redeclareConst = "First";
// const redeclareConst = "Redeclared"; // Error: Identifier 'redeclareConst' has already been declared
console.log(redeclareLet); // Output: "First"
console.log(redeclareConst); // Output: "First"

You cannot redeclare a variable using let or const within the same scope.

Example 5: Modifying const for Objects and Arrays

Using const with Objects:

const person = { name: "Alice", age: 25 };
person.name = "Bob"; // Modifying property is allowed
console.log(person); // Output: { name: "Bob", age: 25 }

// Object reassignment is not allowed
// person = { name: "Eve" }; // TypeError: Assignment to constant variable.

You cannot reassign the person variable itself, but you can modify its properties.

Using const with Arrays:

const colors = ["red", "green"];
colors.push("blue"); // Modifying the array is allowed
console.log(colors); // Output: ["red", "green", "blue"]

// Array reassignment is not allowed
// colors = ["yellow"]; // TypeError: Assignment to constant variable.

You can add or modify elements in a const array, but you cannot reassign the array itself.

Summary

• var:

  • Function-scoped or globally-scoped.
  • Can be redeclared and reassigned.
  • Hoisted with initialization to undefined.

• let:

  • Block-scoped.
  • Can be reassigned.
  • Cannot be redeclared.
  • Hoisted but not initialized.

• const:

  • Block-scoped.
  • Cannot be reassigned (except for properties of objects and elements of arrays).
  • Cannot be redeclared.
  • Hoisted but not initialized.