Sync VS Async in Js

Synchronization in JavaScript?

JavaScript is synchronous by default: every line of code is executed one after the other, and each task must wait for the previous one to be completed before moving to the next.

Let’s look at this illustration below to see how synchronous JavaScript code runs:

console.log('One');
console.log('Two');
console.log('Three');
// LOGS: 'One', 'Two', 'Three'

In the above example, the first line of code, One, will be logged first, followed by the second line, Two, and the third line, Three. It’s easy to see that the code works sequentially; each line of code waits for the former to be completed before it executes.

Synchronous programming can be used when the aim is for simplicity rather than efficiency.

(A)Synchronization in JavaScript?

1. Asynchronous JavaScript programming is one of the key components of the language because it controls how we carry out tasks that require a lot of time

2. Asynchronous programming is programming that allows multiple events to occur simultaneously. This means that one operation may take place while another is still being processed.

3. It allows operations to take place in a non-sequential manner. Many web API features now require asynchronous code this is true for those that access or fetch data from external sources.

An example includes:

• retrieving files from databases
• accessing a video stream from a webcam

Because async is multi-threaded, it makes code non-blocking and allows tasks to complete quickly so that the other functions can continue to operate as the request is being processed. In a nutshell, asynchronous code starts now and finishes later.

For Example

console.log('One');
setTimeout(() => console.log('Two'), 100);
console.log('Three');

// LOGS: 'One', 'Three', 'Two'

The setTimeout is what makes our code asynchronous.

What the code does first in the example above is to log One. Then, instead of executing the setTimeout function, it logs Three before it runs the setTimeout function. Browsers run JavaScript, and there are web APIs that handle it for users.

JavaScript passes the setTimeout function in these web APIs, and then our code keeps running normally.

By running code asynchronously, other code is not blocked from running (non-blocking). When the work is complete, a notification is sent to the main thread about whether the task was successful or failed.

Conclusion:

1)

• Async is multi-thread, which means operations or programs can run in parallel.
• Sync is a single-thread, so only one operation or program will run at a time.

2)

• Async is non-blocking, which means it will send multiple requests to a server.
• Sync is blocking — it will only send the server one request at a time and wait for that request to be answered by the server.

3)

• Async increases throughput because multiple operations can run at the same time.
• Sync is slower and more methodical.