DEV Community: Pippa Thompson

Web Dev Related Acronyms You Should Know

Pippa Thompson — Mon, 20 Mar 2023 09:42:23 +0000

Web dev acronyms - ftw or wtf?

This article is a reference and a brief, high-level overview of an assortment of acronyms that you may come across in the web development wild. If, like me, you have the memory of a sieve then I hope that this article might come in handy for reminding you what they really mean. This is by no means an exhaustive list and I’m sure there are a many more out there, so if you have any suggestions please let me know ☺️.

Happy reading!

CRUD

Create Read Update Delete

CRUD refers to four common operations of persistent storage, i.e. operations available to perform on data in some sort of database.
A super creative example is that of a to-do list. Each to-do should have methods available for the creation, reading (essentially fetching), updating and deletion of said to-do.

OS

Operating System

The OS of a machine refers to the software installed which enables the user to communicate with the device - it is the layer between the user and the device’s hardware components. Examples include Apple’s macOS, Microsoft’s Windows and Linux which is an open-source OS.

GUI

Graphical User Interface

A GUI enables a user to communicate with a device visually. Elements of a GUI include icons, menus and a mouse to click/drag/scroll on screen. Generally speaking they are more intuitive and easier to work with than a CLI (coming up next), although less powerful in their operating power.

CLI

Command Line Interface

A CLI is a type of program which accepts text inputs in order to execute functions on an operating system. Nowadays a CLI is commonly used to install software, configure computers or access functionality not accessible via a GUI. Back in the early days of computers, users could only interact using a keyboard so a CLI was their only option. There are different variations depending on the OS, so for a deeper dive plus a bit more background information I recommend reading this article.

NPM & NPX

Node Package Manager & Node Package eXecute

NPM is an online repository of open source Node projects. It is also a CLI tool with a variety of commands available which enable developers to install these packages in order to use them in their own projects.

As well as also being a CLI tool, NPX is a Node package runner; it allows developers to execute a package from the NPM registry without installing the package, so is useful for a single time use package. As of version 5.2.0, it comes pre-bundled with NPM.

HTML

HyperText Markup Language

HTML is the standard markup language used on the web. It requires its own .html file type. It is made up of a collection of elements which are also referred to as tags. HTML was designed to be very descriptive, so examples of elements include <h1></h1> which represents a heading 1 and <div></div> which represents a divider element.

HTML not only describes the structure of a web page, it also instructs the browser how to display the data on the page with basic styling. Different browsers might have slightly different styling implementation. Since the inception of the web, there have been many different versions of HTML, with the latest standard being HTML5.

XML

Extensible Markup Language

XML is, like HTML, both a type of markup language and a file type. Its format is text based, and it is predominantly used for storing information (such as documents, data, invoices and more) and sharing said information between programs, people and computers. It is software and hardware independent. One main difference between HTML and XML is that the main purpose of XML is simply to store/transport data and does not focus on the visual displaying of data as much.

JSX

JavaScript XML

JSX is a syntax extension of JavaScript which allows you to write HTML-looking code whilst also harnessing the power of JavaScript.

If you’ve ever worked with React, you will most likely have come across JSX. Although it is possible to use React without JSX, more often than not you will see it in React projects.

Given React’s focus on the separation of concerns as opposed to separation of technologies, rather than writing markup and logic in separate files JSX enables the developer to combine logic and markup into separate components.

CMS

Content Management System

Exactly as it sounds, a CMS is some sort of system developed to manage content. The content is typically stored in a database and the presentational layer then displays the stored data. This enables multiple users to edit data and publish any changes in a relatively pain-free process. Common examples include software such as WordPress, Wix and Drupal.

IAM

Identity Access Management

IAM is a collection of systems, policies and technologies which allow you to control who has access to digital resources and thus reduce the risk of data breaches. I recently read a really great analogy for IAM in this article - I recommend reading it if you need some more clarification!

CI/CD

Continuous Integration, Continuous Delivery and Deployment

CI/CD refers to a set of tools/a method used for the development of software. It prioritises automation and monitoring of each stage of the software lifecycle in order to make the deployment process as pain-free as possible. Specifically, this could include practices like automated testing once a developer has merged their code to a shared branch and then automatically deployment of the changes once all tests have been passed. The complete process of all the different practices is referred to as a CI/CD pipeline.

COVE & PLSRD

Closed Over Variable Environment & Persistent Lexically Scoped Referenced Data

Both of these acronyms are synonyms for closure. Closure is a behavioural feature of JavaScript which allows a function to store a reference to the data that was live in its own local memory as well as its parent function’s memory when said function was created, if said function was returned from its parent function.

In simple terms, the returned function “remembers” the data available in the environment in which it was created after it has been returned by its parent.

There are countless resources out there which explain this concept in detail, but here’s one I found especially helpful: read it here. Frontend Masters also has some great video courses on the topic, in particular JS Hard Parts by Will Sentance, so if that is available to you it’s a great option to gain a deeper understanding.

API

Application Programming Interface

An API acts as a sort of middleman which allows for communication between different software.

A well-known analogy to describe APIs is that of a restaurant. You have a customer (representing the frontend) who wants to order a meal. In order to do so, this customer needs to relay their order to the chefs (representing the backend) in the kitchen. In comes the waiting staff (representing the API) who relay the customer’s order to the chefs and then bring the meal to the customer.

A common API that you might have come across while using JavaScript is .fetch(), which allows you to fetch data (known as resources) from the web via the browser. Without this communication functionality, the browser and the server wouldn’t know the other one existed, so .fetch() is acting as the link between the two.

For more in depth information along with some interesting public APIs available out there, have a read of this.

AJAX

Asynchronous JavaScript and XML

AJAX is a terms that refers to a collection of techniques and technologies which allow the developer to create interactive websites and applications that can request data from a server without blocking other functionality on the web page. It relies on XML/JSON, JavaScript and XMLHttpRequest to retrieve data from a server.

REST

Representational State Transfer

REST is an architectural paradigm for communication between web-based systems and/or software (such as APIs). In order to be considered RESTful systems must comply with certain principals, with a particular focus on separation between the client and the server. RESTful communication is relatively easy to use and implements HTTP requests and endpoints/paths to manage the transfer of data.

HTTP(S)

HyperText Transfer Protocol (Secure)

As the name suggests, HTTP is an application-layer protocol (i.e. a set of rules defining optimal conduct and procedures) for transferring hypermedia documents (such as HTML documents) over the web. Originally it was designed for transferring resources between browsers and servers, but it is possible to use it for other purposes.

