This part will be the shortest of all, but before the next posts, I would like to discuss these two concepts.
Although the explanations provided here will be useful in subsequent posts, I think that it is most appropriate to create a separate post to explain these concepts.

Single Threaded

This means that in our code only one command at the time is being executed.
If we take any program under the microscope, we will see that it is full of commands in the code. Single Threaded simply means that only one is performed when we are dealing with a browser. Understand that JavaScript is not the only thing happening in the browser. So when its said that JavaScript is Single Threaded it may not be under the hood of the browser but from our perspective as a Developers, JavaScript behaves in single threaded manner.

Synchronous

This is very similar to Single Threaded. In programming, it means one at a time. Not two or ten, just one at a time.
In addition, the code is not only executed one at the time but also in the order that it appears. Line by the line. That's it.

Single Threaded Synchronous execution means that in JavaScript only one thing is happening at the time.

But hey hey, you might say. What about AJAX, doesn't A stand for Asynchronous ?

Well yes it does. So since JavaScript is Synchronous, how does it handle something that is Asynchronous ? You must understand that JavaScript engine is not the only thing that exists in the browser. There are things happening outside the engine that happens in the browser. For example there is Rendering Engine that simply prints pages we are looking at. There is an element of the browser that deals with the HTTP Requests and Responses. JavaScript of course has hooks that connect its engine to those things but they can run asynchronously.

Let's take a look at this example.

As you see we have 2 functions. First one is simply to make sure it takes exactly 5 seconds to be finished. The Second one is to console.log when we click. Ignore document.addEventListener line since it will be discussed in the later part of the blog when we will talk about DOM Manipulation. The only thing you have to know now that it is needed for us to be able to console.log when we click using a mouse.

The task is to click during execution of the waitFiveSeconds function. If you do that the result will show.

We could have clicked as many times as we wanted during execution of waitFiveSeconds function but we wouldn't get anything until that function is executed. One command at the time.

Next Post

I will talk about Invocation and Execution Stack.