Javascript is a single-threaded and non-blocking language, single-threaded means it can only do one task at a time, and non-blocking means, if there are tasks that are taking too long to complete then javascript don't block the execution of the other tasks, but aren't those statement contradictory when it comes to an asynchronous task (eg: HTTP request or a setTimeout), which takes time to execute completely and if javascript is focusing only on that task than how it is not blocking other tasks and if it's not blocking than how's the asynchronous task is executed completely.
Well If you have used javascript it doesn't block the execution of the other tasks while performing an asynchronous task so how it's doing that, well it uses different tools like call stack, memory heap, web APIs, Callback queue, and event loop all together to give you what javascript is now, let discuss all these tools.
The above image is a model of the javascript runtime environment in a browser. Browsers have something called an engine that runs javascript code for you, some popular ones are v8 in chrome and Webkit in Safari. A Browser engine that runs Javascript consists of two things a heap and a call stack.
Heap is the area where the memory of objects, arrays, functions, and other variables of your javascript program is stored dynamically and randomly.
Call Stack is where all functions or tasks are stacked and executed in the manner of LIFO(last-in-first-out) order, when the program is running line by line and it encountered a function then the function is pushed to call stack and when the function is executed then it is popped out of call stack. but say when the program is running and encounters an asynchronous task, it is pushed to the call stack and the call stack pushes it to web APIs because the call stack only deals with the synchronous tasks so that it won't get blocked by asynchronous tasks.
Web APIs are part of the browser that provides us with APIs such as HTTP, AJAX, Geolocation, DOM events, fetch, setTimeout, etc, which we can call in our JavaScript code and the execution is handled by browsers itself. Now when browser web APIs have some task sent by call stack it performs the task but doesn't send back to the call stack directly but instead gives it a callback and pushes to Callback Queue or Microtask Queue depending on the callback.
Callback Queue and Microtask Queue are the area where callbacks sent by web APIs are stored and are getting ready to be sent to the call stack to get executed. Callback Queue and Microtask Queue store the callbacks in a FIFO(first-in-first-out) fashion but who decides when to send them to the call stack that's where the event loop comes.
Event Loop job is to check if the call stack is empty or not and if there are any callback functions inside the callback queue or microtask queue and if there is then one by one event loop sends to the call stack to get executed. All the callback functions coming through Promises will go inside the Microtask Queue and callback functions coming from the setTimeout(), etc goes inside the callback queue. Microtask queue has a higher priority than callback queue so event loop priorities sending from Microtask queue first then move to the Callback queue.
I hope this article helped you understand "The Event Loop" of Javascript and how javascript runs under the hood.