<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jon Randy 🎖️</title>
    <description>The latest articles on DEV Community by Jon Randy 🎖️ (@jonrandy).</description>
    <link>https://dev.to/jonrandy</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F76131%2F7d2bf735-e6fe-42b4-8948-e5be83011f38.jpeg</url>
      <title>DEV Community: Jon Randy 🎖️</title>
      <link>https://dev.to/jonrandy</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jonrandy"/>
    <language>en</language>
    <item>
      <title>The most interesting and fun projects to build are always the one ones with little to no practical use, and I thoroughly recommend building them 👍</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Fri, 01 Aug 2025 16:36:59 +0000</pubDate>
      <link>https://dev.to/jonrandy/the-most-interesting-and-fun-projects-to-build-are-always-the-one-ones-with-little-to-know-1o69</link>
      <guid>https://dev.to/jonrandy/the-most-interesting-and-fun-projects-to-build-are-always-the-one-ones-with-little-to-know-1o69</guid>
      <description></description>
      <category>sideprojects</category>
      <category>productivity</category>
      <category>career</category>
      <category>discuss</category>
    </item>
    <item>
      <title>"We are destroying software" - https://antirez.com/news/145</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Thu, 13 Feb 2025 02:18:35 +0000</pubDate>
      <link>https://dev.to/jonrandy/we-are-destroying-software-httpsantirezcomnews145-4l60</link>
      <guid>https://dev.to/jonrandy/we-are-destroying-software-httpsantirezcomnews145-4l60</guid>
      <description></description>
    </item>
    <item>
      <title>@ben The spam is still bad on the site. Any progress on solving this?</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Wed, 22 Jan 2025 11:15:40 +0000</pubDate>
      <link>https://dev.to/jonrandy/ben-the-spam-is-still-bad-on-the-site-any-progress-on-solving-this-4bbp</link>
      <guid>https://dev.to/jonrandy/ben-the-spam-is-still-bad-on-the-site-any-progress-on-solving-this-4bbp</guid>
      <description></description>
      <category>discuss</category>
      <category>devto</category>
    </item>
    <item>
      <title>Don't do this. Please. It's going to be even harder to discover decent content on here 😞</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Wed, 13 Nov 2024 00:56:55 +0000</pubDate>
      <link>https://dev.to/jonrandy/dont-do-this-please-its-going-to-be-even-harder-to-find-decent-content-on-here-2nnf</link>
      <guid>https://dev.to/jonrandy/dont-do-this-please-its-going-to-be-even-harder-to-find-decent-content-on-here-2nnf</guid>
      <description></description>
    </item>
    <item>
      <title>LLMs are Bullshitters 🐮💩</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Sat, 15 Jun 2024 07:17:13 +0000</pubDate>
      <link>https://dev.to/jonrandy/llms-are-bullshitters-1lm1</link>
      <guid>https://dev.to/jonrandy/llms-are-bullshitters-1lm1</guid>
      <description>&lt;p&gt;Just read a great paper on LLMs. I strongly suggest reading it, but here's the conclusion:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Investors, policymakers, and members of the general public make decisions on how to treat these machines and how to react to them based not on a deep technical understanding of how they work, but on the often metaphorical way in which their abilities and function are communicated. Calling their mistakes ‘hallucinations’ isn’t harmless: it lends itself to the confusion that the machines are in some way misperceiving but are nonetheless trying to convey something that they believe or have perceived. This, as we’ve argued, is the wrong metaphor. The machines are not trying to communicate something they believe or perceive. Their inaccuracy is not due to misperception or hallucination. As we have pointed out, they are not trying to convey information at all. They are bullshitting.&lt;/p&gt;

