As JavaScript grows in popularity and teams take advantage of its support at many levels in the development stack — front end, back end, hybrid APPS, embedded devices, and more — JavaScript can create amazing software, and developers need to get a deeper understanding of the inner workings of the language!

This article will examine and explain how JavaScript works in detail. By understanding these details and using the APIs provided properly, you will be able to write better, non-blocking applications.

One, the source of single thread

Almost everyone has heard of the concept of a V8 engine, and many know that JavaScript is single-threaded, and that its primary purpose as a browser scripting language is to interact with the user, so why is JavaScript single-threaded? If JavaScript is multi-threaded, synchronization between threads becomes complicated when a page updates content and the user triggers an interaction. To avoid complexity, JavaScript is designed to be single-threaded.

2. JavaScript engine

Google V8 is a popular JavaScript engine. Here’s a simple view of what it might look like.

The engine consists of two components:

  • Memory heap – the area where memory is allocated
  • Call stack – The position in the stack when the code executes

Third, run time

Almost every JavaScript developer uses some browser API (such as setTimeout). However, these apis are not provided by the engine. These Web apis are provided by the browser, along with DOM events, AJAX, and more. How do they work? Well, it’s a little bit complicated.

Hence the popularity of event loops (also known as Event loops or event polling) and callback queues.

Iv. Call stack

As we said earlier, JavaScript is a single-threaded programming language, which means there is only one call stack. So it can only do one thing at a time. A call stack is a data structure. When execution enters a function, place it at the bottom of the stack. If returned from a function, the function is removed from the bottom of the stack. That’s what the call stack does. For example, 🌰, look at the following code:

fucntion multiply(x,y) {
    return x * y;
}
function printSquare(x) {
    var s = mulitiply(x,x);
    console.log(s);
}
printSquare(s);
Copy the code

When the engine starts executing this code, the call stack is cleared, resulting in the following steps:

5. Stack overflow

Occurs once the maximum call stack size is reached. This can happen quite easily. Especially when you use recursion, look at the following code:

function foo () {
    foo();
}
foo();
Copy the code

When the engine starts executing this code, it starts calling the function foo. This function, however, recurses and starts calling itself without any closing conditions. So foo is added to the call stack repeatedly during each step. Here’s what happens:

When the number of function calls in the call stack exceeds the actual size of the call stack, the browser decides to throw an error, as shown below:

Friends can try it out in the browser console!

6. Event Loop

It’s time for that classic picture again

The Event Loop is responsible for executing code, collecting and processing events, and executing subtasks in the queue.

Specifically include:

  • Javascript has a main thread and an execution stack, and all tasks are placed on the call stack waiting for the main thread to execute
  • The synchronization tasks are placed on the call stack and wait for the main thread to execute in sequence
  • There is a queue of tasks outside the main thread, and all tasks run in the main thread as an execution stack
  • Synchronous tasks are executed on the main thread, and the stack code calls the Web API as it executes, resulting in asynchronous tasks
  • Asynchronous tasks put the registered callback function in the task queue when they have a result (such as when the event being listened to occurs)
  • After the execution of tasks in the execution stack is completed, the main thread is in the idle state and will obtain tasks from the task queue for processing

This process repeats over and over again. This is how the browser works, and this is the Event Loop.

The last

The Event Loop we have to continue to understand that it is the way to break through the first floor of the front!

References:

  • Blog.sessionstack.com/how-does-ja…
  • “Attack of the Front end” — Wang Beishan

Event Loop Learning resources This article explains why JavaScript is single-threaded and how JavaScript works ~ ⚾ If this article helped you, please give it a thumbs up ~ 🏀 Github.com/Awu1227. 🏉 I have other columns, welcome to read ~ 🎱Vue from give up to get Started 🏐 play with the Beauty of CSS 🎳 Easy JavaScript