JavaScript is a single-threaded language, meaning it executes one piece of code at a time. This design can lead to a problem where a long-running task can block the main thread, causing the entire application to become unresponsive, a phenomenon often referred to as "freezing" or "hanging". To overcome this limitation, JavaScript employs an asynchronous, non-blocking execution model managed by the Event Loop.

The execution model is divided into two primary types of tasks: synchronous and asynchronous.

• Synchronous Tasks: These are operations that are executed immediately on the main thread. Each task must complete before the next one begins, following a strict sequence.
• Asynchronous Tasks: These are operations that are offloaded to the host environment (like the browser or Node.js). The main thread does not wait for them to finish. Instead, a callback function is registered to be executed by the main thread once the asynchronous operation completes.

The interaction between these components is as follows:

1. The main thread executes synchronous tasks from the call stack.
2. Asynchronous tasks are delegated to the host environment for processing.
3. When an asynchronous task finishes, its corresponding callback is placed in the callback queue.
4. Once the call stack is empty, the Event Loop checks the callback queue.
5. If callbacks are present, they are moved to the call stack and executed.
6. This cycle repeats indefinitely.

This continuous cycle of checking and executing callbacks is the core of the Event Loop mechanism.

Consider the following Node.js example demonstrating the order of execution:

const fileSystem = require('fs');

console.log('Starting process...');

fileSystem.readFile('data.txt', 'utf8', (error, content) => {
    if (error) {
        return console.error('Failed to read file:', error.message);
    }
    console.log('File content loaded.');
    console.log('Content:', content);
});

setTimeout(() => {
    console.log('Timer callback executed.');
}, 0);

console.log('Process initialized.');

// Expected Output:
// Starting process...
// Process initialized.
// Timer callback executed.
// File content loaded.
// Content: (contents of data.txt)

In this example, the messages "Starting process..." and "Process initialized..." are synchronous and execute immediately. The file read and the timer are asynchronous. The timer, despite a 0ms delay, is placed in the callback queue after the synchronous tasks. The file read operation, being I/O, takes longer and its callback is also placed in the queue. The Event Loop then executes the timer callback first, followed by the file read callback, once the main thread is free.

The Event Loop further distinguishes between two types of tasks in the callback queue: macro-tasks and micro-tasks. Micro-tasks have a higher priority and are executed before the next macro-task.

• Macro-tasks: Include operations like setTimeout, setInterval, I/O operations, and UI rendering events.
• Micro-tasks: Include operations from Promise handlers (.then, .catch, .finally), async/await, and process.nextTick in Node.js.

After a macro-task completes, the Event Loop will first process all pending micro-tasks in the queue before moving on to the next macro-task.

This priority is illustrated in the next example:

setTimeout(() => {
    console.log('Macro-task: Timer callback');
}, 0);

new Promise((resolve) => {
    console.log('Synchronous: Promise executor');
    resolve();
}).then(() => {
    console.log('Micro-task: Promise .then callback');
});

console.log('Synchronous: Final log');

// Expected Output:
// Synchronous: Promise executor
// Synchronous: Final log
// Micro-task: Promise .then callback
// Macro-task: Timer callback

Here, the code inside the Promise constructor is synchronous and runs immediately. The .then callback is a micro-task and is queued. The setTimeout callback is a macro-task. After all synchronous code finishes, the Event Loop processes the micro-task queue before executing the next macro-task, resulting in the observed order of execution.