When a browser sends a request to a server for some data, it sends along an HTTP header which contains information about the request, such as an HTTP verb (GET, PUT, POST, DELETE are common but others exist) to describe the operation type. The server sends back a response header containing information about the response, such as the response data type, size and data itself amongst other things.

HTTPS is an extension of HTTP and utilises encryption to protect data being sent over the web.

OOP

Object Oriented Programming

OOP is a programming paradigm, meaning an architectural style for writing code. It focuses on separating code into - you guessed it - objects in order to encapsulate data and functionality. This can make it easier to identify where issues are coming from during any debugging.

TCP

Transmission Control Protocol

Yet another protocol, TCP defines how data should be formatted in order to be sent between a server and a client. To be TCP compliant, before any data is transferred a connection between the data-requesting and the data-serving parties must be established and the requested data must be sent in a data packet (if the data requested is large, it may need to be broken down into multiple, smaller packets).

IP (address)

Internet Protocol (address)

IP refers to the set of rules which govern how data is sent over the internet/local network.

An IP address is a unique number given to every device that connects to any network which uses IP in order for these devices to be able to communicate with each other (i.e. send and receive data). In simple terms they describe where the data request is coming from or where to send requested data to, much like a normal home address. IP addresses are assigned to devices by ICCAN (Internet Corporation for Assigned Names and Numbers - two acronyms in one!).

DOM

Document Object Model

The DOM is a cross-platform interface (API) that breaks down an HTML or XML document into a tree structure, with each node representing an element of the document. It does this in order to allow programmes to access, interact with and manipulate parts of the page.

XHR

XML HTTP Request

Another API, XHR is an object provided by the browser and consists of methods which allow for data transfer between the browser and a web server. It falls under the umbrella of AJAX.

ASCII

American Standard Code for Information Interchange

ASCII was developed to enable different makes and models of electronic devices (including computers) to communicate with each other by standardising the representation of characters (letters, numbers, punctuation, etc).

It is a character-encoding system that assigns a unique 8-bit (byte) number to each different character.

One major drawback is the fact that ASCII only supports certain characters (numbers 0-9, upper case and lower case letters A-Z as well as some punctuation characters). This meant that languages not based on the Latin alphabet were not included in the system. In order to provide standardisation to a wider and more inclusive character set, Unicode was introduced in 1991 which is a more expansive character-encoding system supporting different alphabets.

JSON

JavaScript Object Notation

JSON refers to a specific format for storing data. It is syntactically very similar to JavaScript objects as it stores data using key-value pairs, curly braces and commas for separation. It’s often used when sending/receiving data over the web.

SSL & TSL

Secure Socket Layer & Transfer Socket Layer

Both of these acronyms refer to a technology which is responsible for encrypting data sent over the internet. They utilise encryption algorithms to achieve this. TSL is just a more updated and secure version of SSL.

CSS / SASS / SCSS

Cascading Style Sheets / Syntactically Awesome Style Sheets / Sassy Cascading Style Sheets

No doubt you’ll have come across this before if you’ve ever stepped foot in the frontend world. CSS is a style sheet language (which is written and stored in a .css file) that specifies how a markup document should be displayed. It encompasses everything from the basics such as colours, size and font to more complex styling options such as animations.

SASS and SCSS can be thought of as more “advanced” CSS. They are both CSS pre-processer languages which combine all the features of CSS whilst adding some extra behaviour, such as the ability to use variables and nesting. SASS/SCSS files are then compiled in normal CSS that the browser can understand.

var, let or const: what's the real difference?

Pippa Thompson — Wed, 01 Mar 2023 13:31:11 +0000

The `var`, `let` and `const` keywords

At this point, the let and const keywords are pretty much ubiquitous. Before their existence, we could only use the var keyword to declare variables which store our data. Although you will still encounter var in JavaScript code today, let and const bring with them some features which help address certain issues you might encounter when using var.

Scope

One of the differences between let/ const and var relates to how they handle scope.

Scope refers to the accessibility of variables and functions in different parts of a program. Being a lexically scoped language, the accessibility of variables and functions in JavaScript depends on where they are declared in the program. Both let and const are block scoped whereas var is not. This means that variables declared with let and const within if/switch statements, for/while loops and curly braces { } are not accessible outside of this block.

Let’s see how this block-scoped behaviour affects our code:


for (var i = 0; i < 3; i++) {
  console.log(i)
}

console.log(`var i = ${i}`)


for (let j = 0; j < 3 ; j++) {
  console.log(j)
}

console.log(`var j = ${j}`)

// OUTPUT -->
// (first for loop - using var)
// 0
// 1
// 2
// "var i = 3"
// (second for loop - using let)
// 0
// 1
// 2
// "error"
// "ReferenceError: j is not defined"

In the above example we have two for loops. In the first loop, we use the var keyword to declare variable i. Despite the fact that i is within a for loop, we are still able to access it outside the for loop.
In the second loop we use the let keyword to declare variable j . We try to access j outside of the for loop but we receive the ReferenceError: j is not defined. As it was declared using let, it is block scoped and therefore only accessible within the loop.

This same behaviour occurs when using the const keyword to declare variables within block scopes:


for (let i = 0; i < 3; i++) {
  const myName = 'Pippa';
  console.log(`${myName} -> ${i}`)
}

console.log(myName);

// OUTPUT -->
// (console.logging within the for loop)
// "Pippa -> 0"
// "Pippa -> 1"
// "Pippa -> 2"
// (console.logging outside the for loop)
// "error"
// "ReferenceError: myName is not defined"

Here we have declared the variable myName using const inside a for loop. Although we can access myName inside the for loop as demonstrated by the console.log(${myName} -> ${i}), we cannot access it from outside the loop and we receive a ReferenceError when we try.

Redeclaration and Reassignment

Another way in which let / const differ from var relates to whether or not they can be redeclared or their values reassigned. Variables declared with var can be both redeclared and reassigned.


var myName = 'Pippa';

console.log(myName);

var myName = 'Philippa';

console.log(myName);

myName = 'Pippa Again'

console.log(myName)

// OUTPUT --> 
// "Pippa"
// "Philippa"
// "Pippa Again"

// No errors, we can declare myName, redeclare it and finally reassign the value.

This can sometimes cause issues, especially when working with global variables. It’s one of the reasons that let and const were introduced because when using var you could end up accidentally redeclaring variables.

Let’s try the same using the let keyword:


let myName = 'Pippa';

console.log(myName);

let myName = 'Philippa';

console.log(myName);

