JS - Async Javascript (Promises and Callbacks)

JS is a single - threaded leanguage

Yes ! 1> That means one task at the time 2> Code executes step by step, in order

Callback hell

Chain callbacks in each other

What actuality is event loop ?

EVENT LOOP IS NOT PART OF THE JS ENGINE, BUT PART OF THE BROWSER !!!! Runs all the time and always sees is the stack empty and do we have pending to do's and if the stack is empty and event stack loop and pushes any waithing messages from Message Queue to the Stack See the picture from Udemy Course

What if we have operation that takes a bit longer

For example: 1> SetTimeOut 2> Http request 3> Getting User location

What is Event Loop in example?

See the example first

Asyn + sync Code - execution

The order of execution in your JavaScript code, where console.log("Clicked") is executed first and setTimeout is executed second, is determined by the event-driven and asynchronous nature of JavaScript. Here's a step-by-step explanation: 1> The setTimeout function is called and provided with a function to execute (console.log('yes I am second line')) after a specified timeout of 0 milliseconds. 2> The console.log("Clicked") statement is executed immediately because it's part of the synchronous code. Even though the setTimeout has a timeout of 0 milliseconds, it doesn't mean the provided function will be executed immediately. Instead, the function is scheduled to be executed after the current synchronous code has finished running and control returns to the event loop. 3> The synchronous code (including the console.log("Clicked") statement) completes, and then the event loop checks if there are any tasks in the queue. It finds the function passed to setTimeout. 4> The function inside setTimeout (console.log('yes I am second line')) is then executed. In summary, the synchronous code, including console.log("Clicked"), is executed first. The function provided to setTimeout is scheduled to run asynchronously, and it is executed after the current synchronous code has finished running. This is a fundamental aspect of JavaScript's event-driven and non-blocking nature.

So we do not want to freeze our webbsite till some operation finished so here we have a solution and this solution is Asynchronous Code Execution

We deligate to the brawser a operation , because browser uses multiple threads. So that means like eventListeners, our JS do not stop when see EventListeners and to waith the callback in Event Listeners to execute. No the Js code is Run and if someone click the button then the browser executes the callback function !!! So the callback function is the way that the browser says that something is end or triggered. За да знаем какво да правим, когато вече този скрипт е done Същият пример е със addEventListeners -> ние делегираме браузера да слуша когато примерно юзера натисне бутона и когато това стане да направи нещо, а не чакаме и да проверяваме всяка секунда дали бутона е бил натиснат

Can we say that synchronous code are not passing to the in the queue ?

Yes, that's correct. In JavaScript, the event loop processes code in a synchronous manner until it encounters an asynchronous operation. Synchronous code is executed immediately, and it doesn't go into the event queue. Asynchronous operations, such as those involving timers (like setTimeout), AJAX requests, or handling events, are placed in the event queue to be processed later. Once the synchronous code is complete, the event loop checks the event queue for tasks and executes them in the order they were added. So, to clarify: Synchronous code runs immediately in the order it appears in your script. Asynchronous operations, when encountered, are scheduled for later execution and placed in the event queue. This is why, in your example, the console.log("Clicked") statement is executed synchronously, and the function inside setTimeout is scheduled for asynchronous execution after the current synchronous code block completes.