Synchronous vs asynchronous code

JavaScriptJunior~3 min read

Synchronous code runs strictly in order: the next operation does not start until the previous one has finished. Asynchronous code lets the program keep going without waiting for long operations such as network requests or timers.

Theory

TL;DR

Synchronous means "in order and blocking": every line waits for the previous one.
Asynchronous means "non blocking": a long operation is handed to an external API and the code moves on.
JavaScript has a single thread, but thanks to the event loop it works asynchronously.
The finished result goes into a task queue and runs once the call stack is free.
Asynchrony is implemented with callbacks, Promises, async/await and event listeners.

Quick example

javascript

console.log('1');

setTimeout(() => {
  console.log('2'); // runs later
}, 1000);

console.log('3');

Output:

javascript

1
3
2

Why:

setTimeout is an asynchronous operation, it is scheduled for the future.
JavaScript does not wait for it to finish, it moves on.
When the timer fires, the function goes into the event queue and runs later, as soon as the call stack is free.

Synchronous execution

javascript

console.log('1');
console.log('2');
console.log('3');

Output:

javascript

1
2
3

Everything runs line by line: the next statement does not start until the previous one is done. That is synchronous execution. Schematically:

javascript

[ Task 1 ] -> [ Task 2 ] -> [ Task 3 ]

While one operation runs, the others wait.

How it works under the hood

JavaScript has a single thread of execution, but thanks to the event loop it can work asynchronously and without blocking.

Long operations (for example fetch, setTimeout, I/O) are handed to the external APIs of the environment (the browser or Node.js).
JavaScript keeps executing the rest of the code.
When the operation completes, the result is returned to the callback queue and runs later.

Schematically:

javascript

[ Task 1 (asynchronous) ] -> [ Task 2 ]
        |
   (the result comes back later)

Real world examples

Situation	Synchronous code	Asynchronous code
Reading a file	JavaScript waits until the file is fully read	JavaScript hands the job to the API and keeps working
Server request	The code "freezes" until the response arrives	The code moves on, the response is handled later
A loop with a million iterations	"Freezes" the interface	Runs in the background (via a Web Worker or asynchronously)

How asynchrony is implemented

Mechanism	Example
Callbacks	`setTimeout(() => {...}, 1000)`
Promises	`fetch('/data').then(...)`
async / await	`const data = await fetch('/data')`
Event listeners	`button.addEventListener('click', ...)`

A real asynchronous example with fetch:

javascript

console.log('Start');

fetch('https://api.example.com/user')
  .then(res => res.json())
  .then(data => console.log('Response received:', data));

console.log('End');

Output:

javascript

Start
End
Response received: {...}

While the server is responding JavaScript does not wait, it moves on and comes back to the callback when the data is ready.

Summary

Difference	Synchronous code	Asynchronous code
Execution	Sequential, blocking	Event driven, non blocking
Delays	Block the program	Do not get in the way
Used for	Simple and short operations	Requests, timers, files, APIs
Example	`console.log()`	`setTimeout()`, `fetch()`
Mechanism	Call stack	Event loop and task queues

Common mistakes

Believing asynchronous code runs "in parallel" on a separate thread. JavaScript has one thread; parallelism comes from the environment, not from the engine.
Expecting setTimeout(fn, 0) to run fn immediately: the callback still waits for the call stack to clear.
Assigning the result of .then() to an outer variable and reading it on the next line: it is still undefined there.
Putting a heavy synchronous loop next to asynchronous code: it blocks the event loop, so timers and network responses stall.
Confusing await with blocking the whole program: await suspends only the current async function, not the thread.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.