DEV Community: HARSHITH GADDAM

My JavaScript Learning Journey:Understanding the JavaScript Event Loop and Concurrency Model

HARSHITH GADDAM — Tue, 21 Jul 2026 13:31:11 +0000

Today, I learned one of the most important concepts in JavaScript: the Event Loop and the Concurrency Model.

JavaScript is Single-Threaded

JavaScript is a single-threaded language. This means it can execute only one piece of JavaScript code at a time.

For example:

console.log("A");
console.log("B");
console.log("C");

Output:

A
B
C

JavaScript executes these statements one after another.

What is the Call Stack?

The Call Stack is where JavaScript executes functions. Whenever a function is called, it is added to the stack. After the function finishes executing, it is removed from the stack.

Example:

function one() {
two();
}

function two() {
console.log("Hello");
}

one();

Execution order:

one()
↓
two()
↓
console.log()
↓
Stack becomes empty

The Call Stack follows the Last In, First Out (LIFO) principle.

What are Web APIs and Node APIs?

Some operations take time, such as:

Waiting for a timer
Making an API request
Reading a file
Listening for button clicks

JavaScript itself cannot perform these operations.

Instead, it asks the runtime to handle them.

In Browsers

The browser provides Web APIs such as:

setTimeout()
setInterval()
fetch()
addEventListener()
DOM APIs
localStorage

In Node.js

Node.js provides Node APIs such as:

fs.readFile()
fs.writeFile()
path
os
http

These APIs perform asynchronous work outside the JavaScript engine.

Callback (Macrotask) Queue

When an asynchronous operation like setTimeout() finishes, its callback does not execute immediately.

Instead, it is placed into the Callback Queue, also called the Macrotask Queue.

Example:

setTimeout(() => {
console.log("Timer");
}, 1000);

After one second Call back function added to Callback Queue.
It waits there until the Event Loop moves it to the Call Stack.

Microtask Queue

The Microtask Queue has a higher priority than the Callback Queue.

The following callbacks are added to the Microtask Queue:

Promise.then()
Promise.catch()
Promise.finally()
await
queueMicrotask()

Example:

Promise.resolve().then(() => {
console.log("Promise");
});

The callback is placed in the Microtask Queue.

Event Loop

The Event Loop is responsible for checking whether the Call Stack is empty.

When the Call Stack becomes empty, it:

Executes all Microtasks
Executes one Callback (Macrotask)
Again checks call stack is empty or not and does 1&2.

It does not execute code itself. It simply moves callbacks from the queues to the Call Stack.

Why do Promises execute before setTimeout()?

Consider this example:

console.log("Start");

setTimeout(() => {
console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
console.log("Promise");
});

console.log("End");

Output:
Start
End
Promise
Timeout

Why?

Promise.then() goes to the Microtask Queue.
setTimeout() goes to the Callback (Macrotask) Queue.
The Event Loop always executes all Microtasks first before executing Macrotasks.

Does setTimeout() execute exactly on time?

A common misunderstanding is that:

setTimeout(callback, 1000);

means the callback will execute exactly after one second.

This is not true.

It means:

Execute the callback after at least one second.

If the Call Stack is busy with synchronous code, the callback has to wait.

Example:

setTimeout(() => {
console.log("Done");
}, 1000);

// Imagine this loop takes 3 seconds
for (let i = 0; i < 1e10; i++) {}

console.log("Finished");

Output:
Finished
Done

Even though the timer finished after one second, the callback waited until the Call Stack became empty.

What is the JavaScript Concurrency Model?

JavaScript can execute only one line of code at a time, but it can still handle many asynchronous operations.

For example:

A timer can be counting.
A network request can be downloading.
The browser can listen for button clicks.

All these operations are handled by the browser or Node.js while JavaScript continues executing other code.

When these operations finish, their callbacks are added to the appropriate queue.

This ability to make multiple operations progress during the same period of time is called the Concurrency Model.

Cooperative Concurrency vs True Parallelism

These two terms are often confused.

Cooperative Concurrency

Only one JavaScript task runs at a time.

Tasks take turns executing.

Example:

One chef starts cooking rice, then makes tea while the rice cooks.

The chef is not doing both tasks at the exact same moment, but both tasks are progressing.

JavaScript works like this.

True Parallelism

