var, let, Single & Multi-thread and Process in JavaScript

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.

Feature var let Scope Function Scoped Block Scoped Hoisting Hoisted and initialized as undefined Hoisted but stays in Temporal Dead Zone (TDZ) Access before declaration Returns undefined Throws ReferenceError Re-declaration Allowed Not Allowed in same scope Loop behavior Can cause unexpected bugs Safer and predictable Modern Usage Rarely used Recommended

✅ Example 1: Scope

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

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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)

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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");

Enter fullscreen mode Exit fullscreen mode

Output:

Task 1
Task 2
Task 3

Enter fullscreen mode Exit fullscreen mode

Execution happens one after another.

Real-Life Example

Imagine a shop with only one cashier.

Customer 1
    ↓
Customer 2
    ↓
Customer 3

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Customers are served simultaneously.

That is Multi Threading.

Single Thread vs Multi Thread

Feature Single Thread Multi Thread Number of Threads One Multiple Tasks One at a time Multiple at once Complexity Simple More complex Speed Slower for multiple tasks Faster for parallel tasks Memory Usage Lower Higher Synchronization Issues No Possible Example JavaScript Main Thread Java, C#, C++

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");

Enter fullscreen mode Exit fullscreen mode

Output:

A
B

Enter fullscreen mode Exit fullscreen mode

“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");

Enter fullscreen mode Exit fullscreen mode

Output:

World
Hello

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

When JavaScript encounters:

setTimeout(...)

Enter fullscreen mode Exit fullscreen mode

it hands the timer work to the browser.

The browser waits 2 seconds and later tells JavaScript:

"Timer completed. Execute this callback."

Enter fullscreen mode Exit fullscreen mode

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

JavaScript is:

Single-Threaded
+
Non-Blocking
+
Event Driven

Enter fullscreen mode Exit fullscreen mode

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/