JavaScript var, let, const

In JavaScript, the keywords ‘var’, ‘let’, and ‘const’ are used to declare variables, but each one works differently. Their behavior varies when it comes to scope (where the variable is accessible), hoisting (how declarations are processed before execution), and reassignment (whether the value can be changed later). Understanding these differences is important for writing clean and predictable code.

What is Scope in JavaScript?

Scope in JavaScript refers to the area in a program where a variable is accessible. In simple terms, scope determines where you can use a variable in your code.

Understanding scope is critical because it helps you avoid bugs, manage variables efficiently, and write cleaner code

JavaScript has three main types of scope:

1. Global Scope

Variables which are declared outside any function or block have global scope. They can be accessed from anywhere in the program.

Example:

let name = “John”;

function greet() {

  console.log(name); // Accessible here

}

greet();

Global scope variables are accessible everywhere but can cause conflicts if overused

2. Function Scope

Variables which are declared inside a function are only accessible within that function.

Example:

function greet() {

  let message = “Hello”;

  console.log(message);

}

greet();

console.log(message);  Error

message variable is declares inside greet function. It has only function scope and cannot be accessed outside the function.

3. Block Scope

Variables which are declared using let and const inside {} (blocks) are only accessible within that block.

Example:

if (true) {

  let age = 25;

  console.log(age); // Works

}

// console.log(age);   Error

Block scope is commonly used in loops and conditionals.

What is Hoisting in JavaScript?

Hoisting in JavaScript is a behavior where variable and function declarations are moved to the top of their scope during the compilation phase (before code execution).

This means you can use variables and functions before declaring them—but the behavior differs depending on how they are declared.

Difference between var, let and const

Here are examples demonstrating the use of var, let, and const in JavaScript:

var

The var keyword is function-scoped or globally scoped if declared outside a function. Variables declared with var can be re-declared and updated.

var name = “Alice”;
console.log(name); // Output: Alice

var name = “Bob”; // Re-declared
console.log(name); // Output: Bob

name = “Charlie”; // Updated
console.log(name); // Output: Charlie

let

The let keyword is block-scoped, meaning it is only accessible within the block it is declared in. Variables declared with let can be updated but not re-declared within the same scope.

let age = 25;
console.log(age); // Output: 25

age = 26; // Updated
console.log(age); // Output: 26

// Block scope
if (true) {
    let age = 30;
    console.log(age);// Output: 30 (inside block)
}

console.log(age); // Output: 26 (outside block)

const

The const keyword is also block-scoped. Variables declared with const cannot be updated or re-declared. However, if the variable is an object or array, the properties or elements can
be modified.

const pi = 3.14;
console.log(pi); // Output: 3.14

pi = 3.14159; // Error: Assignment to constant variable.

// Block scope
if (true) {
    const pi = 3.14159;
    console.log(pi);// Output: 3.14159 (inside block)
}

console.log(pi); // Output: 3.14 (outside block)

To summarize

• var: Function or globally scoped, can be re-declared and updated.
• let: Block-scoped, can be updated but not re-declared within the same scope.
• const: Block-scoped, cannot be updated or re-declared, but object properties and
  array elements can be modified.

Each keyword has its own specific use case depending on the scope and mutability requirements of the variable.