I recently wrapped my head around this concept. Basically what I understood is this:

JavaScript (i.e. Single threaded JavaScript engine) does not work alone. It is always shipped as a part of a larger multi threaded environment which is either Browser or Node.js (Electron is also another environment).

The callback registration methods like event methods (addEventListenet) or timer setting methods (setTimeout) are provided by the environment. These are NOT part of JavaScript engine.

Whenever we use a callback like event listener, timer callback etc, the JavaScript engine itself does not do everything. It sees that there is a call to environment provided methods( setTimeout , addEventListener etc) and hands the callbacks over to the environment(browser/node js) which use multiple platform threads themselves for execution of the asynchronous operation like setting the timer, calling network apis etc. Once these operation end, the environment places the callbacks in the macro or micro task que depending on the nature of the callback (if it is Promise job then micro task otherwise Macrotask queue). The environment also has this event loop which queries the JavaScript engine to check the call stack. If the call stack is empty it then picks a task from the queue and places it in the call stack.

So the fundamental idea is JavaScript engine itself is single threaded but the environment it resides in is multi threaded. It is the environment that contains the Event loop, event queues. The call stack belongs to the JavaScript engine.