Synchronous VS asynchronous code

JavaScriptJunior~2 min read

Short answer

Code type	What it does
Synchronous	Executes operations strictly in order, one after another. The next line does not start until the previous one finishes.
Asynchronous	Lets a program keep running without waiting for long operations (network requests, timers, and so on) to complete.

Example of synchronous code

javascript

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

Output:

javascript

1
2
3

Everything runs line by line, the next command does not start until the previous one finishes. This is synchronous execution.

Example of asynchronous code

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, once the call stack is free.

How it works under the hood

JS has a single thread, but thanks to the Event Loop it can work asynchronously and without blocking.

Synchronously:

Everything runs in sequence.
While one operation runs, others wait.

Asynchronously:

Long operations (for example, fetch, setTimeout, I/O) are handed off to external APIs.
JS keeps executing the rest of the code.
When the operation finishes, the result is returned to the callback queue, and runs later.

Visually

Synchronous:

javascript

[ Task 1 ] → [ Task 2 ] → [ Task 3 ]

Asynchronous:

javascript

[ Task 1 (asynchronous) ] → [ Task 2 ]
        ↓
   (the result will come back later)

Real-world examples

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

Asynchrony in JavaScript is implemented through:

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

Example with fetch (real asynchrony)

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 returns to the callback when the data is ready.

SUMMARY

Difference	Synchronous code	Asynchronous code
Execution	Sequential, blocking	Parallel (via events), non-blocking
Delays	Block the program	Do not hinder execution
Used for	Simple, short operations	Requests, timers, files, APIs
Example	`console.log()`	`setTimeout()`, `fetch()`
Mechanism	Call stack	Event Loop and task queues

Short Answer

Interview ready

Premium

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