// OUTPUT -->
/// "SyntaxError: Identifier 'myName' has already been declared"

Here, we receive a syntax error informing us that the myName variable has already been declared. So with let, we cannot redeclare a variable. We can, however, reassign values:


let myName = 'Pippa';

console.log(myName);

myName = 'Philippa';

console.log(myName);

// OUTPUT -->
// "Pippa"
// "Philippa"

No errors! Rather than redeclaring myName we just reassign its value, which is fine by let.

So how does const deal with redeclaration of variables? const, short for constant, displays the same behaviour as let when it comes to redeclaring variable, i.e. it does not allow variable redeclaration:


const myName = 'Pippa';

console.log(myName);

const myName = 'Philippa';

console.log(myName)

// OUTPUT -->
// "Pippa"
// "SyntaxError: Identifier 'myName' has already been declared

The same as with let, we receive a SyntaxError when trying to redeclare a const variable. But what about reassigning the value of a const?


const myName = 'Pippa';

console.log(myName);

myName = 'Philippa';

console.log(myName)

// OUTPUT -->
// "Pippa"
// "error"
// "TypeError: Assignment to constant variable.

That’s also a big no-no. This time we receive a TypeError telling us we have assigned a constant variable, which cannot be changed. As such, const is a good option to use for variables which you know won’t change.

While useful in some cases, doesn’t this behaviour seem a bit inflexible? Let me expand a bit more on the details of this. As we just saw, when using const to store primitive data types (Number, String, Boolean, null, undefined, BigInt and Symbol) we cannot redeclare or reassign the value. However, this is not the case when using const to store non-primitive data types (objects, which include arrays and functions).

When storing non-primitive data types, although we cannot redeclare them, we can mutate them. An example of this would be using const to store an object and then later adding on a new property or method.

The reason for this relates to how JavaScript stores different types of data. When we store an object (or any non-primitive data type) in a variable, for example const myObject = {...}, we are saving a reference to the object (essentially an “address” to a point in memory in the JavaScript memory heap) rather than storing the object itself. Primitive types in JavaScript are stored in a different way; the actual value is stored as opposed to a reference to a point in memory.

This means that we can use const to store an object, and later mutate this object as it is a non-primitive data type:


const carObject = {
  'make': 'Ford',
  'wheels': 4
}

console.log(carObject);

carObject.colour = 'red';

console.log(carObject);

// OUTPUT -->
/*
FIRST CONSOLE.LOG()
[object Object] {
  make: "Ford",
  wheels: 4
}
SECOND CONSOLE.LOG()
[object Object] {
  colour: "red",
  make: "Ford",
  wheels: 4
}
*/

As you can see, we declared carObject using const and were able to add the colour property on later as the reference to the object which was saved in carObject has not been changed.

Hoisting

Another major difference between let/ const and var is their behaviour relating to hoisting.

Before we dive into these differences, let’s first discuss what hoisting actually is. To do so we must take a look at the 2 phases of the JavaScript execution context.

When a program is passed to a JavaScript engine there are 2 phases which will occur. JavaScript will first parse the file in what it known as the creation phase. During this phase, JavaScript will allocate memory for all variables and functions, amongst other processes such as creating the execution context and the scope chain.

Next comes the execution phase during which, as the name suggests, the JavaScript engine actually executes the code in the file.

Hoisting happens during the creation phase, and it is the process of JavaScript identifying any variables and functions in a file and “hoisting” them to the top of their respective scope so that they are available for use during the execution phase. However, as we have already discovered, not all variables are created equal, so how does the behaviour of let/const differ from var? Let’s take a look.

Var

Any variable that has been declared with var will be partially hoisted. The identifier name will be stored in memory but the value will be set to undefined until JavaScript reaches the assignment of the value during the execution phase.


console.log(myVar)

var myVar = 'I used to be undefined';

console.log(myVar)

// OUTPUT -->
// undefined | first console.log()
// "I used to be undefined" | second console.log()

No errors were thrown, but the value of myVar was set to undefined until the execution phase during which JavaScript assigns the value as the string ‘I used to be undefined’.

Let and Const

Variables declared with let and const will be hoisted, but their values will be set to uninitialised. This is different from var as any values declared by var will initially be stored as undefined until the execution phase.

Let’s take a closer look at using let:


console.log(myLet)

let myLet = 'I used to be uninitialised';

console.log(myLet);

// OUTPUT --> 
// "error" 
// "ReferenceError: Cannot access 'myLet' before initialization

The reference error message we received confirms this; Cannot access 'myLet' before intialization. So, JavaScript is aware of its existence, but it has not yet been initialised with any value. Practically speaking, what this means is that you should declare and assign the value when using let before you try and access it in your code - unless you want to receive an error that is!

That being said, some potentially unexpected behaviour occurs when we:

declare a variable with let but don’t assign it a value
access that variable
then assign it a value

That sounds a bit confusing, so let me show you what I mean with an example:


let partiallyHoisted;
// declare a variable using let but don't manually assign it a value

console.log(partiallyHoisted);
// access the variable 

partiallyHoisted = 'I used to be undefined';
// assign a value to the variable

console.log(partiallyHoisted)

// OUTPUT -->
// undefined | first console.log()
// "I used to be undefined" | second console.log() after assigning the variable a value

No errors! In this case, although we tried to access partiallyHoisted before we assigned it a value, as we had declared it (and therefore JavaScript “knew” it existed) it is set to undefined by default, until we manually assign it a value.

This behaviour differs between let and const. When using const we cannot declare a variable without assigning it a value, and if you try you will receive a syntax error:


const myConst;

console.log(myConst);

myConst = 'This will cause an error!';

console.log(myConst)

// OUTPUT --> 
// "error"
// "SyntaxError: Missing initializer in const declaration"

Aside from the example we just looked at, const behaves the same way as let when it comes to hoisting in JavaScript. The identifier name will be hoisted to the top of its scope, but its value will be uninitialised and therefore inaccessible until JavaScript reaches the line of code which assigns it a value during the execution phase.


console.log(myConst);

const myConst = 'I will be uninitialised ';

console.log(myConst);

// OUTPUT -->
// "error"
// "ReferenceError: Cannot access 'myConst' before initialization"

If we take a look at the error message we receive, we see that it’s the same error we got when trying to access a variable declared with let before assigning it a value. It cannot be accessed as it’s not yet been initialised. There’s a term for this specific period during which let and const variables have been hoisted (so JavaScript “knows” they exist) but not initialised so are therefore inaccessible; the Temporal Dead Zone.