&lt;p&gt;Calling chatbot inaccuracies ‘hallucinations’ feeds in to overblown hype about their abilities among technology cheerleaders, and could lead to unnecessary consternation among the general public. It also suggests solutions to the inaccuracy problem which might not work, and could lead to misguided efforts at AI alignment amongst specialists. It can also lead to the wrong attitude towards the machine when it gets things right: the inaccuracies show that it is bullshitting, even when it’s right. Calling these inaccuracies ‘bullshit’ rather than ‘hallucinations’ isn’t just more accurate (as we’ve argued); it’s good science and technology communication in an area that sorely needs it.&lt;/p&gt;
&lt;/blockquote&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://link.springer.com/article/10.1007/s10676-024-09775-5?error=cookies_not_supported&amp;amp;code=7b38b735-0944-48f1-bc8c-88805d23286b" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://res.cloudinary.com/practicaldev/image/fetch/s--A8LRFlfM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://media.springernature.com/full/springer-static/cover-hires/journal/10676" height="1063" class="m-0" width="800"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://link.springer.com/article/10.1007/s10676-024-09775-5?error=cookies_not_supported&amp;amp;code=7b38b735-0944-48f1-bc8c-88805d23286b" rel="noopener noreferrer" class="c-link"&gt;
          ChatGPT is bullshit | Ethics and Information Technology
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;p class="truncate-at-3"&gt;
          Recently, there has been considerable interest in large language models: machine learning systems which produce human-like text and dialogue. Applications of these systems have been plagued by persistent inaccuracies in their output; these are often called “AI hallucinations”. We argue that these falsehoods, and the overall activity of large language models, is better understood as bullshit in the sense explored by Frankfurt (On Bullshit, Princeton, 2005): the models are in an important way indifferent to the truth of their outputs. We distinguish two ways in which the models can be said to be bullshitters, and argue that they clearly meet at least one of these definitions. We further argue that describing AI misrepresentations as bullshit is both a more useful and more accurate way of predicting and discussing the behaviour of these systems.
        &lt;/p&gt;
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://res.cloudinary.com/practicaldev/image/fetch/s--u5WPjvtG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://link.springer.com/oscar-static/img/favicons/darwin/android-chrome-192x192-6f081ca7e5.png" width="192" height="192"&gt;
        link.springer.com
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;


</description>
      <category>ai</category>
      <category>llm</category>
      <category>chatgpt</category>
    </item>
    <item>
      <title>One Byte Explainer: Recursion</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Thu, 13 Jun 2024 07:52:02 +0000</pubDate>
      <link>https://dev.to/jonrandy/one-byte-explainer-recursion-9hn</link>
      <guid>https://dev.to/jonrandy/one-byte-explainer-recursion-9hn</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Explainer
&lt;/h2&gt;

