What Happens Behind the Scenes?

javascript is the most powerful tool in the web developer’s arsenal. It lets devs bring life to static websites and apps by allowing them to introduce a whole host of dynamic features – news tickers, video players, pop-up chat windows – you name it! It is the third element of the web development triangle, after HTML and CSS.

It is a client-side programming language, meaning that it runs inside the user’s web browser rather than on a server. This has security advantages, but also means that it is susceptible to whatever vulnerabilities the user’s browser has, and that it must deal with any issues related to the local environment.

Most people think they have a good understanding of what javascript does. They know that it allows them to add interactivity and functionality to their sites, and they probably know that it makes the web a more interesting place to be. But they might not be aware of all the machinations that take place behind the scenes to make this happen.

First, javascript code must be parsed, which is done by the javascript engine. This turns it into a data structure called an abstract syntax tree (AST), which is then translated into machine code using something called a call stack. This is what enables the JS engine to keep track of everything that is happening in a function, such as which variable has been assigned to what and what functions have been called from each other.

The AST is then executed line by line, which is how a program is run. The javascript engine is able to go through this process very quickly, because it uses Just-In-Time compilation. This is why it is so fast, as opposed to older implementations of javascript which used to use a different technique, which were slower.

For example, let’s say we want to create a simple function that will create a paragraph when it is called. We could simply write that into an HTML file by including it in the button> element with the onclick attribute set to the function. However, this is bad practice and pollutes the HTML document with unnecessary code.

A better way to do it is to use a script tag within the button> element, which will cause the javascript to be loaded and then executed when the button is clicked. This approach also provides more flexibility because it means that we can change the function without changing the HTML code, and also avoids the need to use the onclick attribute on every single button on the page.

If we have more than one function in a button>, we can control when each one is called by specifying their order with the async or defer attributes. Async means that the script will execute as soon as it has been downloaded, while defer means that it will load in its own queue and only start to be executed when all of the other button> tags have been loaded and parsed.