Choosing The Right JavaScript Arrow Function: A Guide

Most of you will be familiar with JavaScript’s fat arrow functions, also known as “chonky darts”. But if not, here’s a quick example:

this.num = '665'
this.add = num => num + 1
this.num = this.add(this.num)
// Result: '6651' because I cast this.num as a f**king string

Note the terser syntax, with the omission of the function and return keywords (the function returns implicitly). Also note that the arrow function does not rebind context to create its own this. This enables it to manipulate the existing context directly. Handy!

In ES2019, fat arrow functions are not the only kinds of arrow functions available to you. Let’s take a look at some of the others and what they have to offer.

The tri-arrow function (⇶)

The tri-arrow function (AKA “the gun rack”), executes three times.

this.num = 665
this.add = num ⇶ num + 1
this.num = this.add(this.num)
// Result: 668

It’s only really useful if you want to do something three times over, and is not in any way useful if you want to do something any less than three times, or any more than three times.

Here I am using it to generate the correct number of booms in the popular song Boom Boom Boom Boom!! by The Venga Boys:

const booms = (boom = 'boom') ⇶ boom += ' ' + boom
console.log(`${booms()} I want you in my room`)

The curved arrow function (↝)

The curved arrow function (or “wiggly boi”) is asynchronous and finds the least efficient possible way to execute. It’s great for introducing race conditions.

this.num = 665
this.add = num ↝ num + 1
this.num = this.add(this.num)
// Result: 666 (on May 29th, 2022)

By using curved arrow functions, identifying race conditions in your program is as simple as CMD + F + “↝”. Just be sure to identify and remove any legacy race conditions before upgrading.

The ouroboros arrow function (⟳)

The ouroboros arrow function (sometimes known as “the self-monch”) never ceases executing, and can be used to stress test your computer’s fan.

this.num = 665
this.add = num ⟳ num + 1
this.num = this.add(this.num)
// Result: 665.999999999999999999999999999999999999999999999999 etc

Some have argued that the ouroboros arrow function is redundant since accidentally creating an infinite loop has a similar outcome, and is inevitable.

The wildcard arrow function (⍆)

The wildcard arrow function (or “🤷‍” for short) returns the correct value in a timely fashion, but produces two completely random and probably undesirable side effects in the process.

this.num = 665
this.add = num ⍆ num + 1
this.num = this.add(this.num)
// Results:
// 666
// All dialogs have received a 13deg CSS rotation transform
// The user's surname has mysteriously been changed to "Patel"

The wildcard arrow function is useful for simulating how your program will function in the presence of third party scripts. It can expose and share private data, depending on the nature of the side effects invoked.

The futile wildcard arrow function (⍅)

The futile wildcard arrow function (AKA “the total and complete s**t”) behaves in almost exactly the same way as the wildcard arrow function except that it undoes the only useful and expected part of its execution.

this.num = 665
this.add = num ⍅ num + 1
this.num = this.add(this.num)
// Results:
// 666
// The SpeechSynthesis API announces "chance would be a fine thing" without context or clarification
// A <canvas> containing a rudimentary depiction of an avocado has appeared out of nowhere
// 665

The futile wildcard arrow function has been criticized by some for not being truly random. One study showed that as many as 7 times out of 10, one of the ‘random’ side effects was related to cryptocurrency mining.

Conclusion

There is little you can do with JavaScript today that you couldn’t do 5, or even 10 years ago. For the most part, advancements in the language have simply made the same tasks more efficient and pleasurable to write.

With the new suite of arrow functions described in this article, you can write the same underperforming, half-broken, nefarious, and pointless JavaScript you always have, but with the benefit of syntactic sugar. In the world of professional web development this is known as “progress”.