![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/04\/javascript-engine.png\")
<\/a><\/p>\nIn Java<\/h2>\n
Before you run a Java program you have to compile it. This gives you an instant feedback about errors in your code syntax. In JavaScript, you will learn about an issue when the engine tries to execute a problematic line of code.<\/p>\n
In order to start coding in JavaScript, you don\u2019t have to install any additional software. Each modern web browser comes with a JavaScript engine. You can simply run scripts you write inside your favorite browser.<\/p>\n
All JavaScript engines implement specification of the language<\/b> provide by ECMAScript<\/a>. Standardization facilitates the development of independent engines and ensures your scripts give the same results no matter where you run them\u2026<\/p>\n \u2026 or at least they should give the same results. Nowadays, the ECMAScript specification changes more dynamically than in the past. Not every engine keeps up the paces.<\/p>\n Java as a platform also has its specification. Oracle provides the official implementation but it\u2019s not the only one. OpenJDK<\/a> is another example. You don\u2019t have to know in details every existing JavaScript engine but I encourage you to remember engines\u2019 names and web browsers in which you\u2019ll find them<\/b>. It\u2019ll allow you to check if the latest features of the language are implemented in browsers you want to support.<\/p>\n What are the most important JavaScript engines?<\/p>\n But JavaScript engine is just a building block of a bigger concept.<\/p>\n Let\u2019s dig a little deeper.<\/p>\n In the web development, you don\u2019t usually use the engine directly. The JavaScript engine works inside an environment<\/b>, which provides additional features to your scripts that you can use at runtime.<\/p>\n What kind of features you may ask.<\/p>\n These can be utility libraries or APIs which allow communicating with the world surrounding the engine<\/b>. An example here might be access to information about the web browser in which your script is executed. Or a notification about a mouse click.<\/p>\n In Java world, we have the Java Runtime Environment (JRE) which gives us access to supporting libraries and acts as a bridge between your program and the operating system.<\/p>\n Have you heard that JavaScript language is executed in a single thread?<\/p>\n No more multithreading pitfalls?<\/p>\n Well, it\u2019s not entirely true<\/b>.<\/p>\n Before you open a bottle of champagne to celebrate simplified development you should first understand what this single thread means to JavaScript.<\/p>\n It\u2019s absolutely correct that your JavaScript code is executed in a single thread<\/b>. But, it doesn\u2019t mean that the whole JavaScript runtime environment works in a single thread. The thread pool exists in JavaScript runtime<\/b>. Fortunately, you don\u2019t have to worry about thread management because the environment does it for you.<\/p>\n But how?<\/p>\n How does the JavaScript environment know when to execute your code? If there\u2019s only one thread responsible for the execution of your code, there has to be some mechanism which manages the order of execution.<\/p>\n This mechanism is called the Event loop<\/a>.<\/p>\n Before I answer the question, you should know about one important detail. All scripts written in JavaScript can be divided into two major groups<\/b>.<\/p>\n The first group is composed by immediately invoked scripts<\/b>. Once they\u2019re loaded, the environment passes them for execution to the JavaScript engine. In the web development, these are usually initial scripts invoked right after a web page is loaded by the browser.<\/p>\n The second group contains so-called event callbacks<\/b>. An event callback is a piece of code executed when a particular event<\/b> occurs. In a web page context, an example of an event is a mouse click or a return of a network request.<\/p>\n The Event loop<\/b>, which is a part of the JavaScript runtime environment, is a mechanism responsible for handling callbacks<\/b>.<\/p>\n When you create a callback, you always associate it with a particular event. If that event occurs, the environment puts your callback into a so-called Event handlers queue<\/b>. The Event loop constantly monitors the queue and executes its elements in the order they arrive.<\/p>\n Now something very important!<\/p>\n Callbacks are a l w a y s<\/i> executed completely. The Event loop runs one callback at a time<\/b>. No context switching. All callbacks in the queue have to wait until the current one is finished.<\/p>\n If a script runs too long, it blocks others. That\u2019s why callbacks should be relatively short and simple<\/b>.<\/p>\n Although these days JavaScript runs in many different environments, its origins lead to web browsers. One of the main reasons for inventing JavaScript<\/b> was to put some dynamics in web pages created with HTML and CSS.<\/p>\n First of all, a web browser allows for manipulation of static web pages through the API for the Document Object Model (DOM)<\/i>.<\/p>\n The DOM represents (Models) the tree of UI elements (Objects) in a particular web page (Document)<\/b>. Your web browser creates a DOM object for each page you visit right after it\u2019s loaded.<\/p>\n Thanks to the DOM API exposed by web browsers you can freely change the DOM with JavaScript and add dynamics to static pages.<\/p>\n But there\u2019s more.<\/p>\n A web browser is an interactive interface for web pages. User click<\/b> on elements, scroll<\/b> down pages, or type<\/b> using the keyboard. All these actions fire user events<\/b> which the browser exposes as a part of the JavaScript runtime environment.<\/p>\n Beyond that, the user isn\u2019t the only source of events. Your scripts can create events as well.<\/p>\n A very special type of events you create is a timer event<\/b>. You can delay execution of some code by a specified amount of time. The browser handles these events with the already mentioned event loop.<\/p>\n But that\u2019s not all, you can use browser\u2019s API to communicate via the network with the server side of your application. The result of network communication is also an event.<\/b><\/p>\n Finally, a web browser gives you basic information about a host operating system in which it runs and allows to store data in the local storage<\/a>.<\/p>\n Although the main environment for JavaScript is a web browser, it wouldn\u2019t be fair if I didn\u2019t mention other JavaScript runtimes. Because JavaScript is everywhere <\/b>now.<\/p>\n Think I\u2019m exaggerating?<\/p>\n For a very long time, JavaScript was associated only with the front-end client-side development. Today, the language has much more uses. These include:<\/p>\n You can actually build a whole web application<\/b> (from the UI to the data layer) with a technology stack based only on JavaScript<\/b>. Actually, the stack already has its name and it\u2019s called MEAN stack<\/a>.<\/p>\n As you are a Java developer you might not be interested in NodeJS since you probably use Java for the back-end. However, these examples greatly illustrate capabilities of JavaScript runtime environments. JavaScript is no longer just a toy language for fancy UI animations<\/b>. It can do much more!<\/p>\n At this moment, you probably should be able to say in your words what is the difference between JavaScript engine and JavaScript runtime environment. But because these topics are often confused<\/b>, let\u2019s summarize them together.<\/p>\n The JavaScript engine<\/b> translates your script into runnable machine code instructions so it can be executed by the CPU of the host machine. The engine translates scripts at runtime on the fly. Your code won\u2019t be compiled unless you run it.<\/p>\n The JavaScript runtime environment<\/b> provides your scripts with utility libraries which can be used during execution. It\u2019s your script that references these libraries. The engine itself doesn\u2019t depend on them.<\/p>\n The cool thing is the JavaScript engine implementation is totally independent of the runtime environment.<\/b> Engines aren\u2019t developed with any particular environment in mind.<\/p>\n While the JavaScript engine does the similar job to the Java compiler, the work done by the JavaScript runtime environment can be compared to the work done by the Java Classloader.<\/p>\n There\u2019s a real-life example which demonstrates this approach is working.<\/p>\n You can find the V8 engine both in Chrome browser and NodeJS. One engine successfully utilized in two environments created for totally different uses.<\/p>\n What should you already know?<\/p>\n We started the introduction with the JavaScript engine as a basic element. Then we moved to the components and features of the JavaScript runtime environment. We mentioned the Event loop, Events, and Event handler queue. At the end, you could see the comparison and summary of the JavaScript engine and runtime environment.<\/p>\n Now it\u2019s your turn. Would you like to read more about discussed elements of the JavaScript runtime environment? I\u2019d love to know your thoughts, so please go ahead and leave them in the comments. If you find the article useful, please share it with your colleagues and other developers.<\/p>\nJava Analogy<\/h2>\n
\nYet, Oracle\u2019s implementation is considered as the standard. In the JavaScript world, there\u2019s no clear winner.<\/p>\n\n
\n
2. What is JavaScript runtime environment?<\/h2>\n
Java Analogy<\/h2>\n
2.1 Is JavaScript single-threaded?<\/h3>\n
2.2 What is JavaScript Event loop?<\/h3>\n
<\/a><\/p>\n2.3 Browser JavaScript runtime environment<\/h3>\n
<\/a><\/p>\n<\/a><\/p>\n2.4 JavaScript outside of browser<\/h3>\n
\nWhy am I doing this?<\/p>\n\n
In Java<\/h2>\n
3. JavaScript engine vs runtime environment<\/h2>\n
Java Analogy<\/h2>\n
Conclusion<\/h2>\n