-
Notifications
You must be signed in to change notification settings - Fork 3
/
feed.json
1 lines (1 loc) · 264 KB
/
feed.json
1
{"title":"Blog of Kabir Shah","home_page_url":"https://blog.kabir.sh/","version":"https://jsonfeed.org/version/1","feed_url":"https://blog.kabir.sh/feed.json","items":[{"id":"https://blog.kabir.sh/optimal-virtual-dom.html","url":"https://blog.kabir.sh/optimal-virtual-dom.html","content_html":"<p class=\"s-x-i\">The virtual DOM is an idea that stems from functional programming in user interfaces. On every update new UI trees replace the current one. The problem arises, however, when this idea of an immutable, declarative view is applied in the browser.</p><p class=\"s-x-i\">The DOM is inherently imperative; it is updated through mutating method calls. A virtual DOM bridges the gap between declarative and imperative environments, accepting lightweight trees while mutating the DOM under the hood.</p><p class=\"s-x-i\">Still, a fast implementation of the virtual DOM can be a difficult task. As I've worked on <a href=\"https://kbrsh.github.io/moon\">Moon</a>, I've tried many different approaches to the diffing algorithm, with the most <a href=\"https://github.com/kbrsh/moon/commit/e7a7cd9ab427be89cb7efee70df86dfe0401d770\">recent revision</a> being explained here. It's good at benchmarks because it sticks to one principle: avoiding the DOM as much as possible.</p><p class=\"s-x-i\">There are many ways to approach a virtual DOM implementation, each building on top of the previous one to gain better performance.</p><h2 id=\"replace\" class=\"s-x-i\">Replace</h2><p class=\"s-x-i\">The simplest way of implementing a virtual DOM is based on replacing elements. A new element created from a virtual node replaces the old one.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code>node<span class=\"token punctuation\">.</span>parentNode<span class=\"token punctuation\">.</span><span class=\"token function\">replaceChild</span><span class=\"token punctuation\">(</span><span class=\"token function\">nodeFromVNode</span><span class=\"token punctuation\">(</span>vnode<span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> node<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">This is wasteful because the DOM was not designed for large numbers of element creation, preferring granular method calls instead.</p><h2 id=\"dom-diff\" class=\"s-x-i\">DOM Diff</h2><p class=\"s-x-i\">Transforming the DOM through a diff and patch between a virtual node and the DOM allows for more precise changes. For example, updating a <code class=\"s-b-2 p-x-2 p-y-2\">className</code> property may check against the current state of the DOM.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>node<span class=\"token punctuation\">.</span>className <span class=\"token operator\">!==</span> vnode<span class=\"token punctuation\">.</span>className<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> vnode<span class=\"token punctuation\">.</span>className<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Even so, <em>reading</em> the DOM is bad for performance. Virtual node object property access is much faster.</p><h2 id=\"virtual-dom-diff\" class=\"s-x-i\">Virtual DOM Diff</h2><p class=\"s-x-i\">Instead of diffing against the DOM, the previous virtual DOM can be stored and used instead.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>vnodeOld<span class=\"token punctuation\">.</span>className <span class=\"token operator\">!==</span> vnodeNew<span class=\"token punctuation\">.</span>className<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n node<span class=\"token punctuation\">.</span>className <span class=\"token operator\">=</span> vnodeNew<span class=\"token punctuation\">.</span>className<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Now, the DOM is accessed only when it is necessary — to modify it. However, when diffing against children, this means accessing <code class=\"s-b-2 p-x-2 p-y-2\">childNodes</code>:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><</span> length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> vchildOld <span class=\"token operator\">=</span> vnodeOld<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> vchildNew <span class=\"token operator\">=</span> vnodeNew<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>vchildOld <span class=\"token operator\">!==</span> vchildNew<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token comment\">// Assume that `diff` takes an old virtual node, new virtual node, and a</span>\n <span class=\"token comment\">// DOM element to patch.</span>\n <span class=\"token function\">diff</span><span class=\"token punctuation\">(</span>vchildOld<span class=\"token punctuation\">,</span> vchildNew<span class=\"token punctuation\">,</span> node<span class=\"token punctuation\">.</span>childNodes<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Even a loop using <code class=\"s-b-2 p-x-2 p-y-2\">firstChild</code> and <code class=\"s-b-2 p-x-2 p-y-2\">nextSibling</code> would still access the DOM on every iteration. This is slow. Moon gets around this by keeping track of children in a separate property on every DOM element called <code class=\"s-b-2 p-x-2 p-y-2\">MoonChildren</code>.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\"><</span> length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> vchildOld <span class=\"token operator\">=</span> vnodeOld<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> vchildNew <span class=\"token operator\">=</span> vnodeNew<span class=\"token punctuation\">.</span>children<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>vchildOld <span class=\"token operator\">!==</span> vchildNew<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">diff</span><span class=\"token punctuation\">(</span>vchildOld<span class=\"token punctuation\">,</span> vchildNew<span class=\"token punctuation\">,</span> node<span class=\"token punctuation\">.</span>MoonChildren<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><h2 id=\"conclusion\" class=\"s-x-i\">Conclusion</h2><p class=\"s-x-i\">A diff between virtual nodes, accessing the DOM only for modification, is the fastest approach to a virtual DOM. It avoids the DOM as much as possible, favoring plain JavaScript objects instead, making reading and writing much cheaper. Combined with using constructors for virtual nodes, storing events on DOM nodes, and using a purely functional design, Moon's view driver is faster than ever before.</p>","title":"Optimal Virtual DOM","date_published":"2019-12-06T08:00:00.000Z"},{"id":"https://blog.kabir.sh/inventing-monads.html","url":"https://blog.kabir.sh/inventing-monads.html","content_html":"<p class=\"s-x-i\">Monads are an esoteric concept to many, resulting in hundreds of tutorials, guides, and examples attempting to explain them. Curious developers might look into them only to find the classic answer, "Monads are monoids in the category of endofunctors". In the end, they're just another abstraction to help deal with repetitive patterns in functional code.</p><p class=\"s-x-i\">This guide will use JavaScript instead of a pure functional programming language (e.g. Haskell) to make things more approachable for developers accustomed to imperative languages. It will, however, assume you have basic knowledge of functional programming, including currying and lambdas.</p><p class=\"s-x-i\">Think of monads as a way to overload a semicolon. It might sound a little crazy at first, but imagine being able to override the semicolon to reduce boilerplate in specific code blocks. That's basically how monads are used in practice.</p><p class=\"s-x-i\">As a final note before we start, I am by no means an expert on this topic. I'm fifteen years old with good knowledge of mostly high school level math, and may have missed some parts. Monads are complex and closely tied with category theory, which is a very abstract and vast branch of mathematics that can be hard to grok. If I missed something, feel free to reach out and let me know — I'm always open to learning something new.</p><h2 id=\"blocks\" class=\"s-x-i\">Blocks</h2><p class=\"s-x-i\">First, many languages have a pattern that allows for creating a set of bindings and then a value based on it. In JavaScript, this is accomplished with a self-invoking function. They can also be transformed into a recursive structure of function calls with variable values. Being explicit about composing functions in this way can help clarify how exactly monads can modify the flow of a program.</p><p class=\"s-x-i\">For example, the following block of code:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> id <span class=\"token operator\">=</span> <span class=\"token function\">getId</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> user <span class=\"token operator\">=</span> <span class=\"token function\">getUser</span> <span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">getMiddleName</span> <span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">Can be represented as:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">id</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getUser</span><span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">user</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getMiddleName</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">It's a dense representation, but they are equivalent. Note that functions are called with a space between the name and opening parenthesis, this isn't common syntax but it's valid JavaScript. It's there to simulate "call by juxtaposition" syntax in languages like Haskell, where functions are called with <code class=\"s-b-2 p-x-2 p-y-2\">f x y z</code>. But instead of calling them like you normally would in JavaScript with <code class=\"s-b-2 p-x-2 p-y-2\">f(x)(y)(z)</code>, we call them with <code class=\"s-b-2 p-x-2 p-y-2\">f (x) (y) (z)</code>.</p><p class=\"s-x-i\">This functional version of blocks works by breaking them down into two parts:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> id <span class=\"token operator\">=</span> <span class=\"token function\">getId</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> user <span class=\"token operator\">=</span> <span class=\"token function\">getUser</span> <span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">getMiddleName</span> <span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">Instead of having everything in the same block, we define a "block" simply as a value based on a variable. In the outer block, the <code class=\"s-b-2 p-x-2 p-y-2\">id</code> is the variable, and the value is a function of the <code class=\"s-b-2 p-x-2 p-y-2\">id</code>. In this case, the value is another block, where <code class=\"s-b-2 p-x-2 p-y-2\">user</code> is the variable and the value is a function of the user.</p><h2 id=\"null-everywhere\" class=\"s-x-i\">Null Everywhere</h2><p class=\"s-x-i\">Revisiting the previous example, the code might look like this:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">id</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getUser</span><span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">user</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getMiddleName</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">It's clean enough, right? Now imagine if <code class=\"s-b-2 p-x-2 p-y-2\">id</code> could be <code class=\"s-b-2 p-x-2 p-y-2\">null</code>, <code class=\"s-b-2 p-x-2 p-y-2\">user</code> could be <code class=\"s-b-2 p-x-2 p-y-2\">null</code>, or <code class=\"s-b-2 p-x-2 p-y-2\">middleName</code> could be <code class=\"s-b-2 p-x-2 p-y-2\">null</code>. The utility functions will all end up looking like this:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token comment\">// Simulate the fetching of an ID.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getId</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> random <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">return</span> random <span class=\"token operator\"><</span> <span class=\"token number\">700</span> <span class=\"token operator\">?</span> random <span class=\"token punctuation\">:</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Simulate the fetching of a user.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getUser</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">id</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>id <span class=\"token operator\">===</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n first<span class=\"token punctuation\">:</span> <span class=\"token string\">\"John\"</span><span class=\"token punctuation\">,</span>\n last<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Doe\"</span><span class=\"token punctuation\">,</span>\n middle<span class=\"token punctuation\">:</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\"><</span> <span class=\"token number\">0.7</span> <span class=\"token operator\">?</span> <span class=\"token string\">\"Bob\"</span> <span class=\"token punctuation\">:</span> <span class=\"token keyword\">null</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Simulate the fetching of a middle name.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getMiddleName</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">user</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">.</span>middle <span class=\"token operator\">===</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> user<span class=\"token punctuation\">.</span>middle<span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">Every utility function has to check and handle <code class=\"s-b-2 p-x-2 p-y-2\">null</code> values, and has the possibility of returning <code class=\"s-b-2 p-x-2 p-y-2\">null</code> as well. But what if we checked for it automatically?</p><p class=\"s-x-i\">Once again, the functional version of the block would look like this:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">id</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getUser</span><span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">user</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getMiddleName</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">Looking at this, we can find a pattern: every <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> takes a nullable value as input and applies it to a function. This function always returns another nullable value, and by extension <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> needs to also return a nullable value because it may be used within the function itself. Instead of handling <code class=\"s-b-2 p-x-2 p-y-2\">null</code> within each function, <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> can handle it.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> x <span class=\"token operator\">===</span> <span class=\"token keyword\">null</span> <span class=\"token operator\">?</span> <span class=\"token keyword\">null</span> <span class=\"token punctuation\">:</span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">Since the inputs can be <code class=\"s-b-2 p-x-2 p-y-2\">null</code>, it checks and returns <code class=\"s-b-2 p-x-2 p-y-2\">null</code> whenever the input is <code class=\"s-b-2 p-x-2 p-y-2\">null</code>. If not, it passes <code class=\"s-b-2 p-x-2 p-y-2\">x</code> to the function. It treats the function as a black box that can return anything, but assumes that it takes a non-null value as input. Since <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> itself will have a nullable value as input, it handles the <code class=\"s-b-2 p-x-2 p-y-2\">null</code> case and then passes any real values into the function. Now, the full the code will look like this:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token comment\">// Simulate the fetching of an ID.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getId</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> random <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">return</span> random <span class=\"token operator\"><</span> <span class=\"token number\">700</span> <span class=\"token operator\">?</span> random <span class=\"token punctuation\">:</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Simulate the fetching of a user.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getUser</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">id</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n first<span class=\"token punctuation\">:</span> <span class=\"token string\">\"John\"</span><span class=\"token punctuation\">,</span>\n last<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Doe\"</span><span class=\"token punctuation\">,</span>\n middle<span class=\"token punctuation\">:</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\"><</span> <span class=\"token number\">0.7</span> <span class=\"token operator\">?</span> <span class=\"token string\">\"Bob\"</span> <span class=\"token punctuation\">:</span> <span class=\"token keyword\">null</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Simulate the fetching of a middle name.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getMiddleName</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">user</span> <span class=\"token operator\">=></span> user<span class=\"token punctuation\">.</span>middle<span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Get the middle name, if it exists.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> x <span class=\"token operator\">===</span> <span class=\"token keyword\">null</span> <span class=\"token operator\">?</span> <span class=\"token keyword\">null</span> <span class=\"token punctuation\">:</span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">id</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getUser</span><span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">user</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getMiddleName</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>middleName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// 49% => \"Bob\", 51% => null</span></code></pre><h2 id=\"logging\" class=\"s-x-i\">Logging</h2><p class=\"s-x-i\">Keeping the same example, let's say we want to keep track of log messages. In a functional language, you can't modify a global variable to keep track of all of the messages. Instead, each function can return an output along with a log message.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getId</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span><span class=\"token number\">7</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Got an id of 7.\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getUser</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">id</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n first<span class=\"token punctuation\">:</span> <span class=\"token string\">\"John\"</span><span class=\"token punctuation\">,</span>\n last<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Doe\"</span><span class=\"token punctuation\">,</span>\n middle<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Bob\"</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> id<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> <span class=\"token string\">\" Got a user with name John Bob Doe.\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getMiddleName</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">user</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span>user<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span>middle<span class=\"token punctuation\">,</span> user<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> <span class=\"token string\">\" Got the middle name of a user.\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">id</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getUser</span><span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">user</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getMiddleName</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">This is messy, and we had to modify the utility functions in order to handle the incoming array input. Instead, we can change the <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> function to propagate the log for us. In this case, the inputs to <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> always have the structure of <code class=\"s-b-2 p-x-2 p-y-2\">[output, log]</code>. However, we want the function <code class=\"s-b-2 p-x-2 p-y-2\">f</code> to only receive the output. Unlike the previous example, we will now assume that <code class=\"s-b-2 p-x-2 p-y-2\">f</code> returns the same <code class=\"s-b-2 p-x-2 p-y-2\">[output, log]</code> pair. Since <code class=\"s-b-2 p-x-2 p-y-2\">f</code> can return the output of <em>another</em> <code class=\"s-b-2 p-x-2 p-y-2\">apply</code>, we need to return the same type from <code class=\"s-b-2 p-x-2 p-y-2\">apply</code>.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> result <span class=\"token operator\">=</span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>result<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> x<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> <span class=\"token string\">\" \"</span> <span class=\"token operator\">+</span> result<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">Since everything has the same array type, we take it as an input. Instead of passing the log to the function though, we only pass the output of the value <code class=\"s-b-2 p-x-2 p-y-2\">x[0]</code> to the function <code class=\"s-b-2 p-x-2 p-y-2\">f</code>. We assume that this function will return its own output and log. Since this function can return the output of <code class=\"s-b-2 p-x-2 p-y-2\">apply</code>, we return a new pair with the function output along with the combined logs.</p><p class=\"s-x-i\">The full code will then be much simpler, and doesn't include anything related to the previous log message in the utility functions:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token comment\">// Get various data from a user.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getId</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span><span class=\"token number\">7</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Got an id of 7.\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getUser</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">id</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">{</span>\n first<span class=\"token punctuation\">:</span> <span class=\"token string\">\"John\"</span><span class=\"token punctuation\">,</span>\n last<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Doe\"</span><span class=\"token punctuation\">,</span>\n middle<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Bob\"</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Got a user with name John Bob Doe.\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getMiddleName</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">user</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span>user<span class=\"token punctuation\">.</span>middle<span class=\"token punctuation\">,</span> <span class=\"token string\">\"Got the middle name of a user.\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Get the middle name along with logs.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> result <span class=\"token operator\">=</span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>result<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> x<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> <span class=\"token string\">\" \"</span> <span class=\"token operator\">+</span> result<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> middleName <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getId</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">id</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getUser</span><span class=\"token punctuation\">(</span>id<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">user</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getMiddleName</span><span class=\"token punctuation\">(</span>user<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>middleName<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// => [\"Bob\", \"Got an id of 7. Got a user with name John Bob Doe. Got the middle name of a user.\"]</span></code></pre><h2 id=\"global-environment\" class=\"s-x-i\">Global Environment</h2><p class=\"s-x-i\">Let's say we have a global object fetched from somewhere, and it holds data for a user.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token number\">7</span><span class=\"token punctuation\">,</span>\n first<span class=\"token punctuation\">:</span> <span class=\"token string\">\"John\"</span><span class=\"token punctuation\">,</span>\n last<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Doe\"</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Along with that, we have a calculation based on this environment.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getInitials</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> environment<span class=\"token punctuation\">.</span>first<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> environment<span class=\"token punctuation\">.</span>last<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getName</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">initials</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>initials<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>environment<span class=\"token punctuation\">.</span>first<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>environment<span class=\"token punctuation\">.</span>last<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getIdentity</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">name</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> environment<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token string\">\" \"</span> <span class=\"token operator\">+</span> name<span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> identity <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getInitials</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">initials</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getName</span> <span class=\"token punctuation\">(</span>initials<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getIdentity</span> <span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">In this case, every single function requires the <code class=\"s-b-2 p-x-2 p-y-2\">environment</code> as an input. What if we made that implicit?</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getInitials</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> environment<span class=\"token punctuation\">.</span>first<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> environment<span class=\"token punctuation\">.</span>last<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getName</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">initials</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span><span class=\"token function\">initials</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>environment<span class=\"token punctuation\">.</span>first<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>environment<span class=\"token punctuation\">.</span>last<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getIdentity</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">name</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> environment<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token string\">\" \"</span> <span class=\"token operator\">+</span> <span class=\"token function\">name</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> identity <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span>getInitials<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">initials</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getName</span> <span class=\"token punctuation\">(</span>initials<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getIdentity</span> <span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">It looks nicer, but the utility functions had to change. They now have to call their first argument with the environment in order to get their true value. However, <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> can make some assumptions in this case. It can assume that every input is a <em>function of the environment</em>, and every function takes a value and returns another function of the environment.</p><p class=\"s-x-i\">We can solve this problem using <code class=\"s-b-2 p-x-2 p-y-2\">apply</code>. Every input <code class=\"s-b-2 p-x-2 p-y-2\">x</code> is a function of the environment, but it would be nice if given function <code class=\"s-b-2 p-x-2 p-y-2\">f</code> could expect the <em>output</em> of <code class=\"s-b-2 p-x-2 p-y-2\">x</code>. How can we get the output out of <code class=\"s-b-2 p-x-2 p-y-2\">x</code>? We need to pass it the environment, so we can return a <em>new function</em> that depends on the environment and calls <code class=\"s-b-2 p-x-2 p-y-2\">x</code>. Now it can pass the output to <code class=\"s-b-2 p-x-2 p-y-2\">f</code> as it expects. Since <code class=\"s-b-2 p-x-2 p-y-2\">f</code> is also a function of the environment, we can call it with our given environment and finally return the result.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span><span class=\"token function\">x</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">It's a little confusing, but <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> uses the assumptions to its advantage. First of all, it returns a function of the environment. This function applies the environment to the input <code class=\"s-b-2 p-x-2 p-y-2\">x</code>, and passes it to <code class=\"s-b-2 p-x-2 p-y-2\">f</code>. Since we assume <code class=\"s-b-2 p-x-2 p-y-2\">f</code> returns another function of the environment, we apply it with the given environment <em>again</em> and return its output.</p><p class=\"s-x-i\">With that, the final code looks like:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token comment\">// Utility functions to return calculations based on an environment.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getInitials</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> environment<span class=\"token punctuation\">.</span>first<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> environment<span class=\"token punctuation\">.</span>last<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getName</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">initials</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>initials<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>environment<span class=\"token punctuation\">.</span>first<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token string\"> </span><span class=\"token interpolation\"><span class=\"token interpolation-punctuation punctuation\">${</span>environment<span class=\"token punctuation\">.</span>last<span class=\"token interpolation-punctuation punctuation\">}</span></span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getIdentity</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">name</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> environment<span class=\"token punctuation\">.</span>id<span class=\"token punctuation\">.</span><span class=\"token function\">toString</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">+</span> <span class=\"token string\">\" \"</span> <span class=\"token operator\">+</span> name<span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Get the identity of the environment user.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">environment</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span><span class=\"token function\">x</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>environment<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> identity <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span>getInitials<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">initials</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span><span class=\"token function\">getName</span> <span class=\"token punctuation\">(</span>initials<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getIdentity</span> <span class=\"token punctuation\">(</span>name<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Since `identity` is a function of an environment, we can pass it any environment.</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token function\">identity</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n id<span class=\"token punctuation\">:</span> <span class=\"token number\">7</span><span class=\"token punctuation\">,</span>\n first<span class=\"token punctuation\">:</span> <span class=\"token string\">\"John\"</span><span class=\"token punctuation\">,</span>\n last<span class=\"token punctuation\">:</span> <span class=\"token string\">\"Doe\"</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// => 7 JD John Doe</span></code></pre><h2 id=\"passing-state\" class=\"s-x-i\">Passing State</h2><p class=\"s-x-i\">Let's say we have a state for holding the seed of a random number generator.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token number\">7</span></code></pre><p class=\"s-x-i\">In pure functional languages, there is no concept of mutation, only pure functions. However, for things like random number generation, there is often a seed that is kept track of as state. It needs to be sent around so that the next number and seed can be generated from it. We can write a block like this:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getRandom</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">state</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> result <span class=\"token operator\">=</span> <span class=\"token number\">7</span> <span class=\"token operator\">*</span> state <span class=\"token operator\">+</span> <span class=\"token number\">7</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>result <span class=\"token operator\">%</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> result<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getSum</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">y</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">state</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> xResult <span class=\"token operator\">=</span> <span class=\"token function\">x</span> <span class=\"token punctuation\">(</span>state<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">const</span> yResult <span class=\"token operator\">=</span> <span class=\"token function\">y</span> <span class=\"token punctuation\">(</span>xResult<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>xResult<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> yResult<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> yResult<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> sum <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span>getRandom<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">random1</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span>getRandom<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">random2</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getSum</span> <span class=\"token punctuation\">(</span>random1<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>random2<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">In this example, every value is a function of state that returns and output along with new state. It's not the best code though, because <code class=\"s-b-2 p-x-2 p-y-2\">getSum</code> has to call both of its arguments with the state in order to get their value, then it has to correctly manage the latest state and return it.</p><p class=\"s-x-i\">However, <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> can assume that every input is a <em>function of state that returns output and new state</em>. It can also assume that the function takes only an output value and returns another function of state.</p><p class=\"s-x-i\">Using these assumptions, it would be nice if the function <code class=\"s-b-2 p-x-2 p-y-2\">f</code> could expect only the output portion of <code class=\"s-b-2 p-x-2 p-y-2\">x</code>'s return value. To get <code class=\"s-b-2 p-x-2 p-y-2\">x</code>'s output, we need to call it with the state, so we can return a new function of state. Within this function, we can pass <code class=\"s-b-2 p-x-2 p-y-2\">x</code> the state and get an output along with new state. Now we can supply <code class=\"s-b-2 p-x-2 p-y-2\">f</code> the output, and since <code class=\"s-b-2 p-x-2 p-y-2\">f</code> returns a function of state, we can call it again with the new state returned by <code class=\"s-b-2 p-x-2 p-y-2\">x</code>. Finally, we can return this result.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">state</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> result <span class=\"token operator\">=</span> <span class=\"token function\">x</span> <span class=\"token punctuation\">(</span>state<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>result<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>result<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">It's elegant, but dense. Since the output of the given function is assumed to be another function of state, <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> starts by returning a new function of state. This function calls the input <code class=\"s-b-2 p-x-2 p-y-2\">x</code> with the state to get an output along with new state. It passes the output to <code class=\"s-b-2 p-x-2 p-y-2\">f</code>, which expects just the output of <code class=\"s-b-2 p-x-2 p-y-2\">x</code> as its input. Since <code class=\"s-b-2 p-x-2 p-y-2\">f</code> returns another function of state, it calls it again with the new state returned by <code class=\"s-b-2 p-x-2 p-y-2\">x</code>.</p><p class=\"s-x-i\">The full code looks like:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token comment\">// Utility functions for number manipulation.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getRandom</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">state</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> result <span class=\"token operator\">=</span> <span class=\"token number\">7</span> <span class=\"token operator\">*</span> state <span class=\"token operator\">+</span> <span class=\"token number\">7</span><span class=\"token punctuation\">;</span>\n console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Random number: \"</span> <span class=\"token operator\">+</span> <span class=\"token punctuation\">(</span>result <span class=\"token operator\">%</span> <span class=\"token number\">100</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Log random numbers for debugging.</span>\n <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>result <span class=\"token operator\">%</span> <span class=\"token number\">100</span><span class=\"token punctuation\">,</span> result<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">getSum</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">y</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">state</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">[</span>x <span class=\"token operator\">+</span> y<span class=\"token punctuation\">,</span> state<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token comment\">// Generate the sum of two random numbers.</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">apply</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">f</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">state</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">const</span> result <span class=\"token operator\">=</span> <span class=\"token function\">x</span> <span class=\"token punctuation\">(</span>state<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">f</span> <span class=\"token punctuation\">(</span>result<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>result<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> sum <span class=\"token operator\">=</span> <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span>getRandom<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">random1</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">apply</span> <span class=\"token punctuation\">(</span>getRandom<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">random2</span> <span class=\"token operator\">=></span>\n <span class=\"token function\">getSum</span> <span class=\"token punctuation\">(</span>random1<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">(</span>random2<span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token function\">sum</span> <span class=\"token punctuation\">(</span><span class=\"token number\">7</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token comment\">// => Random number: 56</span>\n<span class=\"token comment\">// => Random number: 99</span>\n<span class=\"token comment\">// => [155, 399]</span></code></pre><h2 id=\"conclusion\" class=\"s-x-i\">Conclusion</h2><p class=\"s-x-i\">You'll notice how I didn't mention monads throughout the examples. That's because the code was just written using a natural abstraction, and that abstraction was the <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> function, which applied functions that made up do-blocks in special ways. The truth is, we just implemented four different monads:</p><ol>\n<li><p class=\"s-x-i\">Null Everywhere - <code class=\"s-b-2 p-x-2 p-y-2\">Maybe</code> Monad - Assumed <code class=\"s-b-2 p-x-2 p-y-2\">x: nullable</code> and <code class=\"s-b-2 p-x-2 p-y-2\">f: nullable -> any</code></p></li><li><p class=\"s-x-i\">Logging - <code class=\"s-b-2 p-x-2 p-y-2\">Writer</code> Monad - Assumed <code class=\"s-b-2 p-x-2 p-y-2\">x: [any, string]</code> and <code class=\"s-b-2 p-x-2 p-y-2\">f: any -> [any, string]</code></p></li><li><p class=\"s-x-i\">Global Environment - <code class=\"s-b-2 p-x-2 p-y-2\">Reader</code> Monad - Assumed <code class=\"s-b-2 p-x-2 p-y-2\">x: environment -> any</code> and <code class=\"s-b-2 p-x-2 p-y-2\">f: any -> environment -> any</code></p></li><li><p class=\"s-x-i\">Passing State - <code class=\"s-b-2 p-x-2 p-y-2\">State</code> Monad - Assumed <code class=\"s-b-2 p-x-2 p-y-2\">x: state -> [any, state]</code> and <code class=\"s-b-2 p-x-2 p-y-2\">f: any -> state -> [any, state]</code></p></li></ol>\n<p class=\"s-x-i\">The monad itself is a triple of a type constructor, a type converter, and a type combinator.</p><p class=\"s-x-i\">The type constructor is just a way of defining the type of value that stayed constant throughout the do-blocks. For example, the <code class=\"s-b-2 p-x-2 p-y-2\">Maybe</code> monad type constructor returns <code class=\"s-b-2 p-x-2 p-y-2\">T | null</code>, and the <code class=\"s-b-2 p-x-2 p-y-2\">State</code> monad type constructor returns <code class=\"s-b-2 p-x-2 p-y-2\">state -> [output, state]</code>.</p><p class=\"s-x-i\">The type converter is a way of creating a "unit" value of the type. For example, the <code class=\"s-b-2 p-x-2 p-y-2\">Writer</code> monad type converter is <code class=\"s-b-2 p-x-2 p-y-2\">const unit = x => [x, ""]</code>. It wraps any value within a <code class=\"s-b-2 p-x-2 p-y-2\">Writer</code> type that includes the value along with an empty log. We didn't cover these much to reduce the complexity of getting started.</p><p class=\"s-x-i\">The type combinator is another name for our <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> function, with a signature of <code class=\"s-b-2 p-x-2 p-y-2\">m -> (any -> m) -> m</code>. It basically means that it accepts an input with the type constructor of a monad and a function that returns the same type. Using these two, it returns an output with the same type. This is commonly named <code class=\"s-b-2 p-x-2 p-y-2\">bind</code>.</p><p class=\"s-x-i\">Together, the three of these form a monad. Think of it like this: a do-block can be split into recursive <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> calls. If we make assumptions that every input is a certain type, then <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> can transform the input before applying it to the function. If we make assumptions that the function outputs a certain type, then <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> can transform the output of the function to combine it with the original input. Basically, it can return whatever it wants using the given input and function. To make this even more useful, <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> can return the same type that it assumes the function will return. This allows the function to use <code class=\"s-b-2 p-x-2 p-y-2\">apply</code> within itself.</p><p class=\"s-x-i\">Some other great resources on monads include:</p><ul>\n<li><p class=\"s-x-i\"><a href=\"http://blog.sigfpe.com/2006/08/you-could-have-invented-monads-and.html\">You Could Have Invented Monads! (And Maybe You Already Have.)</a></p></li><li><p class=\"s-x-i\"><a href=\"http://adit.io/posts/2013-04-17-functors,_applicatives,_and_monads_in_pictures.html\">Functors, Applicatives, And Monads In Pictures</a></p></li><li><p class=\"s-x-i\"><a href=\"http://adit.io/posts/2013-06-10-three-useful-monads.html\">Three Useful Monads</a></p></li><li><p class=\"s-x-i\"><a href=\"https://en.wikipedia.org/wiki/Monad_(functional_programming)\">Monad (functional programming)</a></p></li></ul>\n<p class=\"s-x-i\">In the end, the monad is just an abstraction that has access to the inner workings of block expressions, giving it control over how things flow from input to function.</p>","title":"Inventing Monads","date_published":"2019-08-01T07:00:00.000Z"},{"id":"https://blog.kabir.sh/interval-map.html","url":"https://blog.kabir.sh/interval-map.html","content_html":"<p class=\"s-x-i\">Many programs require a mathematical function capable of mapping an interval of numbers linearly onto another interval. A <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><annotation encoding=\"application/x-tex\">\\mathit{map}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span></span></span></span> function maps one interval linearly onto another.</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>x</mi><mo stretchy=\"false\">)</mo><mo>:</mo><mo stretchy=\"false\">[</mo><mi>a</mi><mo separator=\"true\">,</mo><mi>b</mi><mo stretchy=\"false\">]</mo><mo>→</mo><mo stretchy=\"false\">[</mo><mi>c</mi><mo separator=\"true\">,</mo><mi>d</mi><mo stretchy=\"false\">]</mo><mspace linebreak=\"newline\"></mspace><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>x</mi><mo stretchy=\"false\">)</mo><mo>=</mo><mfrac><mrow><mi>d</mi><mo>−</mo><mi>c</mi></mrow><mrow><mi>b</mi><mo>−</mo><mi>a</mi></mrow></mfrac><mo stretchy=\"false\">(</mo><mi>x</mi><mo>−</mo><mi>a</mi><mo stretchy=\"false\">)</mo><mo>+</mo><mi>c</mi></mrow><annotation encoding=\"application/x-tex\">\\mathit{map}(x):[a,b]\\to[c,d] \\\\\n\\mathit{map}(x) = \\frac{d - c}{b - a}(x - a) + c</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">:</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mopen\">[</span><span class=\"mord mathdefault\">a</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">b</span><span class=\"mclose\">]</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">→</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mopen\">[</span><span class=\"mord mathdefault\">c</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mclose\">]</span></span><span class=\"mspace newline\"></span><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:2.14077em;vertical-align:-0.7693300000000001em;\"></span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.37144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">b</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.7693300000000001em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.43056em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span></span><h2 id=\"example\" class=\"s-x-i\">Example</h2><p class=\"s-x-i\">The interval <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mo stretchy=\"false\">[</mo><mn>0</mn><mo separator=\"true\">,</mo><mn>10</mn><mo stretchy=\"false\">]</mo></mrow><annotation encoding=\"application/x-tex\">[0, 10]</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mopen\">[</span><span class=\"mord\">0</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord\">1</span><span class=\"mord\">0</span><span class=\"mclose\">]</span></span></span></span> can be mapped to <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mo stretchy=\"false\">[</mo><mn>0</mn><mo separator=\"true\">,</mo><mn>100</mn><mo stretchy=\"false\">]</mo></mrow><annotation encoding=\"application/x-tex\">[0, 100]</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mopen\">[</span><span class=\"mord\">0</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord\">1</span><span class=\"mord\">0</span><span class=\"mord\">0</span><span class=\"mclose\">]</span></span></span></span> using <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><annotation encoding=\"application/x-tex\">\\mathit{map}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span></span></span></span>.</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mtable rowspacing=\"0.24999999999999992em\" columnalign=\"right left\" columnspacing=\"0em\"><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>x</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mn>10</mn><mi>x</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mn>0</mn><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mn>0</mn></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mn>10</mn><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mn>100</mn></mrow></mstyle></mtd></mtr></mtable><annotation encoding=\"application/x-tex\">\\begin{aligned}\n \\mathit{map}(x) & = 10x \\\\\n \\\\\n \\mathit{map}(0) & = 0 \\\\\n \\mathit{map}(10) & = 100\n\\end{aligned}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:6.000000000000001em;vertical-align:-2.750000000000001em;\"></span><span class=\"mord\"><span class=\"mtable\"><span class=\"col-align-r\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:3.25em;\"><span style=\"top:-5.41em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mclose\">)</span></span></span><span style=\"top:-3.91em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"></span></span><span style=\"top:-2.4099999999999993em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord\">0</span><span class=\"mclose\">)</span></span></span><span style=\"top:-0.9099999999999997em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord\">1</span><span class=\"mord\">0</span><span class=\"mclose\">)</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.7500000000000004em;\"><span></span></span></span></span></span><span class=\"col-align-l\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:3.25em;\"><span style=\"top:-5.41em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord\">1</span><span class=\"mord\">0</span><span class=\"mord mathdefault\">x</span></span></span><span style=\"top:-2.4099999999999993em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord\">0</span></span></span><span style=\"top:-0.9099999999999993em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord\">1</span><span class=\"mord\">0</span><span class=\"mord\">0</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.750000000000001em;\"><span></span></span></span></span></span></span></span></span></span></span></span><h2 id=\"derivation\" class=\"s-x-i\">Derivation</h2><p class=\"s-x-i\">The <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><annotation encoding=\"application/x-tex\">\\mathit{map}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span></span></span></span> function can be thought of as a linear function that passes through the points <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mo stretchy=\"false\">(</mo><mi>a</mi><mo separator=\"true\">,</mo><mi>c</mi><mo stretchy=\"false\">)</mo></mrow><annotation encoding=\"application/x-tex\">(a,c)</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">a</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">c</span><span class=\"mclose\">)</span></span></span></span> and <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mo stretchy=\"false\">(</mo><mi>b</mi><mo separator=\"true\">,</mo><mi>d</mi><mo stretchy=\"false\">)</mo></mrow><annotation encoding=\"application/x-tex\">(b,d)</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">b</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mclose\">)</span></span></span></span>. This means that the function should map <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>a</mi></mrow><annotation encoding=\"application/x-tex\">a</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.43056em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">a</span></span></span></span> to <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>c</mi></mrow><annotation encoding=\"application/x-tex\">c</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.43056em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span> and <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>b</mi></mrow><annotation encoding=\"application/x-tex\">b</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">b</span></span></span></span> to <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>d</mi></mrow><annotation encoding=\"application/x-tex\">d</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span>.</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mtable rowspacing=\"0.24999999999999992em\" columnalign=\"right left\" columnspacing=\"0em\"><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>a</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mi>c</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>b</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mi>d</mi></mrow></mstyle></mtd></mtr></mtable><annotation encoding=\"application/x-tex\">\\begin{aligned}\n \\mathit{map}(a) & = c \\\\\n \\mathit{map}(b) & = d\n\\end{aligned}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:3.0000000000000004em;vertical-align:-1.2500000000000002em;\"></span><span class=\"mord\"><span class=\"mtable\"><span class=\"col-align-r\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.7500000000000002em;\"><span style=\"top:-3.91em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span></span></span><span style=\"top:-2.41em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">b</span><span class=\"mclose\">)</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.2500000000000002em;\"><span></span></span></span></span></span><span class=\"col-align-l\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.7500000000000002em;\"><span style=\"top:-3.91em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord mathdefault\">c</span></span></span><span style=\"top:-2.41em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.2500000000000002em;\"><span></span></span></span></span></span></span></span></span></span></span></span><p class=\"s-x-i\">With two points the slope can be obtained and the function can be written and simplified.</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mtable rowspacing=\"0.24999999999999992em\" columnalign=\"right left\" columnspacing=\"0em\"><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>x</mi><mo stretchy=\"false\">)</mo><mo>−</mo><mi>c</mi></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mfrac><mrow><mi>d</mi><mo>−</mo><mi>c</mi></mrow><mrow><mi>b</mi><mo>−</mo><mi>a</mi></mrow></mfrac><mo stretchy=\"false\">(</mo><mi>x</mi><mo>−</mo><mi>a</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>x</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mfrac><mrow><mi>d</mi><mo>−</mo><mi>c</mi></mrow><mrow><mi>b</mi><mo>−</mo><mi>a</mi></mrow></mfrac><mo stretchy=\"false\">(</mo><mi>x</mi><mo>−</mo><mi>a</mi><mo stretchy=\"false\">)</mo><mo>+</mo><mi>c</mi></mrow></mstyle></mtd></mtr></mtable><annotation encoding=\"application/x-tex\">\\begin{aligned}\n \\mathit{map}(x) - c & = \\frac{d - c}{b - a}(x - a) \\\\\n \\mathit{map}(x) & = \\frac{d - c}{b - a}(x - a) + c\n\\end{aligned}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:4.881540000000001em;vertical-align:-2.190770000000001em;\"></span><span class=\"mord\"><span class=\"mtable\"><span class=\"col-align-r\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.69077em;\"><span style=\"top:-4.69077em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span><span style=\"top:-2.249999999999999em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mclose\">)</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.190770000000001em;\"><span></span></span></span></span></span><span class=\"col-align-l\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.69077em;\"><span style=\"top:-4.69077em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.37144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">b</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.7693300000000001em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span></span></span><span style=\"top:-2.249999999999999em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.37144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">b</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.7693300000000001em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">x</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.190770000000001em;\"><span></span></span></span></span></span></span></span></span></span></span></span><p class=\"s-x-i\">The function can be verified to ensure a correct mapping of <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>a</mi></mrow><annotation encoding=\"application/x-tex\">a</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.43056em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">a</span></span></span></span> to <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>c</mi></mrow><annotation encoding=\"application/x-tex\">c</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.43056em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span>.</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mtable rowspacing=\"0.24999999999999992em\" columnalign=\"right left\" columnspacing=\"0em\"><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>a</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mfrac><mrow><mi>d</mi><mo>−</mo><mi>c</mi></mrow><mrow><mi>b</mi><mo>−</mo><mi>a</mi></mrow></mfrac><mo stretchy=\"false\">(</mo><mi>a</mi><mo>−</mo><mi>a</mi><mo stretchy=\"false\">)</mo><mo>+</mo><mi>c</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>a</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mi>c</mi></mrow></mstyle></mtd></mtr></mtable><annotation encoding=\"application/x-tex\">\\begin{aligned}\n \\mathit{map}(a) &= \\frac{d - c}{b - a}(a - a) + c \\\\\n \\mathit{map}(a) &= c\n\\end{aligned}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:3.9407700000000006em;vertical-align:-1.7203850000000003em;\"></span><span class=\"mord\"><span class=\"mtable\"><span class=\"col-align-r\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.2203850000000003em;\"><span style=\"top:-4.220385em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span></span></span><span style=\"top:-2.3110549999999996em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.7203850000000003em;\"><span></span></span></span></span></span><span class=\"col-align-l\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.2203850000000003em;\"><span style=\"top:-4.220385em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.37144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">b</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.7693300000000001em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">a</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span><span style=\"top:-2.3110549999999996em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.7203850000000003em;\"><span></span></span></span></span></span></span></span></span></span></span></span><p class=\"s-x-i\">The same can be done to ensure <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>b</mi></mrow><annotation encoding=\"application/x-tex\">b</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">b</span></span></span></span> maps to <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>d</mi></mrow><annotation encoding=\"application/x-tex\">d</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span>.</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mtable rowspacing=\"0.24999999999999992em\" columnalign=\"right left\" columnspacing=\"0em\"><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>b</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mfrac><mrow><mi>d</mi><mo>−</mo><mi>c</mi></mrow><mrow><mi>b</mi><mo>−</mo><mi>a</mi></mrow></mfrac><mo stretchy=\"false\">(</mo><mi>b</mi><mo>−</mo><mi>a</mi><mo stretchy=\"false\">)</mo><mo>+</mo><mi>c</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>b</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mi>d</mi><mo>−</mo><mi>c</mi><mo>+</mo><mi>c</mi></mrow></mstyle></mtd></mtr><mtr><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow><mi>m</mi><mi>a</mi><mi>p</mi></mrow><mo stretchy=\"false\">(</mo><mi>b</mi><mo stretchy=\"false\">)</mo></mrow></mstyle></mtd><mtd><mstyle scriptlevel=\"0\" displaystyle=\"true\"><mrow><mrow></mrow><mo>=</mo><mi>d</mi></mrow></mstyle></mtd></mtr></mtable><annotation encoding=\"application/x-tex\">\\begin{aligned}\n \\mathit{map}(b) &= \\frac{d - c}{b - a}(b - a) + c \\\\\n \\mathit{map}(b) &= d - c + c \\\\\n \\mathit{map}(b) &= d\n\\end{aligned}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:5.4407700000000006em;vertical-align:-2.4703850000000003em;\"></span><span class=\"mord\"><span class=\"mtable\"><span class=\"col-align-r\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.9703850000000003em;\"><span style=\"top:-4.970385em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">b</span><span class=\"mclose\">)</span></span></span><span style=\"top:-3.0610549999999996em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">b</span><span class=\"mclose\">)</span></span></span><span style=\"top:-1.5610549999999996em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"><span class=\"mord mathit\">m</span><span class=\"mord mathit\">a</span><span class=\"mord mathit\">p</span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">b</span><span class=\"mclose\">)</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.4703850000000003em;\"><span></span></span></span></span></span><span class=\"col-align-l\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.9703850000000003em;\"><span style=\"top:-4.970385em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.37144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">b</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.7693300000000001em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">b</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">a</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span><span style=\"top:-3.0610549999999996em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">+</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mord mathdefault\">c</span></span></span><span style=\"top:-1.5610549999999996em;\"><span class=\"pstrut\" style=\"height:3.3714399999999998em;\"></span><span class=\"mord\"><span class=\"mord\"></span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.4703850000000003em;\"><span></span></span></span></span></span></span></span></span></span></span></span>","title":"Interval Map","date_published":"2018-01-21T08:00:00.000Z"},{"id":"https://blog.kabir.sh/template-optimizations.html","url":"https://blog.kabir.sh/template-optimizations.html","content_html":"<p class=\"s-x-i\">The majority of JavaScript libraries/frameworks use either templates or JSX to define a view. Templates allow for a well-defined structure, using a special syntax for binding data to the view. JSX allows for JavaScript to be used anywhere in the template, which adds a lot of power but can result in repetitive code.</p><p class=\"s-x-i\"><a href=\"http://moonjs.ga\">Moon</a> is a 7kb library with syntax inspired by Vue. Both Moon and Vue use a template system (although JSX can be used with Vue as well). To implement the template syntax, they have compilers that optimize the templates in different ways.</p><h2 id=\"virtual-dom\" class=\"s-x-i\">Virtual DOM</h2><p class=\"s-x-i\">In the end, a compiler has the job of converting the template syntax into a function that can return a virtual DOM tree.</p><p class=\"s-x-i\">The virtual DOM is essentially a representation of the DOM as a set of objects. This lightweight representation is important because it can be implemented as a function of the current state. Every time data in an app is updated, an entirely new version of the virtual DOM can be generated and compared with the current version.</p><p class=\"s-x-i\">While the virtual DOM is lightweight, creating the whole tree for every render can use a lot of memory and impact performance. That is why it is important for compilers to be able to optimize templates and reuse static virtual nodes, as they do not need to be recreated on every render.</p><p class=\"s-x-i\">The virtual DOM consists of virtual nodes, which look something like:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">{</span>\n type<span class=\"token punctuation\">:</span> <span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Type of element</span>\n props<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Properties (attributes, directives, DOM properties),</span>\n data<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Internal data (SVG utilities, event listeners)</span>\n children<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span> <span class=\"token comment\">// Children virtual nodes</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Moon and Vue both compare a new virtual DOM with the old one, and update the DOM with a minimum amount of transformations. They also both have different ways of creating the virtual DOM.</p><p class=\"s-x-i\">Both provide a function to create virtual nodes. These functions are responsible for transforming a set of arguments into an object containing all of the required data for the current state of the view.</p><p class=\"s-x-i\">In Vue, a developer-friendly function is used to define a virtual DOM tree. This function is extremely flexible and can accept a variety of arguments with multiple types. This flexibility requires a normalization step at runtime.</p><p class=\"s-x-i\">For example:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token function\">_c</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span>\n <span class=\"token string\">\"Text\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span>FooComponent<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n props<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n bar<span class=\"token punctuation\">:</span> <span class=\"token string\">\"baz\"</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">The virtual DOM utilities in Moon are more verbose and require fewer checks at runtime. Moon can allow this syntax because the compiler is meant to generate the normalized code rather than a developer.</p><p class=\"s-x-i\">For example:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Text\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">\"Foo\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n props<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n bar<span class=\"token punctuation\">:</span> <span class=\"token string\">\"baz\"</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><p class=\"s-x-i\">Both Moon and Vue have ways of detecting static elements at compile time. On top of that, Moon optimizes static directives and attributes.</p><p class=\"s-x-i\">Moon optimizes by hoisting virtual DOM nodes. Instead of returning a new virtual DOM node with a function call, static virtual nodes are cached and reused every time. When comparing this virtual DOM with the actual DOM, Moon skips static nodes because they have the same reference.</p><p class=\"s-x-i\">It has a recursive method to detect static nodes. When a parent element is composed of all static children, the parent will be hoisted out of the render function, rather than the children.</p><h2 id=\"static-elements\" class=\"s-x-i\">Static Elements</h2><p class=\"s-x-i\">Moon and Vue both detect a completely static template, and optimize by hoisting the whole virtual DOM tree out of the render function.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>h1</span><span class=\"token punctuation\">></span></span>Static Heading<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>h1</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token function\">_m</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span> <span class=\"token function\">anonymous</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Static Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_m</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">In this case, the function <code class=\"s-b-2 p-x-2 p-y-2\">_m(0)</code> is created, and it returns a tree used in the render function.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>h1</span><span class=\"token punctuation\">></span></span>Static Heading<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>h1</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">m</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> instance <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes<span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>staticNodes <span class=\"token operator\">===</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token comment\">// Static root element</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Static Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">return</span> staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Cached root element</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">The most significant difference here is the prelude of the function. At the start of every render function, Moon inserts a declaration of the static nodes of that instance.</p><p class=\"s-x-i\">First, this part checks if the <code class=\"s-b-2 p-x-2 p-y-2\">instance.compiledRender.staticNodes</code> array exists. If it doesn't, then Moon declares all of the static nodes in it. This initial step only happens <em>once</em>, and the static nodes will be reused on every subsequent render.</p><p class=\"s-x-i\">In this case, Moon marks the outer <code class=\"s-b-2 p-x-2 p-y-2\">div</code> as static and creates it once. After the initial creation, it will always return the same virtual node from <code class=\"s-b-2 p-x-2 p-y-2\">staticNodes[0]</code>.</p><h2 id=\"nested-elements\" class=\"s-x-i\">Nested Elements</h2><p class=\"s-x-i\">When nesting multiple elements, it is important for the compiler to hoist all of the static elements out of the render function, while only creating new nodes for the dynamic parts.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token punctuation\">></span></span>Static<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token punctuation\">></span></span>Dynamic {{foo}}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token function\">_m</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">:</span> <span class=\"token keyword\">function</span> <span class=\"token function\">anonymous</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Static\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_m</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Dynamic \"</span> <span class=\"token operator\">+</span> <span class=\"token function\">_s</span><span class=\"token punctuation\">(</span>foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Vue optimizes the <code class=\"s-b-2 p-x-2 p-y-2\">div</code> containing the static paragraph by hoisting it out of the render function into <code class=\"s-b-2 p-x-2 p-y-2\">_m(0)</code>.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token punctuation\">></span></span>Static<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token punctuation\">></span></span>Dynamic {{foo}}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">m</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> instance <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> foo <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"foo\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>staticNodes <span class=\"token operator\">===</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Static\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// Static div</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">return</span> <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Cached div</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Dynamic \"</span> <span class=\"token operator\">+</span> foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Moon does the same optimization by hoisting the <code class=\"s-b-2 p-x-2 p-y-2\">div</code> containing the static paragraph out of the render function.</p><h2 id=\"dynamic-properties\" class=\"s-x-i\">Dynamic Properties</h2><p class=\"s-x-i\">Surprisingly, when given a dynamic property, Vue ignores any static elements inside of the parent element. On the other hand, Moon detects the static element and hoists it out of the render function.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>h1</span><span class=\"token punctuation\">></span></span>Static Heading<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>h1</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token punctuation\">></span></span>Dynamic Paragraph: {{foo}}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Static Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Dynamic Paragraph: \"</span> <span class=\"token operator\">+</span> <span class=\"token function\">_s</span><span class=\"token punctuation\">(</span>foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">In this case, Vue did not optimize the static heading, and a new virtual node is being created and returned every time.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>h1</span><span class=\"token punctuation\">></span></span>Static Heading<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>h1</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span><span class=\"token punctuation\">></span></span>Dynamic Paragraph: {{foo}}<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">m</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> instance <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> foo <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"foo\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>staticNodes <span class=\"token operator\">===</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Static Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// Static heading</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">return</span> <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Cached heading</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Dynamic Paragraph: \"</span> <span class=\"token operator\">+</span> foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">In this case, Moon detects the static <code class=\"s-b-2 p-x-2 p-y-2\">h1</code> and hoists it out of the render function. After this, it is cached and referenced as <code class=\"s-b-2 p-x-2 p-y-2\">staticNodes[0]</code>, allowing Moon to skip it when rendering.</p><h2 id=\"dynamic-attributes\" class=\"s-x-i\">Dynamic Attributes</h2><p class=\"s-x-i\">When given dynamic attributes, Vue does not optimize static elements. In contrast, Moon optimizes the static children elements.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>h1</span><span class=\"token punctuation\">></span></span>Static Heading<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>h1</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-bind:</span>foo</span><span class=\"token attr-value\"><span class=\"token operator\">=</span><span class=\"token string\">\"foo\"</span></span><span class=\"token punctuation\">></span></span>Dynamic Paragraph<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Static Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span> foo<span class=\"token punctuation\">:</span> foo <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Dynamic Paragraph\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Here Vue does not optimize the static <code class=\"s-b-2 p-x-2 p-y-2\">h1</code> element or the static paragraph text element.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>h1</span><span class=\"token punctuation\">></span></span>Static Heading<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>h1</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\"><span class=\"token namespace\">m-literal:</span>foo</span><span class=\"token attr-value\"><span class=\"token operator\">=</span><span class=\"token string\">\"foo\"</span></span><span class=\"token punctuation\">></span></span>Dynamic Paragraph<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">m</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> instance <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> foo <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"foo\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>staticNodes <span class=\"token operator\">===</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Dynamic Paragraph\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Static paragraph text</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"h1\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Static Heading\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// Static heading</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">return</span> <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Cached heading</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> attrs<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span> foo<span class=\"token punctuation\">:</span> foo <span class=\"token punctuation\">}</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// Cached text</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Moon detects the static text of the paragraph and the static <code class=\"s-b-2 p-x-2 p-y-2\">h1</code> node. It hoists both elements out of the render function. When updating the DOM, these elements will be skipped because they have the same reference.</p><h2 id=\"conditionals\" class=\"s-x-i\">Conditionals</h2><p class=\"s-x-i\">When conditionally rendering elements, Vue does not optimize the conditional elements at all. Moon detects static elements and hoists them out of the render function. Also, when given a static condition (although unlikely), Moon will hoist the whole condition out of the render function.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\">v-if</span><span class=\"token attr-value\"><span class=\"token operator\">=</span><span class=\"token string\">\"fooCondition\"</span></span><span class=\"token punctuation\">></span></span>Condition True<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\">v-else</span><span class=\"token punctuation\">></span></span>Condition False<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n fooCondition\n <span class=\"token operator\">?</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Condition True\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">:</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">_v</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Condition False\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Vue does not optimize by hoisting the static paragraphs and will recreate them on every render depending on <code class=\"s-b-2 p-x-2 p-y-2\">fooCondition</code>.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\">m-if</span><span class=\"token attr-value\"><span class=\"token operator\">=</span><span class=\"token string\">\"fooCondition\"</span></span><span class=\"token punctuation\">></span></span>Condition True<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>p</span> <span class=\"token attr-name\">m-else</span><span class=\"token punctuation\">></span></span>Condition False<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>p</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">m</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> instance <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> fooCondition <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span><span class=\"token function\">get</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"fooCondition\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>staticNodes <span class=\"token operator\">===</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Condition True\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token comment\">// Static paragraph</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"p\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"#text\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Condition False\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// Static paragraph</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token comment\">// Cached paragraphs</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>fooCondition <span class=\"token operator\">?</span> staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span> <span class=\"token punctuation\">:</span> staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">Moon marks both paragraphs as static and hoists them out of the function in <code class=\"s-b-2 p-x-2 p-y-2\">staticNodes[0]</code> and <code class=\"s-b-2 p-x-2 p-y-2\">staticNodes[1]</code>. The function returns the same paragraphs whenever the condition is evaluated.</p><h2 id=\"events\" class=\"s-x-i\">Events</h2><p class=\"s-x-i\">Lastly, Vue does not optimize on static events with <code class=\"s-b-2 p-x-2 p-y-2\">on</code>. This is likely done because methods and data in Vue are mutable, and they can change at any time. On the contrary, methods in Moon are immutable, and Moon's compiler can optimize them as a result.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>button</span> <span class=\"token attr-name\"><span class=\"token namespace\">v-on:</span>click</span><span class=\"token attr-value\"><span class=\"token operator\">=</span><span class=\"token string\">\"fooMethod\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>button</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">with</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">return</span> <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">_c</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"button\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n on<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n click<span class=\"token punctuation\">:</span> fooMethod\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">On each render, new virtual nodes for the <code class=\"s-b-2 p-x-2 p-y-2\">div</code> and the <code class=\"s-b-2 p-x-2 p-y-2\">button</code> will be created, and Vue will update the event listeners if they changed.</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>div</span><span class=\"token punctuation\">></span></span>\n <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"><</span>button</span> <span class=\"token attr-name\"><span class=\"token namespace\">m-on:</span>click</span><span class=\"token attr-value\"><span class=\"token operator\">=</span><span class=\"token string\">\"fooMethod\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>button</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\"></</span>div</span><span class=\"token punctuation\">></span></span></code></pre><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">function</span> <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">m</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token keyword\">var</span> instance <span class=\"token operator\">=</span> <span class=\"token keyword\">this</span><span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes<span class=\"token punctuation\">;</span>\n <span class=\"token keyword\">var</span> fooMethod <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>methods<span class=\"token punctuation\">[</span><span class=\"token string\">\"fooMethod\"</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n\n <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>staticNodes <span class=\"token operator\">===</span> <span class=\"token keyword\">undefined</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n staticNodes <span class=\"token operator\">=</span> instance<span class=\"token punctuation\">.</span>compiledRender<span class=\"token punctuation\">.</span>staticNodes <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"div\"</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span> <span class=\"token comment\">// Static root element</span>\n <span class=\"token function\">m</span><span class=\"token punctuation\">(</span>\n <span class=\"token string\">\"button\"</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n events<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n click<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token keyword\">function</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">event</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n <span class=\"token function\">fooMethod</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n <span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n\n <span class=\"token keyword\">return</span> staticNodes<span class=\"token punctuation\">[</span><span class=\"token number\">0</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span> <span class=\"token comment\">// Cached root element</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">After analyzing this template, Moon detected the static root element and hoisted it out of the render function. Whenever the app is rendered, the same outer <code class=\"s-b-2 p-x-2 p-y-2\">div</code> will be returned every time from <code class=\"s-b-2 p-x-2 p-y-2\">staticNodes[0]</code>.</p><h2 id=\"conclusion\" class=\"s-x-i\">Conclusion</h2><p class=\"s-x-i\">In the end, Vue only optimizes in a few test cases, in which there were static elements inside of a static parent element. However, Moon detected many of the static elements and hoisted them out of the render function so that the static virtual nodes could be reused. This also allows for the virtual DOM engine to skip over static elements because they have the same reference on every render.</p>","title":"Template Optimizations","date_published":"2017-10-28T07:00:00.000Z"},{"id":"https://blog.kabir.sh/identifying-ideas.html","url":"https://blog.kabir.sh/identifying-ideas.html","content_html":"<p class=\"s-x-i\">Your perspective on problems is critical. Instead of treating a problem as an obstacle, it is important to treat it as an opportunity instead.</p><p class=\"s-x-i\">People often try to come up with ideas by creating solutions <em>first</em> and then seeing what problems it solves <em>after</em>. This process is the <em>opposite</em> of how to find a plausible idea.</p><p class=\"s-x-i\">A while ago, I began working on a web application. The code became extremely bloated, and the user interface was painfully slow. Instead of viewing this as an obstacle, I saw it as an opportunity. I set out to create a minimal, blazing fast user interface library that worked for me, and it turned into <a href=\"https://kbrsh.github.io/moon\">Moon</a>.</p><p class=\"s-x-i\">It may seem like you can't find a problem with your daily life. That's because you need to change your perspective on things. A problem often won't be hard to find. Excellent ideas are always hiding in <em>plain sight</em>.</p><p class=\"s-x-i\">These unique ideas are ones that solve a problem that a lot of people have. In hindsight, these are the types of ideas that seem the most obvious.</p><p class=\"s-x-i\">Many creators automate tasks that they regularly encounter every day (especially developers). Attempt to find what's missing from your daily life. If there is a repetitive task that you frequently find yourself running into, ask yourself — <em>Can I automate this?</em></p><p class=\"s-x-i\">Be aware of your surroundings. Instead of just dealing with the reality of something annoying you, <em>notice it as an opportunity</em>. Most will overlook any inefficiencies in what they do. Instead, it's crucial to see how the current situation can be improved.</p><p class=\"s-x-i\">Question everything about the world.</p><ul>\n<li><p class=\"s-x-i\"><em>Why is this done like that?</em></p></li><li><p class=\"s-x-i\"><em>Why does this have to be so inefficient?</em></p></li><li><p class=\"s-x-i\"><em>Why is this step necessary?</em></p></li></ul>\n<p class=\"s-x-i\">After asking enough questions like this, your brain will begin to do it automatically. You'll notice more and more problems about your life. A constant stream of ideas will start to flow through your head.</p><p class=\"s-x-i\">A problem might seem too small to solve, but it usually isn't. A "little" problem can often be expanded or marketed to a select group of people. Don't dismiss an idea just because it seems like it only applies to you; there are almost always more individuals with the same problem.</p><p class=\"s-x-i\">After you've found the problem, analyze it. There are multiple questions that you should ask yourself.</p><ul>\n<li><p class=\"s-x-i\"><em>Is there already a solution? Can it be improved?</em></p></li><li><p class=\"s-x-i\"><em>How can it be more efficient?</em></p></li><li><p class=\"s-x-i\"><em>How can a product help solve this?</em></p></li><li><p class=\"s-x-i\"><em>What makes this problem worthy of addressing?</em></p></li></ul>\n<p class=\"s-x-i\">Once you start to answer these questions, you'll naturally find a solution to the problem. Your perspective of the problem changed, and it is now an opportunity for a product.</p><p class=\"s-x-i\">After you have a relevant problem along with a solution, <em>write it down</em>. Having the solution to a problem means that you have an idea, and you should always write these down <em>no matter what</em>.</p><p class=\"s-x-i\">Keeping track of your problems and possible solutions can help you find inspiration for even more ideas. On top of that, you'll be able to pick and choose what problem you want to solve and when you want to build it.</p><p class=\"s-x-i\">Find problems you face and turn them into an opportunity. An idea should contribute to improving lives by solving a meaningful problem that you are passionate about addressing.</p>","title":"Identifying Ideas","date_published":"2017-09-30T07:00:00.000Z"},{"id":"https://blog.kabir.sh/inside-wade.html","url":"https://blog.kabir.sh/inside-wade.html","content_html":"<p class=\"s-x-i\"><a href=\"https://github.com/kbrsh/wade\">Wade</a> is a 1kb Javascript search library. It allows you to search for a query through a set of documents. This query is processed, split into keywords, and then searched within an index structure.</p><h2 id=\"api\" class=\"s-x-i\">API</h2><p class=\"s-x-i\">The API is extremely minimal and self-explanatory. It looks like:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token keyword\">const</span> search <span class=\"token operator\">=</span> <span class=\"token function\">Wade</span><span class=\"token punctuation\">(</span>\n <span class=\"token punctuation\">[</span><span class=\"token string\">\"Moon is fast!\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Also Slash!\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Spark too!\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Is Wade fast?\"</span><span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token function\">search</span><span class=\"token punctuation\">(</span><span class=\"token string\">\"Moon\"</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span></code></pre><h2 id=\"processor\" class=\"s-x-i\">Processor</h2><p class=\"s-x-i\">Wade processes all documents and queries. This works by moving each item through a separate processing function. These do the following operations:</p><ul>\n<li><p class=\"s-x-i\">Make everything lowercase.\nThis helps with searching. All queries and data are made lowercase, resulting in the search being case-insensitive.</p></li><li><p class=\"s-x-i\">Remove punctuation.\nPunctuation is usually irrelevant to the search query and does not need to be searched for.</p></li><li><p class=\"s-x-i\">Remove stop words.\nWade has a list of stop words that are removed from all data and queries. Stop words are extra words that have little meaning or can apply to any item in the data, and removing them allows for more relevant results to be returned. These can be configured through <code class=\"s-b-2 p-x-2 p-y-2\">Wade.config.stopWords</code>.</p></li></ul>\n<p class=\"s-x-i\">For example, when given the data:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">[</span><span class=\"token string\">\"Moon is fast!\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Slash is fast also!\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Spark is fast too!\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Is Wade fast?\"</span><span class=\"token punctuation\">]</span></code></pre><p class=\"s-x-i\">It is processed into:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">[</span><span class=\"token string\">\"moon fast\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"slash fast\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"spark fast\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"wade fast\"</span><span class=\"token punctuation\">]</span></code></pre><p class=\"s-x-i\">Notice how everything is lowercase, does not contain punctuation, and does not contain stop words.</p><h2 id=\"index\" class=\"s-x-i\">Index</h2><p class=\"s-x-i\">After processing the data, an index can be generated to allow for optimized searches within a text. This index can be generated by:</p><ol>\n<li><p class=\"s-x-i\">Processing each document.</p></li><li><p class=\"s-x-i\">Splitting each document into a multiset of terms.</p></li><li><p class=\"s-x-i\">Generating a trie of the terms and storing the indexes of the corresponding documents containing the term.</p></li><li><p class=\"s-x-i\">Storing the weighted significance of the term in the documents.</p></li></ol>\n<p class=\"s-x-i\">A <em>set</em> is used to store multiple unique items. The <em>cardinality</em> of a set represents the amount of elements in the set.</p><p class=\"s-x-i\">On the other hand, a <em>multiset</em> is used to store multiple items (including duplicates). The <em>multiplicity</em> of an item in a multiset is the number of instances of that item in the multiset.</p><p class=\"s-x-i\">Wade uses a special function to find how significant a term is to the data. This function takes various factors into account, including the length of the documents, the length of a specific document with the term, and the number of occurrences of the term.</p><p class=\"s-x-i\">The significance of the term <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>t</mi></mrow><annotation encoding=\"application/x-tex\">t</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.61508em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">t</span></span></span></span> in the set of documents <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>d</mi></mrow><annotation encoding=\"application/x-tex\">d</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span> can be represented by the function:</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>w</mi><mi>m</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo separator=\"true\">,</mo><mi>d</mi><mo stretchy=\"false\">)</mo><mo>=</mo><mn>1.5</mn><mo>−</mo><mfrac><mrow><munderover><mo>∑</mo><mrow><mi>i</mi><mo>=</mo><mn>0</mn></mrow><mrow><mi mathvariant=\"normal\">∣</mi><mi>d</mi><mi mathvariant=\"normal\">∣</mi></mrow></munderover><mo stretchy=\"false\">[</mo><mfrac><mrow><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo stretchy=\"false\">)</mo></mrow><mrow><munder><mo>∑</mo><mrow><mi>p</mi><mo>∈</mo><msub><mi>d</mi><mi>i</mi></msub></mrow></munder><mo stretchy=\"false\">(</mo><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>p</mi><mo stretchy=\"false\">)</mo><mo stretchy=\"false\">)</mo></mrow></mfrac><mo stretchy=\"false\">]</mo></mrow><mrow><mi mathvariant=\"normal\">∣</mi><mi>d</mi><mi mathvariant=\"normal\">∣</mi></mrow></mfrac></mrow><annotation encoding=\"application/x-tex\">wm(t, d) = 1.5 - \\frac{\\sum_{i=0}^{|d|} [\\frac{\\mu(t)}{\\sum_{p \\in d_i}(\\mu(p))}]}{|d|}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.02691em;\">w</span><span class=\"mord mathdefault\">m</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.72777em;vertical-align:-0.08333em;\"></span><span class=\"mord\">1</span><span class=\"mord\">.</span><span class=\"mord\">5</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">−</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:3.081267em;vertical-align:-0.936em;\"></span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:2.145267em;\"><span style=\"top:-2.3419em;\"><span class=\"pstrut\" style=\"height:3.0279em;\"></span><span class=\"mord\"><span class=\"mord\">∣</span><span class=\"mord mathdefault\">d</span><span class=\"mord\">∣</span></span></span><span style=\"top:-3.2579em;\"><span class=\"pstrut\" style=\"height:3.0279em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-4.145267em;\"><span class=\"pstrut\" style=\"height:3.0279em;\"></span><span class=\"mord\"><span class=\"mop\"><span class=\"mop op-symbol small-op\" style=\"position:relative;top:-0.0000050000000000050004em;\">∑</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.0278999999999998em;\"><span style=\"top:-2.40029em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">i</span><span class=\"mrel mtight\">=</span><span class=\"mord mtight\">0</span></span></span></span><span style=\"top:-3.2029em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mtight\">∣</span><span class=\"mord mathdefault mtight\">d</span><span class=\"mord mtight\">∣</span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.29971000000000003em;\"><span></span></span></span></span></span></span><span class=\"mopen\">[</span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.01em;\"><span style=\"top:-2.655em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mop mtight\"><span class=\"mop op-symbol small-op mtight\" style=\"position:relative;top:-0.0000050000000000050004em;\">∑</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.1745899999999999em;\"><span style=\"top:-2.1785614285714288em;margin-left:0em;margin-right:0.07142857142857144em;\"><span class=\"pstrut\" style=\"height:2.5em;\"></span><span class=\"sizing reset-size3 size1 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">p</span><span class=\"mrel mtight\">∈</span><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.3448em;\"><span style=\"top:-2.3448em;margin-left:0em;margin-right:0.1em;\"><span class=\"pstrut\" style=\"height:2.65952em;\"></span><span class=\"mord mathdefault mtight\">i</span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31472em;\"><span></span></span></span></span></span></span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.5462385714285715em;\"><span></span></span></span></span></span></span><span class=\"mopen mtight\">(</span><span class=\"mord mathdefault mtight\">μ</span><span class=\"mopen mtight\">(</span><span class=\"mord mathdefault mtight\">p</span><span class=\"mclose mtight\">)</span><span class=\"mclose mtight\">)</span></span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.485em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">μ</span><span class=\"mopen mtight\">(</span><span class=\"mord mathdefault mtight\">t</span><span class=\"mclose mtight\">)</span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.727367em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mclose\">]</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.936em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span></span></span></span></span><ol>\n<li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>d</mi></mrow><annotation encoding=\"application/x-tex\">d</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span> is a set of multisets <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msub><mi>d</mi><mi>i</mi></msub></mrow><annotation encoding=\"application/x-tex\">d_i</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.84444em;vertical-align:-0.15em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span></span></span></span></p></li><li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi mathvariant=\"normal\">∃</mi><msub><mi>d</mi><mi>i</mi></msub><mo stretchy=\"false\">(</mo><mi>t</mi><mo>∈</mo><msub><mi>d</mi><mi>i</mi></msub><mo stretchy=\"false\">)</mo><mo>∨</mo><mi mathvariant=\"normal\">∄</mi><msub><mi>d</mi><mi>i</mi></msub><mo stretchy=\"false\">(</mo><mi>t</mi><mo>∈</mo><msub><mi>d</mi><mi>i</mi></msub><mo stretchy=\"false\">)</mo></mrow><annotation encoding=\"application/x-tex\">\\exists d_i(t \\in d_i) \\lor \\nexists d_i(t \\in d_i)</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord\">∃</span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">∈</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span><span class=\"mbin\">∨</span><span class=\"mspace\" style=\"margin-right:0.2222222222222222em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord amsrm\">∄</span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">∈</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span><span class=\"mclose\">)</span></span></span></span></p></li><li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo stretchy=\"false\">)</mo></mrow><annotation encoding=\"application/x-tex\">\\mu(t)</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathdefault\">μ</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mclose\">)</span></span></span></span> is the multiplicity of <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>t</mi></mrow><annotation encoding=\"application/x-tex\">t</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.61508em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">t</span></span></span></span> in the multiset <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msub><mi>d</mi><mi>i</mi></msub></mrow><annotation encoding=\"application/x-tex\">d_i</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.84444em;vertical-align:-0.15em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span></span></span></span></p></li><li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msub><mo>∑</mo><mrow><mi>p</mi><mo>∈</mo><msub><mi>d</mi><mi>i</mi></msub></mrow></msub><mo stretchy=\"false\">(</mo><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>p</mi><mo stretchy=\"false\">)</mo><mo stretchy=\"false\">)</mo></mrow><annotation encoding=\"application/x-tex\">\\sum_{p \\in d_i}(\\mu(p))</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1.185818em;vertical-align:-0.43581800000000004em;\"></span><span class=\"mop\"><span class=\"mop op-symbol small-op\" style=\"position:relative;top:-0.0000050000000000050004em;\">∑</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.18639799999999984em;\"><span style=\"top:-2.40029em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">p</span><span class=\"mrel mtight\">∈</span><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.3280857142857143em;\"><span style=\"top:-2.357em;margin-left:0em;margin-right:0.07142857142857144em;\"><span class=\"pstrut\" style=\"height:2.5em;\"></span><span class=\"sizing reset-size3 size1 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.143em;\"><span></span></span></span></span></span></span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.43581800000000004em;\"><span></span></span></span></span></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">μ</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">p</span><span class=\"mclose\">)</span><span class=\"mclose\">)</span></span></span></span> is the cardinality of the multiset <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msub><mi>d</mi><mi>i</mi></msub></mrow><annotation encoding=\"application/x-tex\">d_i</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.84444em;vertical-align:-0.15em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span></span></span></span></p></li><li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mfrac><mrow><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo stretchy=\"false\">)</mo></mrow><mrow><msub><mo>∑</mo><mrow><mi>p</mi><mo>∈</mo><msub><mi>d</mi><mi>i</mi></msub></mrow></msub><mo stretchy=\"false\">(</mo><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>p</mi><mo stretchy=\"false\">)</mo><mo stretchy=\"false\">)</mo></mrow></mfrac></mrow><annotation encoding=\"application/x-tex\">\\frac{\\mu(t)}{\\sum_{p \\in d_i}(\\mu(p))}</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1.7373669999999999em;vertical-align:-0.727367em;\"></span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.01em;\"><span style=\"top:-2.655em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mop mtight\"><span class=\"mop op-symbol small-op mtight\" style=\"position:relative;top:-0.0000050000000000050004em;\">∑</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.1745899999999999em;\"><span style=\"top:-2.1785614285714288em;margin-left:0em;margin-right:0.07142857142857144em;\"><span class=\"pstrut\" style=\"height:2.5em;\"></span><span class=\"sizing reset-size3 size1 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">p</span><span class=\"mrel mtight\">∈</span><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.3448em;\"><span style=\"top:-2.3448em;margin-left:0em;margin-right:0.1em;\"><span class=\"pstrut\" style=\"height:2.65952em;\"></span><span class=\"mord mathdefault mtight\">i</span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31472em;\"><span></span></span></span></span></span></span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.5462385714285715em;\"><span></span></span></span></span></span></span><span class=\"mopen mtight\">(</span><span class=\"mord mathdefault mtight\">μ</span><span class=\"mopen mtight\">(</span><span class=\"mord mathdefault mtight\">p</span><span class=\"mclose mtight\">)</span><span class=\"mclose mtight\">)</span></span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.485em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">μ</span><span class=\"mopen mtight\">(</span><span class=\"mord mathdefault mtight\">t</span><span class=\"mclose mtight\">)</span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.727367em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span></span></span></span> is the ratio of occurrences of the term <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>t</mi></mrow><annotation encoding=\"application/x-tex\">t</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.61508em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">t</span></span></span></span> in the document <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msub><mi>d</mi><mi>i</mi></msub></mrow><annotation encoding=\"application/x-tex\">d_i</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.84444em;vertical-align:-0.15em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span></span></span></span> to the total amount of terms in the document <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msub><mi>d</mi><mi>i</mi></msub></mrow><annotation encoding=\"application/x-tex\">d_i</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.84444em;vertical-align:-0.15em;\"></span><span class=\"mord\"><span class=\"mord mathdefault\">d</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.31166399999999994em;\"><span style=\"top:-2.5500000000000003em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mathdefault mtight\">i</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.15em;\"><span></span></span></span></span></span></span></span></span></span></p></li></ol>\n<p class=\"s-x-i\">This works by finding the average of how often the term appears within a document. After this, the significance is normalized between <code class=\"s-b-2 p-x-2 p-y-2\">0.5</code> and <code class=\"s-b-2 p-x-2 p-y-2\">1.5</code>, allowing it to become higher when the average occurrence is lower. This allows for rarer terms to be amplified in significance.</p><p class=\"s-x-i\">For example, when given the processed data:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">[</span><span class=\"token string\">\"moon fast\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"slash fast\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"spark fast\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"wade fast\"</span><span class=\"token punctuation\">]</span></code></pre><p class=\"s-x-i\">An index is generated:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"m\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"o\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"o\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"n\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">0</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"f\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"a\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"s\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"t\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"s\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"l\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"a\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"s\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"h\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">1</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"p\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"a\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"r\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"k\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"w\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"a\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"d\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"e\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">This is a map of every single character so that they can be searched through individually. At the end of a specific term, there is a <code class=\"s-b-2 p-x-2 p-y-2\">data</code> property. The first item in this array is the significance of the term. The other items are the indexes of the documents in which the term appears.</p><p class=\"s-x-i\">Notice how the unique terms <code class=\"s-b-2 p-x-2 p-y-2\">"moon"</code>, <code class=\"s-b-2 p-x-2 p-y-2\">"slash"</code>, <code class=\"s-b-2 p-x-2 p-y-2\">"spark"</code>, and <code class=\"s-b-2 p-x-2 p-y-2\">"wade"</code> all have a higher weight of <code class=\"s-b-2 p-x-2 p-y-2\">1.375</code>. In contrast, the term <code class=\"s-b-2 p-x-2 p-y-2\">"fast"</code> appears in all of the documents half of the time, and has a lower weight of <code class=\"s-b-2 p-x-2 p-y-2\">1</code>.</p><h2 id=\"search\" class=\"s-x-i\">Search</h2><p class=\"s-x-i\">Searching works by:</p><ol>\n<li><p class=\"s-x-i\">Processing the query.</p></li><li><p class=\"s-x-i\">Splitting the query into a multiset of terms.</p></li><li><p class=\"s-x-i\">Searching the index for each term.</p></li></ol>\n<p class=\"s-x-i\">To correctly increment the score, the relevance must be taken into account. The relevance of the term <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>t</mi></mrow><annotation encoding=\"application/x-tex\">t</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.61508em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">t</span></span></span></span> in the query <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>q</mi></mrow><annotation encoding=\"application/x-tex\">q</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span></span></span></span> to the set of documents <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>d</mi></mrow><annotation encoding=\"application/x-tex\">d</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span> can be represented by the function:</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>w</mi><mi>r</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo separator=\"true\">,</mo><mi>q</mi><mo separator=\"true\">,</mo><mi>d</mi><mo stretchy=\"false\">)</mo><mo>=</mo><mi>w</mi><mi>m</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo separator=\"true\">,</mo><mi>d</mi><mo stretchy=\"false\">)</mo><mo stretchy=\"false\">[</mo><mfrac><mn>1</mn><mrow><munder><mo>∑</mo><mrow><mi>p</mi><mo>∈</mo><mtext> </mtext><mi>q</mi></mrow></munder><mo stretchy=\"false\">(</mo><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>p</mi><mo stretchy=\"false\">)</mo><mo stretchy=\"false\">)</mo></mrow></mfrac><mo stretchy=\"false\">]</mo></mrow><annotation encoding=\"application/x-tex\">wr(t, q, d) = wm(t, d)[\\frac{1}{\\sum_{p \\in\\ q}(\\mu(p))}]</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.02691em;\">w</span><span class=\"mord mathdefault\" style=\"margin-right:0.02778em;\">r</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:2.443258em;vertical-align:-1.1218180000000002em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.02691em;\">w</span><span class=\"mord mathdefault\">m</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mclose\">)</span><span class=\"mopen\">[</span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.32144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mop\"><span class=\"mop op-symbol small-op\" style=\"position:relative;top:-0.0000050000000000050004em;\">∑</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.07765999999999995em;\"><span style=\"top:-2.40029em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">p</span><span class=\"mrel mtight\">∈</span><span class=\"mspace mtight\"><span class=\"mtight\"> </span></span><span class=\"mord mathdefault mtight\" style=\"margin-right:0.03588em;\">q</span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.43581800000000004em;\"><span></span></span></span></span></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">μ</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">p</span><span class=\"mclose\">)</span><span class=\"mclose\">)</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\">1</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.1218180000000002em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mclose\">]</span></span></span></span></span><ol>\n<li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>q</mi></mrow><annotation encoding=\"application/x-tex\">q</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span></span></span></span> is a multiset</p></li><li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>p</mi><mo stretchy=\"false\">)</mo></mrow><annotation encoding=\"application/x-tex\">\\mu(p)</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathdefault\">μ</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">p</span><span class=\"mclose\">)</span></span></span></span> is the multiplicity of <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>p</mi></mrow><annotation encoding=\"application/x-tex\">p</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord mathdefault\">p</span></span></span></span> in the multiset <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>q</mi></mrow><annotation encoding=\"application/x-tex\">q</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span></span></span></span></p></li><li><p class=\"s-x-i\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><msub><mo>∑</mo><mrow><mi>p</mi><mo>∈</mo><mtext> </mtext><mi>q</mi></mrow></msub><mo stretchy=\"false\">(</mo><mi>μ</mi><mo stretchy=\"false\">(</mo><mi>p</mi><mo stretchy=\"false\">)</mo><mo stretchy=\"false\">)</mo></mrow><annotation encoding=\"application/x-tex\">\\sum_{p \\in\\ q}(\\mu(p))</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1.185818em;vertical-align:-0.43581800000000004em;\"></span><span class=\"mop\"><span class=\"mop op-symbol small-op\" style=\"position:relative;top:-0.0000050000000000050004em;\">∑</span><span class=\"msupsub\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.07765999999999995em;\"><span style=\"top:-2.40029em;margin-left:0em;margin-right:0.05em;\"><span class=\"pstrut\" style=\"height:2.7em;\"></span><span class=\"sizing reset-size6 size3 mtight\"><span class=\"mord mtight\"><span class=\"mord mathdefault mtight\">p</span><span class=\"mrel mtight\">∈</span><span class=\"mspace mtight\"><span class=\"mtight\"> </span></span><span class=\"mord mathdefault mtight\" style=\"margin-right:0.03588em;\">q</span></span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.43581800000000004em;\"><span></span></span></span></span></span></span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">μ</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">p</span><span class=\"mclose\">)</span><span class=\"mclose\">)</span></span></span></span> is the cardinality of the multiset <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>q</mi></mrow><annotation encoding=\"application/x-tex\">q</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span></span></span></span></p></li></ol>\n<p class=\"s-x-i\">This can be used to represent how much each term should affect the score of the query. It works by taking <a href=\"#significance\">significance</a> of the term and the length of the query into account.</p><p class=\"s-x-i\">For example, let's say you are searching in real-time and have a partial query:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code>Fast S</code></pre><p class=\"s-x-i\">This is processed and split into terms:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">[</span><span class=\"token string\">\"fast\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"s\"</span><span class=\"token punctuation\">]</span></code></pre><p class=\"s-x-i\">All terms except for the last term are searched for exact matches. This means that Wade will only increment the score for documents that have the term in them.</p><p class=\"s-x-i\">First, the term <code class=\"s-b-2 p-x-2 p-y-2\">"fast"</code> is searched for in the index. The process looks like:</p><ol>\n<li><p class=\"s-x-i\">Check if the letter <code class=\"s-b-2 p-x-2 p-y-2\">"f"</code> is in the index. Set it to the current node and continue.</p></li><li><p class=\"s-x-i\">Set the current node to the <code class=\"s-b-2 p-x-2 p-y-2\">"a"</code> node.</p></li><li><p class=\"s-x-i\">Set the current node to the <code class=\"s-b-2 p-x-2 p-y-2\">"s"</code> node.</p></li><li><p class=\"s-x-i\">Set the current node to the <code class=\"s-b-2 p-x-2 p-y-2\">"t"</code> node.</p></li></ol>\n<p class=\"s-x-i\">At this point, the current node is:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token string\">\"t\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">3</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">It has a <code class=\"s-b-2 p-x-2 p-y-2\">data</code> property, meaning that this term was present in at least one document. We store the significance (<code class=\"s-b-2 p-x-2 p-y-2\">1</code>), and increment the score for the indexes.</p><p class=\"s-x-i\">In this case, the indexes are <code class=\"s-b-2 p-x-2 p-y-2\">[0, 1, 2, 3]</code>. The current relevance can be evaluated using the <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>w</mi><mi>r</mi></mrow><annotation encoding=\"application/x-tex\">wr</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.43056em;vertical-align:0em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.02691em;\">w</span><span class=\"mord mathdefault\" style=\"margin-right:0.02778em;\">r</span></span></span></span> function by setting <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>t</mi></mrow><annotation encoding=\"application/x-tex\">t</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.61508em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">t</span></span></span></span> to <code class=\"s-b-2 p-x-2 p-y-2\">"fast"</code>, <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>q</mi></mrow><annotation encoding=\"application/x-tex\">q</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.625em;vertical-align:-0.19444em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span></span></span></span> to the query, and <span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>d</mi></mrow><annotation encoding=\"application/x-tex\">d</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:0.69444em;vertical-align:0em;\"></span><span class=\"mord mathdefault\">d</span></span></span></span> to the documents.</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>w</mi><mi>r</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo separator=\"true\">,</mo><mi>q</mi><mo separator=\"true\">,</mo><mi>d</mi><mo stretchy=\"false\">)</mo><mo>=</mo><mn>1</mn><mo stretchy=\"false\">(</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo stretchy=\"false\">)</mo><mo>=</mo><mn>0.5</mn></mrow><annotation encoding=\"application/x-tex\">wr(t, q, d) = 1(\\frac{1}{2}) = 0.5</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.02691em;\">w</span><span class=\"mord mathdefault\" style=\"margin-right:0.02778em;\">r</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:2.00744em;vertical-align:-0.686em;\"></span><span class=\"mord\">1</span><span class=\"mopen\">(</span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.32144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\">2</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\">1</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.686em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.64444em;vertical-align:0em;\"></span><span class=\"mord\">0</span><span class=\"mord\">.</span><span class=\"mord\">5</span></span></span></span></span><p class=\"s-x-i\">As a result, we update the score for all documents containing the term <code class=\"s-b-2 p-x-2 p-y-2\">"fast"</code> by <code class=\"s-b-2 p-x-2 p-y-2\">0.5</code>. So far, the results are:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">[</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">0.5</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">0.5</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">0.5</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">0.5</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">]</span></code></pre><p class=\"s-x-i\">Next, we have the term <code class=\"s-b-2 p-x-2 p-y-2\">"s"</code>. This term is treated as a prefix, and every single document containing a term with the prefix <code class=\"s-b-2 p-x-2 p-y-2\">"s"</code> will have their score updated.</p><p class=\"s-x-i\">After checking if <code class=\"s-b-2 p-x-2 p-y-2\">"s"</code> is in the index, we find the node:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token string\">\"s\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"l\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"a\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"s\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"h\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">1</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n <span class=\"token string\">\"p\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"a\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"r\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"k\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2</span>\n <span class=\"token punctuation\">]</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">After looking through each individual node, we find <code class=\"s-b-2 p-x-2 p-y-2\">data</code> properties after <code class=\"s-b-2 p-x-2 p-y-2\">"slash"</code> and <code class=\"s-b-2 p-x-2 p-y-2\">"spark"</code>:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token comment\">// \"slash\"</span>\n<span class=\"token string\">\"h\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">1</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token comment\">// \"spark\"</span>\n<span class=\"token string\">\"k\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n <span class=\"token string\">\"data\"</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n <span class=\"token number\">1.375</span><span class=\"token punctuation\">,</span>\n <span class=\"token number\">2</span>\n <span class=\"token punctuation\">]</span>\n<span class=\"token punctuation\">}</span></code></pre><p class=\"s-x-i\">The relevance for the terms <code class=\"s-b-2 p-x-2 p-y-2\">"slash"</code> and <code class=\"s-b-2 p-x-2 p-y-2\">"spark"</code> can be calculated:</p><span class=\"katex-display\"><span class=\"katex\"><span class=\"katex-mathml\"><math xmlns=\"http://www.w3.org/1998/Math/MathML\"><semantics><mrow><mi>w</mi><mi>r</mi><mo stretchy=\"false\">(</mo><mi>t</mi><mo separator=\"true\">,</mo><mi>q</mi><mo separator=\"true\">,</mo><mi>d</mi><mo stretchy=\"false\">)</mo><mo>=</mo><mn>1.375</mn><mo stretchy=\"false\">(</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mo stretchy=\"false\">)</mo><mo>=</mo><mn>0.6875</mn></mrow><annotation encoding=\"application/x-tex\">wr(t, q, d) = 1.375(\\frac{1}{2}) = 0.6875</annotation></semantics></math></span><span class=\"katex-html\" aria-hidden=\"true\"><span class=\"base\"><span class=\"strut\" style=\"height:1em;vertical-align:-0.25em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.02691em;\">w</span><span class=\"mord mathdefault\" style=\"margin-right:0.02778em;\">r</span><span class=\"mopen\">(</span><span class=\"mord mathdefault\">t</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\" style=\"margin-right:0.03588em;\">q</span><span class=\"mpunct\">,</span><span class=\"mspace\" style=\"margin-right:0.16666666666666666em;\"></span><span class=\"mord mathdefault\">d</span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:2.00744em;vertical-align:-0.686em;\"></span><span class=\"mord\">1</span><span class=\"mord\">.</span><span class=\"mord\">3</span><span class=\"mord\">7</span><span class=\"mord\">5</span><span class=\"mopen\">(</span><span class=\"mord\"><span class=\"mopen nulldelimiter\"></span><span class=\"mfrac\"><span class=\"vlist-t vlist-t2\"><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:1.32144em;\"><span style=\"top:-2.314em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\">2</span></span></span><span style=\"top:-3.23em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"frac-line\" style=\"border-bottom-width:0.04em;\"></span></span><span style=\"top:-3.677em;\"><span class=\"pstrut\" style=\"height:3em;\"></span><span class=\"mord\"><span class=\"mord\">1</span></span></span></span><span class=\"vlist-s\"></span></span><span class=\"vlist-r\"><span class=\"vlist\" style=\"height:0.686em;\"><span></span></span></span></span></span><span class=\"mclose nulldelimiter\"></span></span><span class=\"mclose\">)</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span><span class=\"mrel\">=</span><span class=\"mspace\" style=\"margin-right:0.2777777777777778em;\"></span></span><span class=\"base\"><span class=\"strut\" style=\"height:0.64444em;vertical-align:0em;\"></span><span class=\"mord\">0</span><span class=\"mord\">.</span><span class=\"mord\">6</span><span class=\"mord\">8</span><span class=\"mord\">7</span><span class=\"mord\">5</span></span></span></span></span><p class=\"s-x-i\">With this value, we can update the score for the documents containing the terms <code class=\"s-b-2 p-x-2 p-y-2\">"slash"</code> and <code class=\"s-b-2 p-x-2 p-y-2\">"spark"</code> by <code class=\"s-b-2 p-x-2 p-y-2\">0.6875</code>.</p><p class=\"s-x-i\">After updating the results using the indexes, the final results are:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code><span class=\"token punctuation\">[</span>\n <span class=\"token comment\">// Moon is fast!</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">0.5</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token comment\">// Slash is fast also!</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">1.1875</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token comment\">// Spark is fast too!</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">1.1875</span>\n <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n <span class=\"token comment\">// Is Wade fast?</span>\n <span class=\"token punctuation\">{</span>\n index<span class=\"token punctuation\">:</span> <span class=\"token number\">3</span><span class=\"token punctuation\">,</span>\n score<span class=\"token punctuation\">:</span> <span class=\"token number\">0.5</span>\n <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">]</span></code></pre><p class=\"s-x-i\">The most relevant results were:</p><pre class=\"s-x-i s-b-2 p-x-4 p-y-4\"><code>\"Slash is fast also!\"\n\"Spark is fast too!\"</code></pre><p class=\"s-x-i\">They both have a term with the prefix <code class=\"s-b-2 p-x-2 p-y-2\">"s"</code>, and the term <code class=\"s-b-2 p-x-2 p-y-2\">"fast"</code>. The rest of the results were given a lower score of <code class=\"s-b-2 p-x-2 p-y-2\">0.5</code> because they only had the term <code class=\"s-b-2 p-x-2 p-y-2\">"fast"</code> in them.</p><h2 id=\"conclusion\" class=\"s-x-i\">Conclusion</h2><p class=\"s-x-i\">In a nutshell, Wade processes data, splits it into terms, and creates an index containing the indexes of the items along with how relevant each term is to the data. A query is also processed and split into terms. These terms are individually searched within the index and the scores are updated as needed.</p><p class=\"s-x-i\">Wade's source is available on <a href=\"https://github.com/kbrsh/wade\">GitHub</a>.</p>","title":"Inside Wade","date_published":"2017-07-16T07:00:00.000Z"}]}