As a final note, although you will continue to see the use of the var keyword in JavaScript code, let and const are nowadays considered standard, with const usually being used to store objects and arrays even if you plan on mutating them later on in the program.

If you made it this far, thanks for reading!

The Coolest JavaScript Features from the Last 5 Years

Pippa Thompson — Mon, 27 Feb 2023 21:28:31 +0000

According to Erik Qualman, language is always evolving. Although he was referring to natural language, the same applies to programming languages too. JavaScript has changed a lot since it’s conception in 1995, and since then many new features have been added. This article discusses some super useful (and possibly less well known) features added to JavaScript in the last 5 years. It in by no means an exhaustive list, and major revisions such as features surrounding classes will be discussed in a separate article.

A quick note on ECMAScript

ECMA (European Computer Manufacturers Association) is an organisation tasked with providing specifications and standards for programming languages, hardware and communications. ECMAScript is a part of this organisation which focuses specifically on scripting languages. In other words, it provides a “blueprint” for how a scripting language, such as JavaScript, should behave. JavaScript implements these specifications, and as ECMAScript evolves so too does JavaScript. In order for a new feature to be implemented there is a 4 step process presided over by the TC39 committee.

Due to the modernity of the features discussed in this article, some of them may not be supported by all browsers. To check browser compatibility, take a look at this link.

Now with all that out of the way, let's dive into the features.

String.padStart() and String.padEnd()

These string methods are a quick and easy way to attach strings onto other strings. As the names suggest, String.padStart() adds a new string onto the start of a given string and String.padEnd() appends a string onto the end of a given string. These methods do not mutate the original string.

String.padStart(desiredStringLength, stringToAdd)

desiredStringLength: How long you want the new string length to be as a number.
stringToAdd: this is the string you want to add to the beginning of the original string.

Let's take a look at an example:


let originalString = 'Script';

let paddedString = originalString.padStart(10, 'Java');

console.log(paddedString);

// OUTPUT -->
// 'JavaScript'

What happens if the desiredStringLength argument is shorter than the length of the original string + the stringToAdd? In this case, the stringToAdd is truncated before it's added to the original string:


let originalString = 'Script';

let paddedString = originalString.padStart(7, 'Java');

console.log(paddedString);

// OUTPUT -->
// 'JScript'
// truncates the stringToAdd from 'Java' to 'J'

What about it the desiredStringLength argument is longer than the length of the original string + stringToAdd? This can lead to some weird looking results! The stringToAdd argument will be repeated until it is equal to the desiredStringLength argument:


let originalString = 'Script';

let paddedString = originalString.padStart( 15, 'Java');

console.log(paddedString);

// OUTPUT -->
// 'JavaJavaJScript'

And if no stringToAdd argument is provided? Empty spaces will be added to the front of the original string until the string length is equal to desiredStringLength:


let originalString = 'Script';

let paddedString = originalString.padStart(15);

console.log(paddedString);

// OUTPUT -->
// "         Script"

And finally, what about it no desiredStringLength argument is provided? A copy of the original string is returned unchanged:


let originalString = 'Script';

let paddedString = originalString.padStart('Java');

console.log(paddedString);

// OUTPUT --> 
// 'Script'

String.padEnd(desiredStringLength, stringToAppend)

This string method works in the same way as String.padStart(), but appends a string to the end of a given string.


let originalString = 'Web';

let paddedString = originalString.padEnd(6, 'Dev');

console.log(paddedString);

// OUTPUT -->
// 'WebDev

The same rules apply regarding argument usage:

desiredStringLength < original string + stringToAppend? The stringToAppend appended to the end of the original string will be truncated.
desiredStringLength > original string + stringToAppend? The stringToAppend appended to the end of the original string will be repeated until the desiredStringLength is reached.
No stringToAppend argument passed? Empty spaces will be appended to the original string until the desiredStringLength is reached.
No desiredStringLength argument passed? A copy of the original string is returned unchanged.

String.replaceAll(pattern, replacement)

You may have come across String.replace() before, which takes a pattern argument and a replacement argument and replaces the first instance of the matching pattern in a string. The pattern argument can be a string literal or a RegEx.

String.replaceAll() takes it one step further and, as the name suggests, allows us to replace all instances of a specified pattern with a replacement string rather than just the first instance.


// Using String.replace() 
const aString = 'My name is Pippa. Pippa is my name.';

const replaceString = aString.replace('Pippa', 'Philippa');

console.log(replaceString);

// OUTPUT -->
// "My name is Philippa. Pippa is my name"
// only the first instance of 'Pippa' is replaced with 'Philippa'

// Using String.replaceAll() with regex
const  regex = /Pippa/ig;

const anotherString = 'My name is Pippa. Pippa is my name.';

const replaceAllString = anotherString.replaceAll(regex, 'Philippa');

console.log(replaceAllString);

// OUTPUT -->
// "My name is Philippa. Philippa is my name."
// both instances of 'Pippa' and replaced by 'Philippa'

Object.entries(), Object.keys(), Object.values() and Object.fromEntries()

This set of methods are useful for transforming certain data structures. Let's go through them starting with...

Object.entries(originalObject)

This object method takes an object and returns a new 2-dimensional array with each nested array containing the original object’s key and value as elements. Let me show you what I mean:


const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const fruitArray = Object.entries(fruitObject);

console.log(fruitArray);

// OUTPUT -->
// [["banana", "yellow"], ["strawberry", "red"], ["tangerine", "orange"]]

This can be a super helpful method to use when transforming data. Another use case would be to access a specific key-value pair in an object:


const fruitObject = {
  'banana': 'yellow',
  'strawberry': 'red',
  'tangerine': 'orange' 
};

const firstFruit = Object.entries(fruitObject)[0];

console.log(firstFruit);

// OUTPUT -->
// ['banana', 'yellow']

In case you hadn’t heard, a lot of things in JavaScript are objects. So, we can even pass arrays and strings as arguments into the Object.entries() method which will coerce them into objects. Let’s see what happens when we pass a string as an argument:


const string = 'Hello'

const stringAsArgument = Object.entries(string);

console.log(stringAsArgument);

// OUTPUT --> 
// [["0", "H"], ["1", "e"], ["2", "l"], ["3", "l"], ["4", "o"]]

Each character in the string is inserted into a separate array, and its index is set as the first element of the array. This behaviour also happens when you pass an array as an argument:


const array = [1,2,3]

const formattedArray = Object.entries(array);

console.log(formattedArray);

// OUTPUT --> 
// [["0", 1], ["1", 2], ["2", 3]]

Note that for both of these cases the first element (the index) is a string.

