Describe the event loop in JavaScript. How does it handle asynchronous operations such as promises and callbacks? Provide an example of how to manage multiple asynchronous operations and avoid callback hell. Discuss the role of the call stack, Web API, and the event queue in this context.

The event loop is pivotal in JavaScript to handle asynchronous calls. It uses a call stack to manage function execution and a message queue for asynchronous callbacks. When a promise is resolved, it is placed in the message queue, waiting for the call stack to clear before execution. This prevents blocking. To avoid callback hell, async/await syntax can be used for writing cleaner asynchronous code.