Difference between synchoronus js and asynchoronus js

Synchronous JavaScript

Synchronous = code runs line by line, one after another.

console.log("Start");
console.log("Middle");
console.log("End");

Output:

Start
Middle
End
Asynchronous JavaScript
Asynchronous = some tasks run in background, JavaScript does not wait.

console.log("Start");
setTimeout(() => {
  console.log("Middle");
}, 2000);

console.log("End");
Output:
Start
End
Middle
Why async is needed?
Some operations take time:
API calls (fetch())
Database queries
File reading
Timers (setTimeout)
Network requests