Object.keys(anObject)

This object method accepts an object as an argument and returns an array containing the object’s keys as elements.


const programmingLangs = {
  'JavaScript': 'Brendan Eich', 
  'C': 'Dennis Ritchie',
  'Python': 'Guido van Rossum'
};

const langs = Object.keys(programmingLangs);

console.log(langs);

// OUTPUT -->
// ["JavaScript", "C", "Python"]

What about if we try and pass a string as the argument? Let’s take a look:


const string = 'Hallo';

const stringArray = Object.keys(string);

console.log(stringArray);

// OUTPUT -->
// ["0", "1", "2", "3", "4"]

In this case the string is also coerced into an object. Each letter represents the value and its index represents the key, so we are left with an array containing the indices of each letter in the string.

Object.values(anObject)

As you might expect, the Object.values() method works similarly to the method we just discussed, but instead of returning out an object’s keys in an array it returns out an object’s values in an array. Let’s use the programmingLangs example we saw previously:


const programmingLangs = {
  'JavaScript': 'Brendan Eich', 
  'C': 'Dennis Ritchie',
  'Python': 'Guido van Rossum'
};

const creators = Object.values(programmingLangs);

console.log(creators);

// OUTPUT -->
// ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"]

As we saw in the previous case of Object.entries() and Object.keys(), we can pass in other data types such as a string.


const string = 'Bonjour'

const stringArray = Object.values(string);

console.log(stringArray) 

// OUTPUT -->
// ["B", "o", "n", "j", "o", "u", "r"]

Object.fromEntries(anIterable)

Another super useful method for transforming data. You remember the Object.entries() method we saw earlier that turns an object into a 2-dimensional array? Well, Object.fromEntries() essentially does the opposite. It accepts an iterable as an argument, such as an array or a map, and returns an object. Let’s take a look:


const arrayTranslations = [
   ['french', 'bonjour'], 
   ['spanish', 'buenos dias'], 
   ['czech', 'dobry den']
];

const objectTranslations = Object.fromEntries(arrayTranslations);

console.log(objectTranslations);

// OUTPUT --> 
/* [object Object] {
  czech: "dobry den",
  french: "bonjour",
  spanish: "buenos dias"
} */

So our iterable, in this case the nested array stored as translations, is iterated through and each subarray transformed into an object with element at index 0 as the key and element at index 1 as the value. Handy!

Array.flat(optionalDepthArgument)

Useful when it comes to dealing with multi-dimensional arrays, the array method .flat() takes a given array and returns a flat array (1-dimensional by default) or an array of a specified depth (when the optionalDepthArgument is provided).

When no optionalDepthArgument is provided, the default depth is 1:


const numArray = [1, 2, [3,4]];

const flatArray = numArray.flat();

console.log(flatArray);

// OUTPUT -->
// [1, 2, 3, 4]

The following is an example where an optionalDepthArgument has been passed into the method:


const numArray = [1, 2, [[[3,4]]]];

const depthOf2Array = numArray.flat(2);

console.log(depthOf2Array);

// OUTPUT -->
// [1, 2, [3, 4]];

In the above snippet, we specified an optionalDepthArgument of 2 so our new array depthOf2Array is array with 2 ‘levels’. If you have a heavily nested array and want to return a one-dimensional array but you aren’t sure of the depth of the array, you can pass in the argument Infinity like so:


const nestedArray = [1, 2, [3, 4, [5, [6, 7]]]];

const oneDimensionalArray = nestedArray.flat(Infinity);

console.log(oneDimensionalArray); 

// OUTPUT -->
// [1, 2, 3, 4, 5, 6, 7, 8, 9]

Object Spread Operator `...`

You may have seen the spread syntax (…) in JavaScript before, however up until recently we could only use it with arrays. It’s a great method for cloning and merging arrays. As of ES2018, we can now harness this power to use with objects. The use cases of the object spread operator are the same as with the array spread operator; cloning and merging.

Let’s first take a look at how we’d use this operator to clone an object and add extra key-value pairs:


const bookAndAuthor = {
  'Gabriel Garcia Marquez': '100 Years of Solitude'
}

const moreBooksAndAuthors = {
  ...bookAndAuthor, 
  'Paolo Coelho' : 'The Alchemist'
}; 

console.log(moreBooksAndAuthors)

// OUTPUT -->
/* [object Object] {
  Gabriel Garcia Marquez: "100 Years of Solitude",
  Paolo Coelho: "The Alchemist"
}
*/

Here we’ve been able to very easily clone the original object and add more properties.

Importantly, using the object spread operator to copy an object with no nested data will create a new object in memory. This means that we can clone an object, change or add properties to the newly created object, but the original object will not be mutated. However, if we clone an object that contains nested data, the clone will be stored in a new place in memory, but the nested data will be passed by reference. This means that if we were to make changes to any nested data in one object, the same nested data in the second object would also change.

Now, let's see what happens when we use the object spread operator to merge objects:


const book1 = {
  'Milan Kundera': 'The Unbearable Lightness of Being'
}

const book2 = {
  'Bohumil Hrabal': 'I Served the King of England'
}

const books = {...book1, ...book2 }

console.log(books);

// OUTPUT --> 
/*
  [object Object] {
  Bohumil Hrabal: "I Served the King of England",
  Milan Kundera: "The Unbearable Lightness of Being"
}
*/

Here we have merged two object to create a new object. How easy was that?

Promise.finally() and Promise.allSettled()

Promise.finally(callbackFunction)

Promises in JavaScript are nothing new and have been around since ES6, but the Promise.finally() method is a newer addition to the async JavaScript toolbox. This method takes a callback function which is executed once the promise is settled, i.e. resolved or rejected. It is a good place to run code that relates to any clean up tasks.


const promise = new Promise((resolve, reject) => {
  let num = Math.floor(Math.random());

  if (num >= 0.5) {
    resolve('promise resolved')
  } else {
    reject('promise rejected')
  }
})

promise
  .then(value => console.log(value))
  .catch(error => console.log(error))
  .finally(() => console.log('promise has been settled'));

// OUTPUT -->
// 'promise resolved' / 'promise rejected' (depending on value of num)
// 'promise has been settled'

Regardless of whether the promise is resolved or rejected, the callback function in the Promise.finally() method will always be executed.

Promise.allSettled([promises])

An ES2020 addition to JavaScript, the Promise.allSettled() method accepts an array of promises and returns a new promise which only resolves once all promises in the array have been settled (resolved or rejected). Once resolved, the return value will be an array of objects, with each object describing the outcomes of the promises passed in the array.


