JS Questions: What’s the Event Loop?

This is the eleventh in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What’s the Event Loop?

Like any programming language, JavaScript has a specific process for handling function calls in a program, and more specifically, deciding when each function will run. Unlike other languages, JavaScript can be run in a browser, meaning that users may be interacting with the program by clicking a mouse or scrolling, for instance, simultaneous to other processes that are already running. The event loop helps create a fluid experience for users, by dictating a flow that allows for relatively long running processes to occur alongside client-side interactions.

Without features built into Node and browsers, JavaScript would only be able to handle one event at a time. Each function call would be added to a stack and one-by-one, popped off the top and run. It’s easy to imagine how this could become problematic in a web app. If a notice telling a user she had successfully updated her account were rendered to a webpage for three seconds using setTimeout, the user would not be able to interact with the page until the setTimeout had completed.

Some events do happen synchronously in JS. Loops will run in the call stack and prevent a webpage from re-rendering until they have completed.

However, due to the event loop built into browsers, processes such as AJAX requests and timeouts can run in the background, with their callback functions placed in a queue that are added to the call stack only when the entire stack has cleared. The below code snippet illustrates this.

If you paste this in your console, you’ll see 1 logged, then 2 returned, then 3 logged. Here’s what happens:

  1. The eventLoop function gets added to the call stack.
  2. The setTimeout timer begins and the callback function is added to the queue after 0 milliseconds.
  3. The number 1 is immediately logged.
  4. The eventLoop function returns 2 and the call stack is cleared.
  5. The setTimeout callback runs, logging 3.

Note that the call stack runs functions in ‘first in last out’ order (meaning that the first function added to a stack is the last to run). That’s why, in the code below, the strings are already concatenated when logged:

First, the greet function is added to the call stack. Then, the concat function is added to the call stack. Concat runs, the greeting is logged, and the greet function is cleared from the stack.

Meanwhile, the queue runs callback functions in ‘first in first out’ order. The first item added to the queue is the first to be added to the call stack. That means, if multiple AJAX requests are made, for instance, the first request to finish will be the first to have its callback function run.

In sum, the event loop in JavaScript refers to the synchronous and asynchronous flow dictated by the call stack and queue in browsers.

Resources

 

Advertisements

JS Questions: What is jQuery?

This is the sixth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is jQuery?

JQuery is a widely-used JavaScript library that makes it easier to access and manipulate DOM elements with JavaScript.

Developing with pure JavaScript is relatively tedious and time consuming, because it takes a lot of work to access DOM elements and assign any changes I may want to make to them. With vanilla JS, I’d have to grab an array of elements by class name, for example, and then iterate through those elements and remove a class. With jQuery, though, I can find elements by class and update them in one step.

 

JQuery can also be used to simplify tasks such as making animations, handling client-side events (such as a click), and making AJAX requests. Another benefit of using jQuery in contrast in vanilla JS is that the library has cross-browser compatibility built-in, meaning webpages built with jQuery generally should work the same across all browsers.

 

In recent years, many new JavaScript libraries and frameworks have emerged. JQuery has fallen from popularity as new techniques and approaches have moved to the forefront, but for small webapps, such as a single page JavaScript game, jQuery may still the the right choice.

Sources

JS Questions: What is JSON?

This is the fourth in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc.

What is JSON?

JSON, or JavaScript Object Notation, is a syntax that is useful for sending and receiving server data. Since a server can only send and receive data as text, JSON is used to convert data into text, as well as transform text received from a server into an easily readable format for developers. These transformations are made using the JSON.stringify() and JSON.parse() methods, respectively.

Modern webpages frequently make requests using the AJAX request and response cycle. Once a response has been received, it can be parsed to JSON. From there, a developer can access data in the JSON object.

JSON is compatible with many programming languages (not just JavaScript). A ruby developer can treat the JSON object like a ruby hash, for example, using dot or bracket notation to access nested key-value pairs. A JavaScript programmer would treat the JSON object like a JavaScript object.

The data types that can be converted with JSON are:

  • number
  • string
  • boolean
  • array
  • object
  • null

Sources

 

 

JS Questions: What is AJAX?

This is the third in a series of posts I’m writing that aims to provide concise, understandable answers to JavaScript-related questions, helping me better understand both foundational concepts and the changing landscape of language updates, frameworks, testing tools, etc. 

What is AJAX?

Websites used to be composed of static HTML pages. Each time a user interacted with the DOM, the entire page reloaded. AJAX, short for Asynchronous JavaScript and XML, is a bundle of technologies that allow web pages to be updated without completely reloading.

AJAX uses a functionality built into modern browsers called the XMLHttpRequest object, which has certain methods and properties that let web pages get data from a server.

The flow of an AJAX request and response cycle begins with an XMLHttpRequest object being created. Then the .open method is called on the object, which takes in three parameters:

  1. the type of request, GET or POST
  2. a URL to the requested data
  3. a boolean value of whether to send the request asynchronously. An asynchronous request means that other JavaScript functions can run while the response is being prepared and sent back from the server.

The .send method is then called on the XMLHttpRequest object, sending it to the server. The server processes the request and creates a response, returning data to the browser.

The data can be returned as XML (hence the XML part of the acronym), though it’s now more common to convert the data to JSON format, which simply allows developers to interact with data as if it’s a JavaScript object.

Using that JSON data, a portion of a web page’s HTML could be updated. For example, a JavaScript function could use HTML to create an unordered list, and append list items with text from the data.

Sources