JavaScript Algebra (1)

In the following article published in early 2021, the concept of client-server isomorphism was proposed. However, that article only briefly touched upon the term, and the academic field of client-server isomorphism is still shrouded in mist. Therefore, in this JavaScript Algebra series, we will proceed with our learning with the ultimate goal of understanding client-server isomorphism.

https://zenn.dev/mizchi/articles/server-component

What is an Isomorphism?

What stands out in this term is the word "isomorphism." As the word "morphism" suggests, this is a mathematical term. Let's look it up in the Wikipedia article on "Isomorphism" (it would actually be better to consult specialized literature like math books, but for this series, we will proceed by referring to Wikipedia to keep things simple). According to Wikipedia:

In mathematics, an isomorphism is a homomorphism or morphism that can be reversed by an inverse morphism.

So, it seems that in order to understand the concept of isomorphism, we need the concepts of "homomorphism" or "morphism," and "inverse morphism." In this series, we will aim to conquer this from the homomorphism route.

Looking at the Definition of Homomorphism

Next, let's look at the article on "Homomorphism".

In algebra, a homomorphism is a structure-preserving map between two algebraic structures of the same type (such as two groups, two rings, or two vector spaces).

It sounds like a rather abstract explanation. This doesn't seem to be the formal definition. The definition is written a bit further down in the article.

Let $A$ be a set and $R$ be a collection of operations on $A$; the pair $(A, R)$ is called an algebraic system. A homomorphism $(f, F): (A, R) \to (B, S)$ between two algebraic systems of the same type $(A, R)$ and $(B, S)$ (where $R = \{\alpha_\lambda\}_{\lambda \in \Lambda}$ and $S = \{\beta_\lambda\}_{\lambda \in \Lambda}$) is a map $f: A \to B$ between the underlying sets that induces maps $f_\lambda$ making the corresponding operations $\alpha_\lambda$ and $\beta_\lambda$ of $R$ and $S$ commute (or compatible). That is:

${\displaystyle f\circ \alpha _{\lambda }=\beta _{\lambda }\circ f_{\lambda },\quad {\Bigg (}f_{\lambda }((x_{i})_{i\in I_{\lambda }}):=(f(x_{i}))_{i\in I_{\lambda }}{\Bigg )}}$

A pair of maps $(f, F)$ that satisfies this is called a homomorphism. Here, $\alpha_\lambda$ and $\beta_\lambda$ are assumed to be $|I_\lambda|$-ary operations. Usually, $(f, F): (A, R) \to (B, S)$ is simply abbreviated as a homomorphism $f: A \to B$.

This is clear, but a bit difficult. You don't need to understand it here. What's more noteworthy is that if you look closely at the first sentence, something called an "algebraic system" (or algebraic structure) appears, which seems to be prerequisite knowledge. It looks like we need to learn about that first.

What is an Algebraic System?

I'll quote the beginning of the Wikipedia article on "Algebraic Structure".

In mathematics, an algebraic structure (also called an algebraic system) consists of a non-empty set $A$ (called the underlying set, carrier set or domain), a collection of operations on $A$ (typically binary operations such as addition and multiplication), and a finite set of identities, called axioms, that these operations must satisfy.

The definition of an "algebraic system" is written in the last sentence. In other words, an algebraic system is a combination of a set and the operations defined on that set. In more casual terms, it can be called a "set where you can perform calculations."

There are countless examples of algebraic systems in the world of mathematics. For example, the set of integers $\mathbb{Z}$ combined with integer addition $(\mathbb{Z}, +)$ is an algebraic system (specifically, it forms an abelian group).

Since this article is titled with JavaScript, let's consider an example that might be more familiar to JavaScript users. Let $\mathrm{Arr}$ be the set of arrays (finite-length sequences), and consider the operation $++$ that concatenates arrays (corresponding to the concat method). In that case, $(\mathrm{Arr}, ++)$ is also an algebraic system (this belongs to a type of algebraic system called a monoid).

Examples of the $++$ operation on $\mathrm{Arr}$:

• $[1, 2, 3] ++ [4, 5] = [1, 2, 3, 4, 5]$
• $[3, 4] ++ [1] = [3, 4, 1]$
• $[] ++ [1, 2] = [1, 2]$

In short, if you decide on a set (in programmer terms, a target data type) and define operations for the elements of that set, it is an algebraic system. By the way, there can be two or more operations for a set. Rings are a representative example of algebraic systems (or classes thereof) that have multiple operations.

JavaScript Algebraic System

Now we have a rough idea of what an algebraic system is. With this, we have finally reached the starting point of this series.

In this series, as a foothold for considering client-server isomorphism, we will define a JavaScript Algebraic System and treat it as our object of study from now on.

In this series, we define a JavaScript Algebraic System as an algebraic system whose underlying set is a set of JavaScript AST nodes. The underlying set refers to the set targeted by the operations, like the $\mathrm{Arr}$ part of $(\mathrm{Arr}, ++)$.

Let's look at an example of a JavaScript algebraic system. We will call the set of all AST nodes representing JavaScript expressions Exp. Furthermore, let's define an operation $\mathrm{plus}: \mathrm{Exp} \times \mathrm{Exp} \to \mathrm{Exp}$. That is, this is a function that takes two given AST nodes and returns one AST node. Let $\mathrm{plus}(\mathrm{a}, \mathrm{b})$ represent the node of the expression obtained by joining a and b with the + operator (additive operator).

For example, let $f =$ "foo" and $b =$ "bar".repeat(3) (f and b are each AST nodes representing an expression; hereafter, we will simply call them "expressions"). If we let $s = \mathrm{plus}(f, b)$, then according to the definition above, $s =$ "foo" + "bar".repeat(3).

Additionally, we can consider something like the following as a one-argument function $\mathrm{toNum}: \mathrm{Exp} \to \mathrm{Exp}$.

• If the given expression is a numeric literal, return it as is.
• Otherwise, return an expression that calls the Number function with the given expression as an argument.

For example, toNum(foo) = Number(foo), toNum(1) = 1, toNum(3 + 0.14) = Number(3 + 0.14), and so on.

Summary

As the first part of the JavaScript Algebra series, I explained the purpose of learning JavaScript algebra and further defined a JavaScript Algebraic System. In the next part, we will learn about homomorphisms and consider homomorphisms in JavaScript algebraic systems.

See you in the next part.

Exercises

Using a suitable AST implementation (for example, @babel/parser), try actually implementing plus and toNum as they appeared in this article.