const promise1 = new Promise((resolve, reject) => {
  resolve('I have been resolved')
}); 

const promise2 = new Promise((resolve, reject) => {
  reject('I have been rejected')
});

Promise.allSettled([promise1, promise2])
  .then(result => console.log(result))

// OUTPUT --> 
/*
[[object Object] {
  status: "fulfilled",
  value: "I have been resolved"
}, [object Object] {
  reason: "I have been rejected",
  status: "rejected"
}]
*/

In this example, on line 9 we declare Promise.allSettled() and we pass this method an array containing promise1 and promise2. On line 10, we chain a .then() method to Promise.allSettled() which instructs JavaScript to print out the resolved value of Promise.allSettled(). The output shows an array of objects has been returned. Each object represents the outcome of the promises passed as arguments to Promise.resolve() (in our case, promise1 and promise2). These objects have 2 properties; status, which evaluates to either fulfilled or rejected, and value, which evaluates to either rejected if the promise has been rejected, or the resolved value if the promise has been resolved.

BigInt

This handy data type is used to store integer values in a variable which are too large to be stored as a Number data type. You may or may not know that the JavaScript Number data type has limits on the size of integers it can store - the safe range is from -9007199254740991 -(253-1) up to 9007199254740991 +(253-1), so 15 digits. The introduction of this data type (which has a typeof value of “bigint”) allows us to work more easily with integers outside this range.

A few notes about using BigInt:

Arithmetic operators which work with the Number data type in JavaScript can also be used with BigInt, such as +, *, / etc.
BigInt cannot be used with decimals.
You cannot perform arithmetic operations between a BigInt data type and a Number data type.

There are 2 ways to declare a variable as a BigInt data type, using BigInt(number) or appending n to a number:


let hugeNumber = BigInt(9999999999999999);
let anotherHugeNumber = 7777777777777777n;

console.log(typeof hugeNumber);
console.log(typeof anotherHugeNumber);

// OUTPUT -->
// 'bigint'
// 'bigint'

Nullish Coalescing Operator and Optional Chaining

Arguably my most used features from this list.

Nullish Coalescing (`??`)

This logical operator takes two operands. If the left-hand side operand is null or undefined it will return the right-hand side operand. On the flip side, if the left-hand side operand is not null or undefined, it will return the left-hand side operand.

It’s similar to the logical Or operator (||), except the || operator returns the right-hand side based on whether the left-hand side is a falsy value (as opposed to just null or undefined). There will be some behavioural overlap between ?? and || as falsy values in JavaScript include null and undefined, but also 0, “” (empty string), Nan and, of course, false.

Let's see this in action:


const usingOr = undefined || 'Return me because undefined is a falsy value';

const usingOrAgain = 'Return me because I am NOT falsy' || 'I will not be returned'


const usingNullishCoalescing = undefined ?? 'Return me!';

const usingNullishCoalescingAgain = 'I will return because I am NOT null/undefined ' ?? 'I will not be returned';


console.log(usingOr)
console.log(usingOrAgain)
console.log(usingNullishCoalescing)
console.log(usingNullishCoalescingAgain)

// OUTPUT -->
// "Return me because undefined is a falsy value"
// "Return me because I am NOT falsy"
// "Return me!"
// "I will return because I am NOT null/undefined "

In terms of operator precedence, the Nullish Coalescing operator has the 5th lowest precedence, so bear this in mind when combing multiple operators. For more in-depth information about operator precedence you can check out this page.

Optional Chaining (`?.`)

This operator is used when accessing properties or methods of an object. It helps us avoid throwing errors if a property/method does not exist. Rather than an error, we receive undefined if no corresponding property/method is found.

For use with object properties we access the property with Object?.property rather than just Object.property.
For use with object methods we invoke the method with Object.method?.() rather than just Object.method().


const person = {
  name: 'Pippa',
  favouriteColour: 'green',

  sayHello() {
    return `${this.name} says hello`;
  }
}

// ?. with object properties 
const color = person?.favouriteColour;
const age = person?.age;

console.log(color);
console.log(age);

// ?. with object methods
console.log(person.sayHello?.());
console.log(person.sayGoodby?.());

// OUTPUT --> 
// "green"
// undefined
// "Pippa says hello"
// undefined

As you can see, both person.age and person.sayGoodbye() do not exist on the person object, but instead of receiving an error we get undefined returned to us.

Numeric Separator(`_`)

Let’s finish this list with an easy one. Numeric separators were introduced into JavaScript for readability when working with larger numbers. They allow you to ‘break down’ numbers into more easily digestible chunks, exactly like you would when using a comma (,) or point (.). We can separate larger numbers using the _ character (underscore).


const harderToReadNumber = 100000000
const easierToReadNumber = 100_000_000

// how much nicer is that to read?!

If you made it this far, thanks for reading! I hope that you’ve learnt something which will serve you well in future JavaScript projects.

All you need to know about asynchronous JavaScript

Pippa Thompson — Thu, 23 Feb 2023 17:10:19 +0000

If you have ever spent time in the JavaScript world you will probably have heard the phrase "JavaScript is a single threaded language". But what does that mean exactly? Put simply, it means that JavaScript executes code line by line in sequential order, and after each line has been executed there's not going back to it.

So what's the problem?

