Difference Between var and let in JavaScript

In the early days of JavaScript, there was only one way of declaring variables and that was using the var keyword. A variable declared with var is defined throughout the program. One of the issues with using the var keyword was redeclaring a variable inside a block will also redeclare the variable outside the block.

With the introduction of ES6 in 2015 two more keywords, let and const came into the picture. var and let are both used for variable declaration in javascript but the difference between them is that var is function scoped and let is block scoped. Variable declared by let cannot be redeclared and must be declared before use whereas variables declared with var keyword are hoisted.

✅ Example 1: Scope

if (true) {
    var a = 10;
    let b = 20;
}

console.log(a); // 10
console.log(b); // ReferenceError

var escapes the block, while let stays inside the block.

✅ Example 2: Hoisting

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

console.log(y);
let y = 20; // ReferenceError

var is initialized with undefined, whereas let remains in the Temporal Dead Zone until its declaration.

Why is var avoided in modern JavaScript?

1. Function-scoped variables can lead to accidental bugs.
2. Hoisting behavior can be confusing.
3. Variables can be re-declared unintentionally.
4. Loop-related issues occur more frequently with var.
5. let and const provide safer and more predictable behavior.

Modern Best Practice

const name = "Saravanan"; // Use by default

let count = 0;            // Use when value changes

// Avoid var

Understanding Single Thread, Multi Thread, Process, and Their Relationship

1. What is a Process?

A Process is simply a program that is currently running.

For example, when you open:

• Chrome
• VS Code
• Spotify

each of them becomes a separate process in memory.

Think of a process as a house.

The house contains:

• Memory
• Resources
• Files
• Execution environment

Each process has its own separate resources.

Example:

RAM
├── Chrome Process
├── VS Code Process
└── Spotify Process

2. What is a Thread?

A Thread is the smallest unit of execution inside a process.

Think of a thread as a worker inside the house.

Example:

Restaurant (Process)

├── Cook (Thread)
├── Cashier (Thread)
└── Waiter (Thread)

The restaurant owns the resources.

The workers perform the tasks.

A process must have at least one thread.

This first thread is called the Main Thread.

3. Relationship Between Process and Thread

A process can contain one or more threads.

Process
│
├── Thread 1
├── Thread 2
├── Thread 3
└── Thread 4

Key Point:

• Process owns resources and memory.
• Threads use those resources to perform work.

Think of:

• Process = House
• Thread = People living in the house

Without the house, people cannot live there.

Without threads, a process cannot perform work.

Single-Threading

A single-threaded application has only one thread performing tasks.

It can execute only one instruction at a time.

Example:

console.log("Task 1");
console.log("Task 2");
console.log("Task 3");

Output:

Task 1
Task 2
Task 3

Execution happens one after another.

Real-Life Example

Imagine a shop with only one cashier.

Customer 1
    ↓
Customer 2
    ↓
Customer 3

Each customer must wait for the previous customer to finish.

That is Single Threading.

Multi-Threading

A multi-threaded application can have multiple threads working simultaneously.

Example:

Process
│
├── Thread 1 → Download File
├── Thread 2 → Play Music
├── Thread 3 → Update Screen
└── Thread 4 → Calculate Data

Multiple tasks can run at the same time.

Real-Life Example

Imagine a supermarket with three cashiers.

Cashier 1 → Customer 1
Cashier 2 → Customer 2
Cashier 3 → Customer 3

Customers are served simultaneously.

That is Multi Threading.

Single Thread vs Multi Thread

Is JavaScript Single Threaded?

Yes.

JavaScript is primarily a Single-Threaded Language.

It has:

• One Call Stack
• One Main Thread

Example:

console.log("A");

for(let i = 0; i < 1000000000; i++) {
}

console.log("B");

Output:

A
B

"B" waits until the loop completes because JavaScript executes one statement at a time.

Then How Does JavaScript Perform Multiple Tasks?

This is where many beginners get confused.

Consider:

setTimeout(() => {
    console.log("Hello");
}, 2000);

console.log("World");

Output:

World
Hello

If JavaScript is single-threaded, how is this possible?

The answer is:

JavaScript itself is single-threaded, but the browser provides additional features.

Behind the Scenes

Browser Process
│
├── JavaScript Thread
├── Timer Thread
├── Rendering Thread
├── Network Thread
└── Other Threads

When JavaScript encounters:

setTimeout(...)

it hands the timer work to the browser.

The browser waits 2 seconds and later tells JavaScript:

"Timer completed. Execute this callback."

JavaScript then runs the callback when the Call Stack becomes empty.

JavaScript is:

Single-Threaded
+
Non-Blocking
+
Event Driven

It achieves asynchronous behavior using:

• Event Loop
• Callback Queue
• Web APIs
• Promises
• Async/Await

Reference:
https://www.geeksforgeeks.org/javascript/why-javascript-is-a-single-thread-language-that-can-be-non-blocking/
https://www.geeksforgeeks.org/operating-systems/difference-between-process-and-thread/
https://www.geeksforgeeks.org/javascript/difference-between-var-and-let-in-javascript/