&lt;p&gt;To understand recursion, see &lt;a href="https://dev.to/jonrandy/one-byte-explainer-recursion-9hn"&gt;here&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>cschallenge</category>
      <category>computerscience</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to Calculate the Nth Fibonacci Number</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Wed, 03 Apr 2024 08:50:27 +0000</pubDate>
      <link>https://dev.to/jonrandy/how-to-calculate-the-nth-fibonacci-number-1g49</link>
      <guid>https://dev.to/jonrandy/how-to-calculate-the-nth-fibonacci-number-1g49</guid>
      <description>&lt;p&gt;Okay, lets dive straight into the code...&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;fib&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
  &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;floor&lt;/span&gt;&lt;span class="p"&gt;((((&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="o"&gt;**&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;**&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="o"&gt;**&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;**&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="o"&gt;**&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Explanation &lt;a href="https://akuli.github.io/math-tutorial/fib.html"&gt;here&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>beginners</category>
      <category>interview</category>
    </item>
    <item>
      <title>The Rise of Tech Bloggers Relying on Generative AI</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Wed, 14 Feb 2024 06:27:02 +0000</pubDate>
      <link>https://dev.to/jonrandy/the-rise-of-tech-bloggers-relying-on-generative-ai-4hi7</link>
      <guid>https://dev.to/jonrandy/the-rise-of-tech-bloggers-relying-on-generative-ai-4hi7</guid>
      <description>&lt;p&gt;In the ever-evolving landscape of online content creation, the utilization of generative AI has become increasingly prevalent, especially among tech bloggers. These bloggers, driven by various motivations, are turning to AI to automate the process of generating articles without thoroughly reviewing or fact-checking the content. While some may view this trend as a shortcut or an attempt to keep up with the fast-paced nature of digital media, it raises questions about the integrity and authenticity of information shared within the tech community.&lt;/p&gt;

&lt;p&gt;The allure of using generative AI for content creation is multifaceted. For some, it boils down to sheer laziness. The convenience of inputting a few prompts and receiving a fully-formed article within minutes can be irresistible, particularly when faced with deadlines or a lack of motivation. In a world where time is of the essence, the appeal of cutting corners can be tempting, albeit at the expense of quality and accuracy.&lt;/p&gt;

&lt;p&gt;Furthermore, peer pressure plays a significant role in motivating tech bloggers to embrace AI-generated content. In an era where online presence and engagement metrics reign supreme, bloggers may feel compelled to churn out content at a rapid pace to maintain relevance and visibility within their respective communities. The fear of being left behind or overshadowed by competitors drives many to adopt AI as a means of keeping up with the relentless demand for fresh content.&lt;/p&gt;

&lt;p&gt;Moreover, there's an underlying reluctance among some bloggers to admit their own limitations or gaps in knowledge. By relying on generative AI, they can mask their deficiencies and project an image of expertise without investing the time and effort required for in-depth research and analysis. This desire to maintain a facade of competence, coupled with the pressure to produce content consistently, leads many bloggers down the path of AI reliance, regardless of the ethical implications.&lt;/p&gt;

&lt;p&gt;However, the consequences of this trend extend beyond individual motivations. The unchecked proliferation of AI-generated content poses a threat to the credibility and reliability of information disseminated within the tech community. Articles produced without human oversight are prone to errors, inaccuracies, and biases inherent in the training data used by the AI models. As a result, readers are exposed to misinformation that can perpetuate misconceptions, mislead decision-making, and erode trust in online sources.&lt;/p&gt;

&lt;p&gt;In response to these concerns, it's essential for tech bloggers to exercise responsibility and diligence in their content creation processes. While AI can be a valuable tool for streamlining workflows and enhancing productivity, it should never serve as a substitute for human judgment and critical thinking. Bloggers must prioritize quality over quantity, taking the time to review and verify the accuracy of their content before publishing it for public consumption.&lt;/p&gt;

&lt;p&gt;Furthermore, transparency is paramount in maintaining trust and credibility with audiences. Bloggers who leverage AI should disclose their use of automated tools and acknowledge the limitations inherent in AI-generated content. By being open and honest about their processes, bloggers can foster a culture of accountability and integrity within the tech blogging community.&lt;/p&gt;

&lt;p&gt;Ultimately, the decision to rely on generative AI for content creation is a reflection of broader societal trends towards automation and digitalization. While the allure of efficiency and convenience may be enticing, it's imperative for tech bloggers to uphold ethical standards and prioritize the accuracy and integrity of the information they share. By doing so, they can ensure that their contributions to the tech discourse are meaningful, impactful, and worthy of audience trust and respect.&lt;/p&gt;

&lt;p&gt;...and, yes - #abotwrotethis&lt;/p&gt;

&lt;h1&gt;
  
  
  😉
&lt;/h1&gt;

</description>
      <category>beginners</category>
      <category>ai</category>
      <category>meta</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Misconceptions About Closures</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Wed, 27 Sep 2023 06:38:09 +0000</pubDate>
      <link>https://dev.to/jonrandy/misconceptions-about-closures-i15</link>
      <guid>https://dev.to/jonrandy/misconceptions-about-closures-i15</guid>
      <description>&lt;p&gt;The two biggest (and unfortunately widespread) misconceptions about closures:&lt;/p&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  A closure is a special type of function that has access to its surrounding scope ❌
&lt;/h3&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is entirely wrong for two reasons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Closures are &lt;strong&gt;not&lt;/strong&gt; functions&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;ALL&lt;/strong&gt; functions have access to their surrounding (lexical) scope*&lt;/li&gt;
&lt;/ol&gt;

&lt;blockquote&gt;
&lt;h3&gt;
  
  
  To create a closure, you need to nest functions ❌
&lt;/h3&gt;
&lt;/blockquote&gt;

&lt;p&gt;Again, entirely wrong - nesting of functions is irrelevant! Whenever a function is created, an associated closure is also created.&lt;/p&gt;




&lt;h2&gt;
  
  
  So, what is a closure?
&lt;/h2&gt;

&lt;p&gt;From &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" rel="noopener noreferrer"&gt;MDN&lt;/a&gt;:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;A closure is the combination of a function bundled together (enclosed) with references to its surrounding state&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The closure allows the function to access the state in which it was created.&lt;/p&gt;

&lt;p&gt;As a simplified visual:&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsv20cf943j31pm5qt2tp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsv20cf943j31pm5qt2tp.png" alt="Closure" width="800" height="313"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;*Except for functions created with &lt;code&gt;new Function(...)&lt;/code&gt; which form closures with the global scope&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>beginners</category>
      <category>javascript</category>
      <category>programming</category>
    </item>
    <item>
      <title>Meet Cerebrum: Your New Coding Assistant</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Fri, 26 May 2023 03:30:13 +0000</pubDate>
      <link>https://dev.to/jonrandy/meet-cerebrum-your-new-coding-assistant-3b2</link>
      <guid>https://dev.to/jonrandy/meet-cerebrum-your-new-coding-assistant-3b2</guid>
      <description>&lt;p&gt;There's a new &lt;del&gt; AI &lt;/del&gt; coding assistant on the block, and it outshines all others I've seen by a very wide margin... let's take a look:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CFpyL3XO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7hqd3emqqu3l7o08jl5.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CFpyL3XO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7hqd3emqqu3l7o08jl5.jpg" alt="Use your brain" width="700" height="467"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>webdev</category>
      <category>programming</category>
      <category>coding</category>
    </item>
    <item>
      <title>Ranger: JS Range Syntax for Anything</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Sat, 08 Apr 2023 06:12:17 +0000</pubDate>
      <link>https://dev.to/jonrandy/ranger-js-range-syntax-for-anything-4djc</link>
      <guid>https://dev.to/jonrandy/ranger-js-range-syntax-for-anything-4djc</guid>
      <description>&lt;p&gt;Following on from my little &lt;a href="https://dev.to/jonrandy/js-magic-making-a-range-syntax-55im"&gt;experiment&lt;/a&gt; with a basic number range syntax in JS, I decided (as with &lt;a href="https://dev.to/jonrandy/introducing-metho-safely-adding-superpowers-to-js-1lj"&gt;Metho&lt;/a&gt; and &lt;a href="https://dev.to/jonrandy/turboprop-js-arrays-as-property-accessors-52h"&gt;Turboprop&lt;/a&gt;) to generalise the idea and make it into a library that others might find useful (or at least interesting)...&lt;br&gt;&lt;br&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/jonrandy/js-ranger"&gt;Ranger&lt;/a&gt; is a small JS library that allows you to use a range-like syntax with &lt;strong&gt;any&lt;/strong&gt; object. All you need to do is to define a function that builds the required 'range' given a starting and ending object (+ optional extra parameters if you so desire).&lt;/p&gt;

&lt;p&gt;The 'range' syntax is as follows:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rangeStart[[...rangeEnd&lt;/code&gt;&lt;em&gt;&lt;code&gt;, optionalParam1, optionalParam2...&lt;/code&gt;&lt;/em&gt;&lt;code&gt;]]&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;So, for example, if you created a range function for &lt;code&gt;Number&lt;/code&gt;s - you could then use it like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// create a range of numbers from 1-10&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;numbers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt;

&lt;span class="c1"&gt;// log the numbers from 6-3&lt;/span&gt;
&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;]].&lt;/span&gt;&lt;span class="nx"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;x&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  How to Use
&lt;/h2&gt;

&lt;p&gt;Usage is extremely simple, just import the library and use it to set up the range function on your required object (usually this would be a prototype):&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;ranger&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@jonrandy/js-ranger&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myRangeFunction&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// logic to return 'range' here&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;ranger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;attach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;myObject&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;myRangeFunction&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;If you pass in optional parameters according to the syntax detailed at the start of this README, they will simply be passed as additional arguments to your range function. Your 'range' making function can return anything - it doesn't have to be an array.&lt;/p&gt;
&lt;h2&gt;
  
  
  Number Ranges
&lt;/h2&gt;

&lt;p&gt;Also exported by the library as an example of usage is a function called &lt;code&gt;initNumberRangeSyntax&lt;/code&gt;  that sets up a basic range syntax on the &lt;code&gt;Number&lt;/code&gt; prototype - that does pretty much what you would expect. It can also take an additional &lt;code&gt;stepSize&lt;/code&gt; parameter that defaults to &lt;code&gt;1&lt;/code&gt; and decides the (absolute) size of the steps between items in the range:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;ranger&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@jonrandy/js-ranger&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;
&lt;span class="nx"&gt;ranger&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;initNumberRangeSyntax&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;]])&lt;/span&gt;  &lt;span class="c1"&gt;// [1, 2, 3]&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]])&lt;/span&gt;  &lt;span class="c1"&gt;// [5, 4, 3, 2]&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.75&lt;/span&gt;&lt;span class="p"&gt;]])&lt;/span&gt; &lt;span class="c1"&gt;// [0, 0.75, 1.5, 2.25, 3]&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mf"&gt;0.5&lt;/span&gt;&lt;span class="p"&gt;]])&lt;/span&gt; &lt;span class="c1"&gt;// [2, 1.5, 1, 0.5, 0]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;And the source for &lt;code&gt;initNumberRangeSyntax()&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;initNumberRangeSyntax&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;attach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;stepSize&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;absStep&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;stepSize&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;abs&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;stepSize&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;stepSize&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;step&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;=&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;absStep&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;absStep&lt;/span&gt;
    &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;=+&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;=&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;=&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;+=&lt;/span&gt;&lt;span class="nx"&gt;step&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;&lt;strong&gt;UPDATE&lt;/strong&gt;: It has been pointed out that returning an iterator would probably be more efficient and allow for dealing with infinite ranges. That is just as possible with Ranger - simply return a generator function:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Number ranges as iterators&lt;/span&gt;