Imagine a situation where a user wants to display a list of comments on a website. They click a button to view the comments. However, while the comments are being fetched from a server (and let's say that the fetching takes a while), the user cannot interact with anything else on the website because JavaScript is busy executing the show comments functionality. In other words, all other code is blocked until JavaScript has completed this comment fetching task. Not very user friendly.

const name = ‘Pippa’;
const number = 100_000_000;
for (let i = 0; i <= number; i++) {
  console.log(i)    
}

console.log(`Hi, my name is ${name}`)

In this trivial example, a time consuming command (in this case, iterating through a large for loop) would block the final console.log() command for an undetermined amount of time. Nothing else can happen in the program while the for loop is running, and who knows how long that could take to complete.

The solution: enter asynchronous JavaScript.

Async JS is a technique (or rather, group of techniques) which enables your program to continue executing code while time consuming tasks are deferred. No, it's not magic, it is just a set of features of both JavaScript and the browser which when combined allow us to write non-blocking code. Let's start with the first, and probably most simple, method.

Callbacks: using the `setTimeout()` API

If you have read up on the JavaScript runtime environment (and if you've haven't you can do so here) this one should come as no surprise. The browser provides the event loop, the callback queue and the microtask queue. These features allow certain functionality to be deferred until all global code has been executed. setTimeout() (a browser API) takes a callback function and a time argument (minimum time in milliseconds to pass before invoking the callback) and pushes the callback function to the callback queue. The callback queue must wait for all other global code to run before anything in it can be pushed to the call stack (this is handled by the event loop), thus we can essentially call this function knowing that our global code will continue executing in the meantime.

console.log('first hello');

function fetchData() {
  setTimeout(() => {
    // functionality to make XHR request to fetch data from a server and log it to the console
  }, 1000)
}

fetchData();

console.log('second hello ')

// OUTPUT --> 
// 'first hello '
// 'second hello'
// '[ object Response ] {...}'

In the above example we start with console.log('first hello'). We then declare the function fetchData(). This function emulates making an XML/HTTP request, which is wrapped in the setTimeout() browser API. Once we call the fetchData() function, the setTimeout() starts a timer up in the browser with a time of 1000ms. The callback function wrapped inside the setTimeout() is sent to the callback queue where it will be waiting for at least 1000ms. Meanwhile JavaScript continues on to the second console.log('second hello'). Once the second console.log() is logged to the console and the callstack is clear of all global code, the fetchData() callback function is able to give us the response it received from the server. No code has been blocked and our data has been fetched!

Promises and the `fetch()` API

In this section we will look at promises in the context of using the fetch() API. It’s worth noting, however, this is not the only use case for promises. There's loads of great resources on promises out there such as this article.

With ES6 came the introduction of promises. In order to understand how they facilitate asynchronous code we need to take a closer look at their features and behaviour. Promises are just special objects that return a placeholder object until some asynchronous code has been resolved. Every promise has several properties including state, value, onFulfilled and onRejected.

State: represents current status of the promise object which can be one of three options: pending (the default), resolved or rejected.
Value: this is undefined by default, but will eventually evaluate to the response of the asynchronous task.
onFulfilled: an array containing functions to be run once the value property has been successfully resolved. We push functions into this array by using the .then() method. The callbacks in this array receive an argument which is the response of the fetch() call they are chained on to.
onRejected: an array containing functions to run if the promise is rejected, so essentially error handling functions. We push functions into this array by using the .catch() method. The callbacks in this array receive an argument which is the error received in the fetch() call they are chained on to.

Promises allowed for the creation of the modern XHR browser function known as fetch(). I would like to stress that that fetch() is a a feature of the browser, so it is not native to JavaScript even though it looks like a regular function. Once invoked, fetch has two main tasks; one is to return a placeholder object (a promise) and the other is to send an XML/HTTP request from the browser to a specified url.

Here’s the big reveal - any promise deferred functionality is sent to the microtask queue (separate from the callback queue, which has lower priority). The functionality in the microtask queue must wait until all global code has been executed until it can be pushed to the call stack. Thus, we can:

Run an asynchronous operation, i.e. fetching data from a server.
Execute all other global code meanwhile.
Trigger response related functionality from the onFulfilled array once all global code has been run and we’ve received a response from an asynchronous operation. Alternatively, if the promise rejects we can trigger error handling functionality from the onRejected array.


console.log('me first');

function fetchData() {
  fetch('https://dog.ceo/api/breeds/image/random')
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(error => console.log(error))
}

fetchData();

console.log('me second')

// OUTPUT --> 
// 'me first'
// 'me second'
// '[ object Object ] {...}'

And there you have it, asynchronous code which allows a more time intensive command to be run (in this case, the XHR functionality) without blocking the rest of the JavaScript code in the file.

Side note: there is also another promise array, similar to onFulfilled/onRejected, which allows us to run callbacks once the promise has been settled (either resolved or rejected). We push callbacks into this array using the .finally() method and it's useful for performing any clean up tasks.

Generator Functions and Async/Await

Generator functions are an ES6 feature of JavaScript. Up until now, we understand that once a line of JavaScript code has been executed it is gone for good - there’s no going back up to that line. However, the introduction of generator functions has changed this model. Generators are special types of functions marked with an asterisk. They use a very powerful keyword, yield. I like to think of the yield keyword as the return keyword with superpowers. Yield allows us to pause a generator function’s execution context, return out a value, but later re-enter that same function execution context! We re-enter the generator funtion's execution context by accessing the .next() method on the generator function. This can be quite tricky to wrap your head around, so let me show you an example:


function* myNumberGenerator() {
        yield 1
        yield 2
        yield 3
}

const returnNextNumber = myNumberGenerator();

const number1 = returnNextNumber.next().value; 
const number2 = returnNextNumber.next().value; 
const number3 = returnNextNumber.next().value;

console.log(number1);
console.log(number2);
console.log(number3);

// OUTPUT -->
// 1
// 2
// 3

On line 9 we are assigning the value of number1 to returnNextNumber.next().value. We established that .next() allows us to re-enter the function execution context, but we have not yet seen the .value syntax.
When we are kicked out of the generator function by the yield keyword, we know that we also receive a return value. However, what we actually get is an object with two properties; done (a boolean) and the value itself (in this case a number). In order to access just the value itself, we must use .value.
On line 10, we assign the variable number2 to the result of calling returnNextNumber.next().value, so number2 evaluates to 2. This is because we re-entered the generator function where we left off and once more encounter the yield keyword, this time with the value 2. The same pattern continues on line 11.

We know that once a normal function has been invoked, its execution context is automatically garbage collected, but here we are able to go back into the function and continue running it later on in the code. Cool, right? Let’s take a look at another example:


function* aGeneratorFunc() {
    const number = 10;
    const newNumber = yield number;
    yield 10 + newNumber;
    yield 20;
}

const returnNextElement = aGeneratorFunc();
const element1 = returnNextElement.next().value; // 10
const element2 = returnNextElement.next(2).value; // 12

// OUTPUT --> 
// 10
// 12

Wait, what… the number 12 was returned and not 20? Why? Because not only can we re-enter a function, we can re-enter the function and bring some new data with us.

The first time we call returnNextElement.next().value on line 9, yield number (line 3) threw us out of the function before it had time to assign the value of number to the variable newNumber. So, at this point newNumber is undefined. The next time we call returnNextElement.next(2).value (line 10) with 2 as an argument, we re-enter the function where we left off last time, i.e. on line 3 where we were just about to assign the value of newNumber. The argument we passed in, the number 2, is inserted where we left off, so newNumber evaluates to 2. We move to the next line yield 10 + newNumber, and we are thrown out of the function execution context along with the evaluation of 10 + newNumber, which as we now know is 2. Hence, we return out 12. If we were to re-enter the function once more and save returnNextElement.next().value to the variable element3, the value of element3 would be 20.

So now we understand how it’s possible to re-enter an execution context of a function, with additional data if we wish, but how does this link to async JS?

Introducing the ES7 feature async/await.

Async/Await is made possible due to generators (and promises). With this ability to re-enter a function later on in our code, we can start executing a more time consuming command (such as fetching data), continue on with the global code, and then re-enter the data-fetching function once the requested data has been returned and all global code has been run.

Async/await has a clean and simple syntax which requires you to place the async keyword before the function definition. The await keyword is used within the function scope, and commands JavaScript to pause the function execution until the result of the promise has been returned and continue on with the rest of the program code. After the global code has been run, JavaScript will return back into the function where it left off, by this time with a received response, and continue with the rest of the logic. Again, let’s take a look at an example:


async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
  const data = await response.json();
  console.log(data);
}

