JavaScript Execution:

Synchronous and
Asynchronous

JavaScript execution can be either synchronous or asynchronous. Synchronous

code runs in a linear, step-by-step fashion, while asynchronous code allows the
program to continue executing other tasks while waiting for a response.
 Synchronous Execution: Understanding
the Call Stack
Call Stack
• Every Browser has JS enginee ,inside the enginee
there will a call stack
• When a function is called, it is added to the
call stack and executed.
Gobal Execution Context
• Whenever the call stack runs a code before it will
create GEC to execute a piece of code
• It is created automatically when there is a code to
execute
Characteristics of Synchronous
Operations
1 Blocking
The execution of the next line of code is blocked until the current line completes.

2 Predictable
The order of execution is predictable and easy to follow.

3 Sequential
Each operation waits for the previous one to finish.
 Asynchronous Operations
1 CallStack 2 Call Back Queue 3 Event Loop

CallStack will not wait if
there is any delay in the
code.
The callback queue is a data structure that
holds callback functions waiting to be
executed. These callbacks are added to the
queue when an asynchronous operation
completes.
Event loop takes the next
callback from the callback
queue and pushes it onto
the call stack for execution.
Characteristics of Asynchronous Operations

Non-blocking: Concurrency: Event-Driven:

Tasks can continue to run in Multiple operations can be Code execution is often
the background, allowing initiated and executed in triggered by events or the
other code to execute parallel. completion of tasks. tasks
simultaneously. grows.
 Call Backs and Promises:
Call Backs:
Callbacks are functions passed
as arguments to other functions
and executed once the
asynchronous operation
completes.
Avoiding Callback Hell
Promises help to avoid the
"callback hell" problem by
providing a cleaner and more
readable syntax for
asynchronous code.
Promises
Promises can be chained
together to create complex
asynchronous flows, making the
code more maintainable and
easier to understand.
Async/Await: Syntactical Sugar for Promises

Syntactical Sugar Simplified Control Flow Improved Error Handling

Async/await is a syntactical sugar
on top of Promises, making
asynchronous code more readable
and easier to manage.
Async/await allows developers to
write asynchronous code that
looks and behaves more like
synchronous code.
Async/await makes it easier to
handle errors in asynchronous
code, with the ability to use try-
catch blocks.
Conclusion: Mastering
Synchronous and Asynchronous
JavaScript
By understanding the differences between synchronous and asynchronous
JavaScript, and the various tools available for handling asynchronous behavior
(callbacks, promises, and async/await), developers can write more efficient,
performant, and maintainable JavaScript code.