Is javascript single-threaded or multi-threaded

Expert Posts
,
1

JavaScript is a single-threaded programming language. It means that it can only execute one piece of code at a time, sequentially, in a single thread of execution. This single thread is called the “main thread” or the “UI thread” in the context of web browsers.

However, JavaScript can also leverage asynchronous programming techniques to handle concurrent operations without blocking the main thread. This is achieved through mechanisms like callbacks, promises, and async/await. Asynchronous operations allow JavaScript to offload time-consuming tasks to other threads or processes, such as making network requests or performing heavy computations, while the main thread remains responsive to user interactions.

Here’s an example of using JavaScript to demonstrate asynchronous behavior in an HTML format:

<!DOCTYPE html>
<html>
<head>
<title>Asynchronous JavaScript Example</title>
</head>
<body>
<h1>Asynchronous JavaScript Example</h1>
<button id="btn">Click Me!</button>
<p id="result"></p>
<script>
function simulateAsyncOperation() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Async operation completed!');
}, 2000);
});
}
document.getElementById('btn').addEventListener('click', async () => {
document.getElementById('result').textContent = 'Loading...';
try {
const result = await simulateAsyncOperation();
document.getElementById('result').textContent = result;
} catch (error) {
document.getElementById('result').textContent = 'Error occurred!';
}
});
</script>
</body>
</html>

In this example, when the button is clicked, an asynchronous operation is simulated using a setTimeout function wrapped in a Promise. The await keyword is used to pause the execution of the code until the promise is resolved or rejected. This allows the main thread to remain responsive while waiting for the asynchronous operation to complete.