Multiple tasks execute at the exact same time using different CPU cores or threads.

Example:

Chef 1 cooks rice.
Chef 2 makes tea.
Chef 3 cuts vegetables.

All three are working simultaneously.

Conclusion

Learning the Event Loop and the Concurrency Model helped me understand how JavaScript performs asynchronous operations without blocking the main thread. These concepts explain why Promise callbacks execute before setTimeout(), why timers are not always exact, and how browsers and Node.js work together with JavaScript to build responsive applications.

Understanding these fundamentals is essential for writing efficient JavaScript code.
Thank you for reading! If you're also learning JavaScript, I hope this summary helps you understand these concepts more clearly. Happy coding!

My JavaScript Learning Journey: Understanding How JavaScript Really Works

HARSHITH GADDAM — Tue, 21 Jul 2026 11:32:29 +0000

During this learning session, I focused on JavaScript's internal working, including Execution Context, Variables, Scope, Closures, Hoisting, this binding, Call Stack, and Clean Code Principles like DRY and KISS.

JavaScript Execution Context

The first topic I learned was Execution Context.

An Execution Context is the environment in which JavaScript executes code. Whenever JavaScript runs a script or calls a function, it creates an execution context.

Each execution context has two phases:

i)Memory Creation Phase
Before executing the code, JavaScript scans it and allocates memory.

During this phase:

var variables are initialized with undefined.
let and const are allocated memory but remain uninitialized (Temporal Dead Zone).
Function declarations are stored completely in memory.

Example:

console.log(a);
var a = 10;
Output:
undefined

Because var is initialized with undefined during the memory phase.

ii)Code Execution Phase

After memory allocation, JavaScript starts executing the code line by line.

Example:
var a = 10;
console.log(a);
Output:
10

Variables in JavaScript

I learned the differences between var, let, and const.

a)var
-Function scoped
-Can be redeclared
-Can be reassigned
-Hoisted with undefined

b)let
Block scoped
Cannot be redeclared in the same scope
Can be reassigned
Exists in the Temporal Dead Zone before initialization

c)const
Block scoped
Cannot be redeclared
Cannot be reassigned
Must be initialized during declaration

Lexical Scope

One important concept I learned is Lexical Scope.

Lexical Scope means a function can access variables from the scope where it was created.

Example:

let name = "Harshith";

function greet() {
console.log(name);
}

greet();

The function accesses name because it was created inside the same scope.

Closures

A Closure is created when a function remembers variables from its outer scope even after the outer function has finished executing.

Example:

function counter() {

let count = 0;

return function () {
    count++;
    console.log(count);
};

}

const increment = counter();

increment();
increment();
increment();

Output:
1
2
3

The variable count remains available because of the closure.

Closures are commonly used to create private variables and implement the module pattern.

Hoisting

Hoisting is JavaScript's behavior of moving declarations to the top of their scope before execution.

Example:

console.log(a);
var a = 10;

Output:
undefined

For let and const:

console.log(a);
let a = 10;

Output:
ReferenceError

because the variable is inside the Temporal Dead Zone until it is initialized.

Understanding this Binding

One of the most interesting topics I learned was how JavaScript decides the value of this.

a)Default Binding
function greet() {
console.log(this);
}

greet();

In non-strict mode, this refers to the global object.

b)Implicit Binding
const person = {
name: "Harshith",

greet() {
    console.log(this.name);
}

};

person.greet();

Here, this refers to person.

c)Explicit Binding

JavaScript allows us to manually set this using call(), apply(), and bind().

function greet(city) {
console.log(this.name, city);
}

const person = {
name: "Harshith"
};

greet.call(person, "Hyderabad");

d)new Binding

When a function is called using the new keyword, JavaScript creates a new object and binds this to it.

function Person(name) {
this.name = name;
}

const p = new Person("Harsh");

Writing Better Code with DRY and KISS

Besides JavaScript internals, I also learned two important software engineering principles.

a)DRY (Don't Repeat Yourself)

Instead of repeating the same logic multiple times, create reusable functions.

This makes code easier to maintain.

b)KISS (Keep It Simple, Stupid)

Write simple, readable code instead of overly complex solutions.

Simple code is easier to understand, debug, and maintain.

Thank you for reading! If you're also learning JavaScript, I hope this summary helps you understand these core concepts more clearly. Happy coding!