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
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?
- Function-scoped variables can lead to accidental bugs.
- Hoisting behavior can be confusing.
- Variables can be re-declared unintentionally.
- Loop-related issues occur more frequently with
var. -
letandconstprovide 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
| 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");
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/
Top comments (1)
well explained bro, thank you 😊