&lt;span class="nx"&gt;attach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;prototype&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;stepSize&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;absStep&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;stepSize&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;abs&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;stepSize&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;stepSize&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;step&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;=&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;absStep&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="nx"&gt;absStep&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;arr&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[],&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;
  &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;=+&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;d&lt;/span&gt; &lt;span class="p"&gt;?&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;=&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt; &lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;=&lt;/span&gt;&lt;span class="nx"&gt;end&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;+=&lt;/span&gt;&lt;span class="nx"&gt;step&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;yield&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Possible Usages
&lt;/h2&gt;

&lt;p&gt;This was written as a general purpose tool that could have any number of potential uses. Some random ideas:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myDateRange&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;date1&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="nx"&gt;date2&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myRoute&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;location1&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="nx"&gt;location2&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="na"&gt;via&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;location3&lt;/span&gt;&lt;span class="p"&gt;}]]&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;myLine&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;point1&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="nx"&gt;point2&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;translator&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;language1&lt;/span&gt;&lt;span class="p"&gt;[[...&lt;/span&gt;&lt;span class="nx"&gt;language2&lt;/span&gt;&lt;span class="p"&gt;]]&lt;/span&gt; &lt;span class="c1"&gt;// could return a function that takes strings in one language and translates to another&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A9-wwsHG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/jonrandy"&gt;
        jonrandy
      &lt;/a&gt; / &lt;a href="https://github.com/jonrandy/js-ranger"&gt;
        js-ranger
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Javascript library to add range syntax functionality to any object
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;h1 id="user-content-ranger"&gt;&lt;a class="heading-link" href="https://github.com/jonrandy/js-ranger#ranger"&gt;Ranger&lt;/a&gt;&lt;/h1&gt;
&lt;p&gt;Ranger is a small JS library that allows you to use a range-like syntax with any object. All you need to do is to define a function that builds the required 'range' given a starting and ending object (+ optional extra parameters if you so desire).&lt;/p&gt;
&lt;p&gt;The 'range' syntax is as follows:&lt;/p&gt;
&lt;p&gt;&lt;code&gt;rangeStart[[...rangeEnd&lt;/code&gt;&lt;em&gt;&lt;code&gt;, optionalParam1, optionalParam2...&lt;/code&gt;&lt;/em&gt;&lt;code&gt;]]&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;So, for example, if you created a range function for &lt;code&gt;Number&lt;/code&gt;s - you could then use it as follows:&lt;/p&gt;
&lt;div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;&lt;span class="pl-c"&gt;// create a range of numbers from 1-10&lt;/span&gt;
&lt;span class="pl-k"&gt;const&lt;/span&gt; &lt;span class="pl-s1"&gt;numbers&lt;/span&gt; &lt;span class="pl-c1"&gt;=&lt;/span&gt; &lt;span class="pl-c1"&gt;1&lt;/span&gt;&lt;span class="pl-kos"&gt;[&lt;/span&gt;&lt;span class="pl-kos"&gt;[&lt;/span&gt;...&lt;span class="pl-c1"&gt;10&lt;/span&gt;&lt;span class="pl-kos"&gt;]&lt;/span&gt;&lt;span class="pl-kos"&gt;]&lt;/span&gt;
&lt;span class="pl-c"&gt;// log the numbers from 6-3&lt;/span&gt;
&lt;span class="pl-c1"&gt;6&lt;/span&gt;&lt;span class="pl-kos"&gt;[&lt;/span&gt;&lt;span class="pl-kos"&gt;[&lt;/span&gt;...&lt;span class="pl-c1"&gt;3&lt;/span&gt;&lt;span class="pl-kos"&gt;]&lt;/span&gt;&lt;span class="pl-kos"&gt;]&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-en"&gt;forEach&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-s1"&gt;x&lt;/span&gt; &lt;span class="pl-c1"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="pl-smi"&gt;console&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-en"&gt;log&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-s1"&gt;x&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;&lt;/pre&gt;