getData();

console.log('me first!');

// OUTPUT →
// 'me first!'
// [ object Promise ] {...}

Let’s break it down:

We declare an async function using the async keyword.
We use the await keyword to signal that a promise will be returned from the fetch call which enables us to break out of the function and return to it once the promise has been settled and global code has been run.
We call the getData() function, but the console.log() runs first because the fetching of API data has been deferred to the microtask queue.
JavaScript continues running the global code, then re-enters the getData() function once all global code has run and the response is available in getData(). It then continues executing the rest of the getData() function.

A note on error handling in async/await. In order to facilitate error handling in an async function, you can wrap the functionality in a try/catch statement. This gives you the option to run some code upon promise failure, essentially the same as using the .catch() method with fetch(). Using the same example we just saw, let’s see what it looks like using a try/catch statement:


async function getData(){

  try {
        const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
        const data = await response.json();
        console.log(data);
       } catch (error) {
        console.log(error)
    }
}

getData();

console.log('me first');


// OUTPUT→
// 'me first!'
// [ object Promise ] {...}

// if an error occurs when fetching the data, the output would be:
// ‘me first!’
// [ object Error ] {...}

And there you have it, asynchronous JavaScript. If you made it this far, thanks for reading! If you want to dive deeper into the topic there are loads of great resources out there, but I thoroughly recommend watching Will Sentence’s Hard Parts video courses available on Front End Masters.

JavaScript Runtime Explained: All you need to know about client-side JS code execution

Pippa Thompson — Mon, 13 Feb 2023 10:08:45 +0000

If, like me, you struggled to understand the concept of the JavaScript runtime, this article may help shed some light on this particular topic. Put simply, the JavaScript runtime is the environment that executes your JavaScript code. Although JavaScript can now be run on the server side (Node.js/Deno), today we will focus on the client side - running JavaScript in the browser.

The browser does not have the ability to understand JavaScript files. Instead, they must be parsed into executable commands. In order to do this, the browser uses a JavaScript engine, for instance Chrome uses the Google V8 engine. The specific engine depends on which browser you’re using. Here's a list of browser specific engines.

Components of the JS runtime

In the browser world, the JavaScript runtime environment is made up of the following:

Call Stack (part of the JS engine)

The call stack makes up part of the JS engine. As the name suggests, it’s a stack data structure which keeps track of which functions are running. This is emblematic of the single threaded nature of JavaScript as, being a stack, the call stack can only handle one function at a time. The call stack follows a last-in first-out principle. In order to facilitate asynchronous code, callback and microtasks queues are implemented (see below).

Memory Heap & Memory Stack (part of the JS engine)

Another piece of the JS engine is the memory heap/stack which is responsible for allocating space for any data in your JavaScript file. Depending on the type of data, the JS engine will allocate space in either the memory heap or the memory stack. The memory stack is reserved for static data, such as primitive values or references to objects/functions - data which the JavaScript engine knows the size of at compile time. On the other hand, the memory heap is where the objects and functions themselves are stored. At compile time, the JavaScript engine does not know the size of these pieces of data and will not find out until run time so the memory space allocation is more dynamic.

Web APIs (supplied by the browser)

Web APIs are separate from the JS engine, and are provided by the browser. To quote Will Sentance, they are “facade functions” which look like JS functions and which can be interacted with in your code, but they are not native to the JavaScript language. One example is the DOM API which allows you to interact with the HTML of the web page. Other examples include setTimeout(), fetch(), local storage interface and event listeners.

Callback Queue (supplied by the browser)

The callback queue takes care of executing callback functions in the correct order by pushing them to the call stack when their time comes. It operates on a first-in first-out basis. An example could be timer related functionality such as setTimeout() or setInterval().

Microtask Queue (supplied by the browser)

Similarly, the microtask queue also deals with sending callbacks to the call stack. What’s the difference? The microtask queue handles callback functions coming from promises, queueMicrotask() invocations and mutation observers. The microtask queue takes priority over the callback queue, so the callback queue will have to wait for the microtask queue to be empty before it can send anything to the call stack.

Event Loop (supplied by the browser)

The event loop is the middle man between the callback/microtask queues and the call stack. It keeps track of what is in the callback/microtask queue and sends the relevant function to the call stack. As mentioned above, it prioritises the microtask queue and will only send callback queue functionality to the call stack once the microtask queue is completely empty.

Now let's put it into practice...

setTimeout(() => {
    console.log('ahoj')
}, 0)

console.log('hola')

// OUTPUT --> 
// hola
// ahoj

In the snippet above, the console.log('hola') will be executed first because the setTimeout() function will be sent to the callback queue as it's utilising the timer from the Browser API. Even though the timer is set for 0 seconds, it waits for the call stack to be empty before triggering.

setTimeout(() => {
    console.log('ahoj')
}, 0)

Promise.resolve('hi').then(val => console.log(val))

console.log('hola')

// OUTPUT --> 
// hola
// hi
// ahoj

In this second example, as with the above, the console.log('hola') runs first. The promise comes second as this is sent to the microtask queue which takes precedence over the callback queue. Finally, the setTimeout() callback runs after the microtask is clear and the callback queue functions are pushed to the call stack by the event loop.

In the case of fetch() and setTimeout() you might get a different order to the one you were expecting. This is due to the fact that the microtask queue may be empty if it's still waiting for the response from the XHR request, meaning that a setTimeout() with a timer set to 0ms could potentially run first.

fetch('https://dog.ceo/api/breeds/image/random')
  .then(res => res.json())
  .then(data => console.log(data))

setTimeout(() => {
    console.log('ahoj')
}, 0)

// OUTPUT -->
// ahoj
// { Response Object }

Here's a great video summary of the topic