&lt;/div&gt;
&lt;h2 id="user-content-how-to-use"&gt;&lt;a class="heading-link" href="https://github.com/jonrandy/js-ranger#how-to-use"&gt;How to Use&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Usage is extremely simple, just import the &lt;code&gt;attach&lt;/code&gt; function and use it to set up the range function on your required object:&lt;/p&gt;
&lt;div class="highlight highlight-source-js notranslate position-relative overflow-auto js-code-highlight"&gt;
&lt;pre&gt;&lt;span class="pl-k"&gt;import&lt;/span&gt; &lt;span class="pl-kos"&gt;{&lt;/span&gt; &lt;span class="pl-s1"&gt;attach&lt;/span&gt; &lt;span class="pl-kos"&gt;}&lt;/span&gt;&lt;/pre&gt;…
&lt;/div&gt;
&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/jonrandy/js-ranger"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;



</description>
      <category>javascript</category>
      <category>syntax</category>
      <category>showdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Most Developers Can't Answer This Question About Anonymous Functions 🤯</title>
      <dc:creator>Jon Randy 🎖️</dc:creator>
      <pubDate>Mon, 27 Mar 2023 07:49:24 +0000</pubDate>
      <link>https://dev.to/jonrandy/most-developers-cant-answer-this-question-about-anonymous-functions-kfm</link>
      <guid>https://dev.to/jonrandy/most-developers-cant-answer-this-question-about-anonymous-functions-kfm</guid>
      <description>&lt;p&gt;Given the following code:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;add1&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;add2&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;add3&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;addFunctions&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="nx"&gt;addFunctions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt; &lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;addFunctions&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;push&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;add3&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="nx"&gt;addFunctions&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;b&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Which of the following expressions evaluate to anonymous functions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a) &lt;code&gt;addFunctions[2]&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;b) &lt;code&gt;(a, b) =&amp;gt; a + b&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;c) &lt;code&gt;add&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;d) &lt;code&gt;addFunctions[0]&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;e) &lt;code&gt;add1&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;f) &lt;code&gt;add2&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;g) &lt;code&gt;addFunctions[1]&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;h) &lt;code&gt;add3&lt;/code&gt;
&lt;/li&gt;
&lt;li&gt;i) &lt;code&gt;(function (a,b) { return a + b })&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Give it your best shot in the comments! 🙂&lt;/p&gt;




&lt;p&gt;Since this post is now quite old, I've added the solution:&lt;br&gt;

  CLICK FOR ANSWER
  &lt;br&gt;The correct answer is: &lt;strong&gt;a, b, d, i&lt;/strong&gt;

&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
