Tips for Golfing in ECMAScript 6 and above

Question

This is similar to other "Tips for golfing in <...>" but specifically targeting the newer features in JavaScript brought up in ECMAScript 6 and above.

JavaScript inherently is a very verbose language, function(){}, .forEach(), converting string to array, array-like object to array, etc, etc are super bloats and not healthy for Golfing.

ES6+, on the other hand, has some super handy features and reduced footprint. x=>y, [...x], etc. are just some of the examples.

Please post some nice tricks that can help shave off those few extra bytes from your code.

NOTE: Tricks for ES5 are already available in Tips for golfing in JavaScript; answers to this thread should focus on tricks only available in ES6 and other future ES versions.

However, this thread is also for users who currently golf using ES5 features. Answers may also contain tips to help them understand and map ES6 features to their style of ES5 coding.

Answer 1

Spread operator ...

The spread operator transforms an array value into a comma separated list.

Use case 1:

Directly use an array where a function expects a list

list=[1,2,3]
x=Math.min(...list)
list=[10,20], a.push(...list) // similar to concat()

Use case 2:

Create an array literal from an iterable (typically a string)

[...'buzzfizz'] // -> same as .split('')

Use case 3:

Declare a variable number of arguments for a function

F=(...x) => x.map(v => v+1)
// example: F(1,2,3) == [2,3,4]

See mozilla doc

Answer 2

Tricks learned here since I joined

My primary programming language is JS and mostly ES6. Since I joined this site a week back, I have learned a lot of useful tricks from fellow members. I am combining some of those here. All credits to community.

Arrow functions and loops

We all know that arrow functions save a lot of byts

function A(){do something} // from this
A=a=>do something // to this

But you have to keep in mind a few things

• Try to club multiple statements using , i.e. (a=b,a.map(d)) - Here, the value which is returned is the last expression a.map(d)
• if your do something part is more than one statement, then you need to add the surrounding {} brackets.
• If there are surrounding {} brackets, you need to add an explicit return statement.

The above holds true a lot of times when you have loops involved. So something like:

u=n=>{for(s=[,1,1],r=[i=1,l=2];c=l<n;i+=!c?s[r[l++]=i]=1:1)for(j of r)c-=j<i/2&s[i-j];return n>1?r:[1]}

Here I am wasting at least 9 characters due to the return. This can be optimized.

• Try to avoid for loops. Use .map or .every or .some instead. Note that if you want to change the same array that you are mapping over, it will fail.
• Wrap the loop in a closure arrow function, converting the main arrow function as single statement.

So the above becomes:

u=n=>(s=>{for(r=[i=1,l=2];c=l<n;i+=!c?s[r[l++]=i]=1:1)for(j of r)c-=j<i/2&s[i-j]})([,1,1])|n>1?r:[1]

removed characters: {}return

added characters: (){}>|

Note how I call the closure method, which correctly populates the variable n and then since the closure method is not returning anything (i.e. returning undefined), I bitwise or it and return the array n all in a single statement of the outer arrow function u

Commas and semicolons

Avoid them what so ever,

If you are declaring variables in a loop, or like mentioned in the previous section, using , separated statements to have single statement arrow functions, then you can use some pretty nifty tricks to avoid those , or ; to shave off those last few bytes.

Consider this code:

r=v=>Math.random()*100|0;n=r();m=r();D=v=>A(n-x)+A(m-y);d=0;do{g();l=d;d=D();....

Here, I am calling a lot of methods to initialize many variables. Each initialization is using a , or ;. This can be rewritten as:

r=v=>Math.random()*100|0;n=r(m=r(d=0));D=v=>A(n-x)+A(m-y);do{d=D(l=d,g());....

Note how I use the fact that the method does not bother the variable passed to it and use that fact to shave 3 bytes.

Misc

.search instead of .indexOf

Both give the same result, but search is shorter. Although search expects a Regular Expression, so use it wisely.

`Template Strings`

These are super handy when you have to concat one or more string parts based on certain conditions.

Take the following example to output a quine in JS

(f=x=>alert("(f="+f+")()"))()

vs.

(f=x=>alert(`(f=${f})()`))()

In a template string, which is a string inside two backquotes (`), anything inside a ${ } is treated as a code and evaluated to insert the resulting answer in the string.

I'll post a few more tricks later. Happy golfing!

Answer 3

Using property shorthands

Property shorthands allow you to set variables to an arrays' values:

a=r[0];b=r[1] // ES5
[a,b]=r       // ES6 - 6 bytes saved

This can also be used like:

a=r[0],b=r[2] // ES5
[a,,b]=r      // ES6 - 5 bytes saved

You can even use this to reverse variables:

c=a,a=b,b=c // ES5 - uses extra variable
[b,a]=[a,b] // ES6 - not shorter, but more flexible

You can also use this to shorten slice() functions.

z = [1, 2, 3, 4, 5];

a=z.slice(1) // a = [2,3,4,5]; ES5
[,...a]=z    // a = [2,3,4,5]; ES6

Base conversions

ES6 provides a much shorter way to convert form Base-2 (binary) and Base-8 (octal) to decimal:

0b111110111 // == 503
0o767       // == 503

+ can be used to convert a binary, octal or hex string to a decimal number. You can use 0b, 0o, and 0x, for binary, octal, and hex respectively.:

parseInt(v,2) // ES5
+('0b'+v)     // ES6 - 4 bytes saved; use '0o' for octal and '0x' for hex
'0b'+v-0      // Shorter, but may not work in all cases
              // You can adapt this your case for better results

---

If you are using this > 7 times, then it will be shorter to use parseInt and rename it:

(p=parseInt)(v,2)

Now p can be used for parseInt, saving you many bytes over the long run.

Answer 4

Using string templates with functions

When you have a function with one string as the arguments. You can omit the () if you don't have any expressions:

join`` // Works
join`foobar` // Works
join`${5}` // Doesn't work 

Answer 5

Array Comprehensions (Firefox 30-57)

Note: array comprehensions were never standardized, and were made obsolete with Firefox 58. Use at your own peril.

---

Originally, the ECMAScript 7 spec contained a bunch of new array-based features. Though most of these didn't make it into the finalized version, Firefox support(ed) possibly the biggest of these features: fancy new syntax that can replace .filter and .map with for(a of b) syntax. Here's an example:

b.filter(a=>/\s/.test(a)).map(a=>a.length)
[for(a of b)if(/\s/.test(a))a.length]

As you can see, the two lines are not all that different, other than the second not containing the bulky keywords and arrow functions. But this only accounts for the order.filter().map(); what happens if you have .map().filter() instead? It really depends on the situation:

b.map(a=>a[0]).filter(a=>a<'['&&a>'@')
[for(a of b)if(a<'['&&a>'@')a[0]]

b.map(a=>c.indexOf(a)).filter(a=>a>-1)
[for(a of b)if((d=c.indexOf(a))>-1)d]

b.map(a=>a.toString(2)).filter(a=>/01/.test(a))
[for(a of b)if(/01/.test(c=a.toString(2)))c]

Or what if you want either .map or .filter? Well, it usually turns out less OK:

b.map(a=>a.toString(2))
[for(a of b)a.toString(2)]

b.filter(a=>a%3&&a%5)
[for(a of b)if(a%3&&a%5)a]

So my advice is to use array comprehensions wherever you would usually use .map and .filter, but not just one or the other.

String Comprehensions

A nice thing about ES7 comprehensions is that, unlike array-specific functions such as .map and .filter, they can be used on any iterable object, not just arrays. This is especially useful when dealing with strings. For example, if you want to run each character c in a string through c.charCodeAt():

x=>[...x].map(c=>c.charCodeAt())
x=>[for(c of x)c.charCodeAt()]

That's two bytes saved on a fairly small scale. And what if you want to filter certain characters in a string? For example, this one keeps only capital letters:

x=>[...x].filter(c=>c<'['&&c>'@')
x=>[for(c of x)if(c<'['&&c>'@')c]

Hmm, that's not any shorter. But if we combine the two:

x=>[...x].filter(c=>c<'['&&c>'@').map(c=>c.charCodeAt())
x=>[for(c of x)if(c<'['&&c>'@')c.charCodeAt()]

Wow, a whole 10 bytes saved!

Another advantage of string comprehensions is that hardcoded strings save an extra byte, since you can omit the space after of:

x=>[...'[](){}<>'].map(c=>x.split(c).length-1)
x=>[for(c of'[](){}<>')x.split(c).length-1]

x=>[...'[](){}<>'].filter(c=>x.split(c).length>3)
x=>[for(c of'[](){}<>')if(x.split(c).length>3)c]

Indexing

Array comprehensions make it a little harder to get the current index in the string/array, but it can be done:

a.map((x,i)=>x+i).filter ((x,i)=>~i%2)
[for(x of(i=0,a))if(++i%2)x+i-1]

The main thing to be careful of is to make sure the index gets incremented every time, not just when a condition is met.

Generator comprehensions

Generator comprehensions have basically the same syntax as array comprehensions; just replace the brackets with parentheses:

x=>(for(c of x)if(c<'['&&c>'@')c.charCodeAt())

This creates a generator which functions in much the same way as an array, but that's a story for another answer.

Summary

Basically, although comprehensions are usually shorter than .map().filter(), it all comes down to the specifics of the situation. It's best to try it both ways and see which works out better.

P.S. Feel free to suggest another comprehension-related tip or a way to improve this answer!

Answer 6

Function expressions in ES6 use the arrow notation, and it helps a lot saving bytes if compared with the ES5 version:

f=function(x,y){return x+y}
f=(x,y)=>x+y

If your function only has one parameter, you can omit the parentheses to save two bytes:

f=x=>x+1

If your function has no parameters at all, declare it as if it had one to save one byte:

f=()=>"something"
f=x=>"something"

Beware: Arrow functions are not exactly the same as function () {}. The rules for this are different (and better IMO). See docs

Answer 7

Using eval for arrow functions with multiple statements and a return

One of the more ridiculous tricks I've stumbled across...

Imagine a simple arrow function that needs multiple statements and a return.

a=>{for(o="",i=0;i<a;i++)o+=i;return o}

A simple function accepting a single parameter a, which iterates over all integers in [0, a), and tacks them onto the end of the output string o, which is returned. For example, calling this with 4 as the parameter would yield 0123.

Note that this arrow function had to be wrapped in braces {}, and have a return o at the end.

This first attempt weighs in at 39 bytes.

Not bad, but by using eval, we can improve this.

a=>eval('for(o="",i=0;i<a;i++)o+=i;o')

This function removed the braces and the return statement by wrapping the code in an eval and simply making the last statement in the eval evaluate to o. This causes the eval to return o, which in turn causes the function to return o, since it is now a single statement.

This improved attempt weighs in at 38 bytes, saving one byte from the original.

But wait, there's more! Eval statements return whatever their last statement evaluated to. In this case, o+=i evaluates to o, so we don't need the ;o! (Thanks, edc65!)

a=>eval('for(o="",i=0;i<a;i++)o+=i')

This final attempt weighs only 36 bytes - a 3 byte savings over the original!

This technique could be extended to any general case where an arrow function needs to return a value and have multiple statements (that couldn't be combined by other means)

b=>{statement1;statement2;return v}

becomes

b=>eval('statement1;statement2;v')

saving a byte.

If statement2 evaluates to v, this can be

b=>eval('statement1;statement2')

saving a total of 3 bytes.

Answer 8

Prefer template string new lines over "\n"

This will start to pay off at even a single new line character in your code. One use case might be:

(16 bytes)

array.join("\n")

(15 bytes)

array.join(`
`)

Update: You can even leave away the braces due to tagged template strings (thanks, edc65!):

(13 bytes)

array.join`
`

Answer 9

Filling Arrays - Static Values & Dynamic Ranges

I originally left these as comments under comprehensions, but since that post was primarily focused on comprehensions, I figured that it would be good to give this it's own place.

ES6 gave us the ability to fill arrays with static values without the use of loops:

// ES5
function(x){for(i=0,a=[];i<x;i++)a[i]=0;return a}

// ES6
x=>Array(x).fill(0)

Both return an array of length x, filled with the value 0.

If you want to fill arrays with dynamic values (such as a range from 0...x) however, the result is a little longer (although still shorter than the old way):

// ES5
function(x){for(i=0,a=[];i<x;i++)a[i]=i;return a}

// ES6
x=>Array(x).fill().map((a,i)=>i)

Both return an array of length x, starting with the value 0 and ending in x-1.

The reason you need the .fill() in there is because simply initializing an array won't let you map it. That is to say, doing x=>Array(x).map((a,i)=>i) will return an empty array. You can also get around the need for fill (and thus make it even shorter) by using the spread operator like so:

x=>[...Array(x)]

Using the spread operator and .keys() function, you can now make a short 0...x range:

x=>[...Array(x).keys()]

If you want a custom range from x...y, or a specialized range altogether (such as even numbers), you can get rid of .keys() and just use .map(), or use .filter(), with the spread operator:

// Custom range from x...y
(x,y)=>[...Array(y-x)].map(a=>x++)

// Even numbers (using map)
x=>[...Array(x/2)].map((a,i)=>i*2)

// Even numbers (using filter)
x=>[...Array(x).keys()].filter(a=>~a%2)

Answer 10

Returning Values in Arrow Functions

It's common knowledge that if a single statement follows the arrow function declaration, it returns the result of that statement:

a=>{return a+3}
a=>a+3

-7 bytes

So when possible, combine multiple statements into one. This is most easily done by surrounding the statements with parentheses and separating them with commas:

a=>{r=0;a.map(n=>r+=n);return r}
a=>(r=0,a.map(n=>r+=n),r)

-8 bytes

But if there are only two statements, it is usually possible (and shorter) to combine them with && or ||:

a=>{r=0;a.map(n=>r+=n);return r}

// - Use && because map always returns an array (true)
// - declaration of r moved into unused map argument to make it only 2 statements
a=>a.map(n=>r+=n,r=0)&&r

-9 bytes

Finally if you are using map (or similar) and need to return a number and you can guarantee the map will never return a 1-length array with a number, you can return the number with |:

a=>{a=b=0;a.map(n=>(a+=n,b-=n));return a/b}

// - {} in map ensures it returns an array of undefined, so the | will make the returned
//   array cast from [ undefined, undefined, undefined ] to ",," to NaN to 0 and 0|n = n,
//   if the map returned [ 4 ] it would cast from [ 4 ] to "4" to 4 and make it 4|n
a=>a.map(n=>{a+=n,b-=n},a=b=0)|a/b

Answer 11

Random template-string hacks

This function riffles two strings (i.e. turns "abc","de" into "adbec"):

f=(x,y)=>String.raw({raw:x},...y)

Note that this only works when x is longer than y. How does it work, you ask? String.raw is designed to be a template tag, like so:

String.raw`x: ${x}\ny: ${y}\nx + y: ${x + y}`

This basically calls String.raw(["x: ", "\ny: ", "\nx + y: ", ""], x, y, x + y), though it's not that simple. The template array also has a special raw property, which is basically a copy of the array, but with the raw strings. String.raw(x, ...args) basically returns x.raw[0] + args[0] + x.raw[1] + args[1] + x.raw[2] + ... and so on until x runs out of items.

So now that we know how String.raw works, we can use it to our advantage:

f=(x,y)=>String.raw({raw:x},...y)                   // f("abc", "de") => "adbec"
f=x=>String.raw({raw:x},...[...x].keys())           // f("abc") => "a0b1c"
f=(x,y)=>String.raw({raw:x},...[...x].fill(y))      // f("abc", " ") => "a b c"

Of course, for that last one, f=(x,y)=>x.split``.join(y) is way shorter, but you get the idea.

Here are a couple of riffling functions that also work if x and y are of equal length:

f=(x,y)=>String.raw({raw:x.match(/.?/g)},...y)
f=(x,y)=>String.raw({raw:x},...y)+y.slice(-1)  // Only works if x.length == y.length

You can learn more about String.raw on MDN.

Answer 12

Shorter ways to do .replace

---

If you want to replace all instances of one exact substring with another in a string, the obvious way would be:

f=s=>s.replace(/l/g,"y") // 24 bytes
f("Hello, World!")       // -> "Heyyo, Woryd!"

However, you can do 1 byte shorter:

f=s=>s.split`l`.join`y`  // 23 bytes
f("Hello, World!")       // -> "Heyyo, Woryd!"

Note that this is no longer shorter if you want to use any regex features besides the g flag. However, if you're replacing all instances of a variable, it's usually far shorter:

f=(s,c)=>s.replace(RegExp(c,"g"),"") // 36 bytes
f=(s,c)=>s.split(c).join``           // 26 bytes
f("Hello, World!","l") // -> "Heo, Word!"

---

Sometimes you'll want to map over each char in a string, replacing each one with something else. I often find myself doing this:

f=s=>s.split``.map(x=>x+x).join`` // 33 bytes
f=s=>[...s].map(x=>x+x).join``    // 30 bytes
f("abc") // -> "aabbcc"

However, .replace is almost always shorter:

f=s=>s.replace(/./g,x=>x+x)  // 27 bytes
f=s=>s.replace(/./g,"$&$&")  // Also works in this particular case

Now, if you want to map over each char in a string but don't care about the resulting string, .map is usually better because you can get rid of .join``:

f=s=>s.replace(/./g,x=>t+=+x,t=0)&&t // 36 bytes
f=s=>[...s].map(x=>t+=+x,t=0)&&t     // 32 bytes
f("12345")  // -> 15

Answer 13

How to golf with recursion

Recursion, though not the fastest option, is very often the shortest. Generally, recursion is shortest if the solution can simplified to the solution to a smaller part of the challenge, especially if the input is a number or a string. For instance, if f("abcd") can be calculated from "a" and f("bcd"), it's usually best to use recursion.

Take, for instance, factorial:

n=>[...Array(n).keys()].reduce((x,y)=>x*++y,1)
n=>[...Array(n)].reduce((x,_,i)=>x*++i,1)
n=>[...Array(n)].reduce(x=>x*n--,1)
n=>{for(t=1;n;)t*=n--;return t}
n=>eval("for(t=1;n;)t*=n--")
f=n=>n?n*f(n-1):1

In this example, recursion is obviously way shorter than any other option.

How about sum of charcodes:

s=>[...s].map(x=>t+=x.charCodeAt(),t=0)|t
s=>[...s].reduce((t,x)=>t+x.charCodeAt())
s=>[for(x of(t=0,s))t+=x.charCodeAt()]|t  // Firefox 30+ only
f=s=>s?s.charCodeAt()+f(s.slice(1)):0

This one is trickier, but we can see that when implemented correctly, recursion saves 4 bytes over .map.

Now let's look at the different types of recursion:

Pre-recursion

This is usually the shortest type of recursion. The input is split into two parts a and b, and the function calculates something with a and f(b). Going back to our factorial example:

f=n=>n?n*f(n-1):1

In this case, a is n, b is n-1, and the value returned is a*f(b).

Important note: All recursive functions must have a way to stop recursing when the input is small enough. In the factorial function, this is controlled with the n? :1, i.e. if the input is 0, return 1 without calling f again.

Post-recursion

Post-recursion is similar to pre-recursion, but slightly different. The input is split into two parts a and b, and the function calculates something with a, then calls f(b,a). The second argument usually has a default value (i.e. f(a,b=1)).

Pre-recursion is good when you need to do something special with the final result. For example, if you want the factorial of a number plus 1:

f=(n,p=1)=>n?f(n-1,n*p):p+1

Even then, however, post- is not always shorter than using pre-recursion within another function:

n=>(f=n=>n?n*f(n-1):1)(n)+1

So when is it shorter? You may notice that post-recursion in this example requires parentheses around the function arguments, while pre-recursion did not. Generally, if both solutions need parentheses around the arguments, post-recursion is around 2 bytes shorter:

n=>!(g=([x,...a])=>a[0]?x-a.pop()+g(a):0)(n)
f=([x,...a],n=0)=>a[0]?f(a,x-a.pop()+n):!n

(programs here taken from this answer)

How to find the shortest solution

Usually the only way to find the shortest method is to try all of them. This includes:

• Loops
• .map (for strings, either [...s].map or s.replace; for numbers, you can create a range)
• Array comprehensions
• Pre-recursion (sometimes within another of these options)
• Post-recursion

And these are just the most common solutions; the best solution might be a combination of these, or even something entirely different. The best way to find the shortest solution is to try everything.

Answer 14

Optimizing small constant ranges for map()

Context

Starting with ES6, it has become fairly common to use (and abuse) the map() method instead of a for loop to iterate over a range \$[0..N-1]\$, so that the entire answer can be written in functional style:

for(i = 0; i < 10; i++) {
  do_something_with(i);
}

can be replaced by either:

[...Array(10).keys()].map(i => do_something_with(i))

or more commonly:

[...Array(10)].map((_, i) => do_something_with(i))

However, using Array(N) is rarely optimal when \$N\$ is a small constant.

Optimizations for a range \$[0..N-1]\$, with counter

Below is a summary of shorter alternate methods when the counter \$i\$ is used within the callback:

N           | Method                               | Example                         | Length
------------+--------------------------------------+---------------------------------+-------
N ≤ 6       | use a raw array of integers          | [0,1,2,3].map(i=>F(i))          | 2N+10
N = 7       | use either a raw array of integers   | [0,1,2,3,4,5,6].map(i=>F(i))    | 24
            | or a string if your code can operate | [...'0123456'].map(i=>F(i))     | 23
            | with characters rather than integers |                                 |
8 ≤ N ≤ 9   | use scientific notation 1e[N-1]      | [...1e7+''].map((_,i)=>F(i))    | 24
N = 10      | use scientific notation 1e9          | [...1e9+''].map((_,i)=>F(i))    | 24
            | or the ES7 expression 2**29+'4' if   | [...2**29+'4'].map(i=>F(i))     | 23
            | the order doesn't matter and your    |                                 |
            | code can operate with characters     |  (order: 5,3,6,8,7,0,9,1,2,4)   |
            | rather than integers                 |                                 |
11 ≤ N ≤ 17 | use scientific notation 1e[N-1]      | [...1e12+''].map((_,i)=>F(i))   | 25
N = 18      | use the fraction 1/3                 | [...1/3+''].map((_,i)=>F(i))    | 24
N = 19      | use the fraction 1/6                 | [...1/6+''].map((_,i)=>F(i))    | 24
20 ≤ N ≤ 21 | use scientific notation 1e[N-1]      | [...1e20+''].map((_,i)=>F(i))   | 25
N = 22      | use scientific notation -1e20        | [...-1e20+''].map((_,i)=>F(i))  | 26
23 ≤ N ≤ 99 | use Array(N)                         | [...Array(23)].map((_,i)=>F(i)) | 27

^{NB: The length of the callback code F(i) is not counted.}

Optimization for the range \$[1..9]\$, with counter

If you'd like to iterate over the range \$[1..9]\$ and the order doesn't matter, you can use the following ES7 expression (provided that your code can operate with characters rather than integers):

[...17**6+'8'].map(i=>F(i))  // order: 2,4,1,3,7,5,6,9,8; length: 23

Optimizations without counter

The following methods can be used if you just need to iterate \$N\$ times, without using a counter:

N           | Method                               | Example                         | Length
------------+--------------------------------------+---------------------------------+-------
N ≤ 5       | use a raw array of integers          | [0,0,0,0].map(_=>F())           | 2N+10
6 ≤ N ≤ 10  | use scientific notation 1e[N-1]      | [...1e7+''].map(_=>F())         | 20
11 ≤ N ≤ 17 | use scientific notation 1e[N-1]      | [...1e12+''].map(_=>F())        | 21
N = 18      | use the fraction 1/3                 | [...1/3+''].map(_=>F())         | 20
N = 19      | use the fraction 1/6                 | [...1/6+''].map(_=>F())         | 20
20 ≤ N ≤ 21 | use scientific notation 1e[N-1]      | [...1e20+''].map(_=>F())        | 21
N = 22      | use scientific notation -1e20        | [...-1e20+''].map(_=>F())       | 22
23 ≤ N ≤ 99 | use Array(N)                         | [...Array(23)].map(_=>F())      | 23

^{NB: The length of the callback code F() is not counted.}

Answer 15

Writing RegEx literals with eval

The regex constructor can be very bulky due to it's long name. Instead, write a literal with eval and backticks:

eval(`/<${i} [^>]+/g`)

If the variable i is equal to foo, this will generate:

/<foo [^>]+/g

This is equal to:

new RegExp("<"+i+" [^>]+","g")

---

You can also use String.raw to avoid having to repeatedly escape backslashes \

eval(String.raw`/\(?:\d{4})?\d{3}\d{3}\d{3}\d{3}\d{3}\d{3}\d{4}/g`)

This will output:

/(?:\d{4})?\d{3}\d{3}\d{3}/g

Which is equal to:

RegExp("\\(?:\\d{4})?\\d{3}\\d{3}\\d{3}\\d{3}\\d{3}\\d{3}\\d{4}","g")

Keep in mind!

String.raw takes up a lot of bytes and unless you have at least nine backslashes, String.raw will be longer.

Answer 16

Using uninitialized counters in recursion

Note: Strictly speaking, this is not specific to ES6. It makes more sense to use and abuse recursion in ES6, however, because of the concise nature of arrow functions.

---

It is rather common to come across a recursive function that's using a counter k initially set to zero and incremented at each iteration:

f = (…, k=0) => [do a recursive call with f(…, k+1)]

Under certain circumstances, it's possible to omit the initialization of such a counter and replace k+1 with -~k:

f = (…, k) => [do a recursive call with f(…, -~k)]

This trick typically saves 2 bytes.

Why and when does it work?

The formula that makes it possible is ~undefined === -1. So, on the first iteration, -~k will be evaluated to 1. On the next iterations, -~k is essentially equivalent to -(-k-1) which equals k+1, at least for integers in the range [0 … 2³¹-1].

You must however make sure that having k = undefined on the first iteration will not disrupt the behavior of the function. You should especially keep in mind that most arithmetic operations involving undefined will result in NaN.

Example #1

Given a positive integer n, this function looks for the smallest integer k that doesn't divide n:

f=(n,k=0)=>n%k?k:f(n,k+1)   // 25 bytes

It can be shortened to:

f=(n,k)=>n%k?k:f(n,-~k)     // 23 bytes

This works because n % undefined is NaN, which is falsy. That's the expected result on the first iteration.

[Link to original answer]

Example #2

Given a positive integer n, this function looks for an integer p such that (3**p) - 1 == n:

f=(n,p=0,k=1)=>n<k?n>k-2&&p:f(n,p+1,k*3)  // 40 bytes

It can be shortened to:

f=(n,p,k=1)=>n<k?n>k-2&&p:f(n,-~p,k*3)    // 38 bytes

This works because p is not used at all on the first iteration (n<k being false).

[Link to original answer]

Answer 17

.forEach vs for loops

Always prefer .map to any for loop. Easy, instant savings.

---

a.map(f)
for(x of a)f(x);
for(i=0;i<a.length;)f(a[i++]);

• 8 bytes total for original
• 8 bytes saved vs for-of (50% reduction)
• 22 bytes saved vs C-style for loop (73% reduction)

---

a.map(x=>f(x,0))
for(x of a)f(x,0);
for(i=0;i<a.length;)f(a[i++],0);

• 16 bytes total for original
• 2 bytes saved vs for-of (11% reduction)
• 16 bytes saved vs C-style for loop (50% reduction)

---

a.map((x,i)=>f(x,i,0))
for(i in a)f(a[i],i,0);
for(i=0;i<a.length;)f(a[i],i++,0);

• 22 bytes total for original
• 1 byte saved vs for-in (4% reduction)
• 11 bytes saved vs C-style for loop (33% reduction)

---

a.map(x=>f(x)&g(x))
for(x of a)f(x),g(x);
for(i=0;i<a.length;)f(x=a[i++]),g(x);

• 19 bytes total for original
• 2 bytes saved vs for-of (10% reduction)
• 18 bytes saved vs C-style for loop (49% reduction)

Answer 18

ES6 functions

Math

Math.cbrt(x) saves characters than Math.pow(x,1/3).

Math.cbrt(x)
Math.pow(x,1/3)

3 chars saved

Math.hypot(...args) is useful when you need the square root of the sum of the squares of the args. Making ES5 code to do that is much harder than using a built-in.

The function Math.trunc(x) wouldn't be helpful, as x|0 is shorter. (Thanks Mwr247!)

There are many properties that take lots of code to do in ES5, but easier in ES6:

• Math.acosh, asinh, atanh, cosh, sinh, tanh. Calculates the hyperbolic equivalent of trigonometric functions.
• Math.clz32. Might be possible to do in ES5, but is easier now. Counts leading zeros in the 32-bit representation of a number.

There are a lot more, so I'm just going to list some:
Math.sign, Math.fround, Math.imul, Math.log10, Math.log2, Math.log1p.

Answer 19

Primality-testing function

The following 28-byte function returns true for prime numbers and false for non-primes:

f=(n,x=n)=>n%--x?f(n,x):x==1

This can easily be modified to calculate other things. For example, this 39-byte function counts the number of primes less than or equal to a number:

f=(n,x=n)=>n?n%--x?f(n,x):!--x+f(n-1):0

If you already have a variable n that you want to check for primality, the primality function can be simplified quite a bit:

(f=x=>n%--x?f(x):x==1)(n)

How it works

f = (         // Define a function f with these arguments:
  n,          //   n, the number to test;
  x = n       //   x, with a default value of n, the number to check for divisibility by.
) =>
  n % --x ?   //   If n is not divisible by x - 1,
  f(n, x)     //     return the result of f(n, x - 1).
              //   This loops down through all numbers between n and 0,
              //     stopping when it finds a number that divides n.
  : x == 1    //   Return x == 1; for primes only, 1 is the smallest number
              //     less than n that divides n.
              //   For 1, x == 0; for 0, x == -1.

Note: This will fail with a "too much recursion" error when called with a sufficiently large input, such as 12345. You can get around this with a loop:

f=n=>eval('for(x=n;n%--x;);x==1')

Answer 20

Yet another way to avoid return

You know you should use eval for arrow functions with multiple statements and a return. In some unusual case you can save more using an inner subfunction.

I say unusual because

1. The result returned must not be the last expression evalued in the loop

2. There must be (at least) 2 different initializations before the loop

In this case you can use an inner subfunction without return, having one of the initial values passed as a parameter.

Example Find the reciprocal of the sum of exp function for values in a range from a to b.

The long way - 55 bytes

(a,b)=>{for(r=0,i=a;i<=b;i++)r+=Math.exp(i);return 1/r}

With eval - 54 bytes

(a,b)=>eval("for(r=0,i=a;i<=b;i++)r+=Math.exp(i);1/r")

With an inner function - 53 bytes

(a,b)=>(i=>{for(r=0;i<=b;i++)r+=Math.exp(i)})(a)||1/r

Note that without the requirement of a lower range limit a, I can merge the initializations of i and r and the eval version is shorter.

Answer 21

Using the currying syntax for dyadic and recursive functions

Dyadic functions

Whenever a function takes exactly two arguments with no default values, using the currying syntax saves one byte.

Before

f =
(a,b)=>a+b  // 10 bytes

Called with f(a,b)

After

f =
a=>b=>a+b   // 9 bytes

Called with f(a)(b)

Note: This post in Meta confirms the validity of this syntax.

Recursive functions

Using the currying syntax may also save some bytes when a recursive function takes several arguments but only needs to update some of them between each iteration.

Example

The following function computes the sum of all integers in the range [a,b]:

f=(a,b)=>a>b?0:b+f(a,b-1)   // 25 bytes

Because a remains unchanged during the whole process, we can save 3 bytes by using:

f =                         // no need to include this assignment in the answer anymore
a=>F=b=>a>b?0:b+F(b-1)      // 22 bytes

Note: As noticed by Neil in the comments, the fact that an argument is not explicitly passed to the recursive function does not mean that it should be considered immutable. If needed, we could modify a within the function code with a++, a-- or whatever similar syntax.

Answer 22

Destructuring assignments

ES6 introduces new syntax for destructuring assignments, i.e. cutting a value into pieces and assigning each piece to a different variable. Here are a few examples:

Strings and arrays

a=s[0];b=s[1];       // 14 bytes
[a,b]=s;             //  8 bytes

a=s[0];s=s.slice(1); // 20 bytes
a=s.shift();         // 12 bytes, only works if s is an array
[a,...s]=s;          // 11 bytes, converts s to an array

Objects

a=o.asdf;b=o.bye;c=o.length; // 28 bytes
{asdf:a,bye:b,length:c}=o;   // 26 bytes

a=o.a;b=o.b;c=o.c; // 18 bytes
{a,b,c}=o;         // 10 bytes

These assignments can also be used in function parameters:

f=a=>a[0]+a[1]+a[2]
f=([a,b,c])=>a+b+c

f=b=>b[1]?b[0]+f(b.slice(1)):b[0]*2
f=b=>b[1]?b.shift()+f(b):b[0]*2
f=([a,...b])=>b[0]?a+f(b):a*2

Answer 23

Shorten repeated function calls

If you have repeated calls to a function with a long-ish name, such as canvas manipulation:

c.lineTo(0,100);c.lineTo(100,100);c.lineTo(100,0);c.lineto(0,0);c.stroke()

The traditional way to shorten it would be to alias the function name:

c[l='lineTo'](0,100);c[l](100,100);c[l](100,0);c[l](0,0);c.stroke()

If you have enough calls, a better way is to create a function that does the job for you:

l=(x,y)=>c.lineTo(x,y);l(0,100);l(100,100);l(100,0);l(0,0);c.stroke()

If most of the function calls are chained, you can make the function return itself, allowing you to cut two bytes off of each successive call:

l=(x,y)=>c.lineTo(x,y)||l;l(0,100)(100,100)(100,0)(0,0);c.stroke()

Example usage: 1, 2

Answer 24

Bind operator ::

The bind operator can be used to help shorten bytes over repeated functions:

(x='abc'.search(a))+x.search(b) // Before
(x=::'abc'.search)(a)+x(b)      // 5 bytes saved

Additionally if you want to use the function with a different this e.g.:

s[r='replace'](/a/g,'b')+s[r](/c/g,'d') // Before
(r=s.replace)(/a/g,'b')+s::r(/c/g,'d')  // 1 byte saved

Answer 25

Splitting Strings

Surprised this hasn't been posted already (or maybe I missed it).

If you have an array of 5 or more strings, you can save bytes by instead splitting a string containing all the elements.

["one","two","three","four"]
"one,two,three,four".split`,` // 1 byte longer

["one","two","three","four","five"]
"one,two,three,four,five".split`,` // 1 byte shorter

["one","two","three","four","five","six"]
"one,two,three,four,five,six".split`,` // 3 bytes shorter

For each additional string in your array, you'll save a further 2 bytes with this approach.

If any of your strings contain a comma then change the delimiter to a differet character.

Answer 26

Using .padEnd() instead of .repeat() (ES8)

Under certain circumstances, using .padEnd() instead of .repeat() saves bytes.

We can take advantage of the following properties:

• the default padding string is a single space
• when provided, the second parameter is implicitly coerced to a string

Repeating spaces

With .repeat():

' '.repeat(10)

Using .padEnd() saves 1 byte:

''.padEnd(10)

Try it online!

Repeating a dynamic value that needs to be coerced to a string

With .repeat():

x=1;
(x+'').repeat(10)

Using .padEnd() saves 2 bytes:

x=1;
''.padEnd(10,x)

Try it online!

Answer 27

Array#concat() and the spread operator

This largely depends on the situation.

---

Combining multiple arrays.

Prefer the concat function unless cloning.

0 bytes saved

a.concat(b)
[...a,...b]

3 bytes wasted

a.concat(b,c)
[...a,...b,...c]

3 bytes saved

a.concat()
[...a]

6 bytes saved

// Concatenate array of arrays
[].concat.apply([],l)
[].concat(...l)

---

Prefer using an already existing array to Array#concat().

Easy 4 bytes saved

[].concat(a,b)
a.concat(b)

Answer 28

Return intermediate result

You know that using the comma operator you can execute a sequence of expressions returning the last value. But abusing the literal array syntax, you can return any intermediate value. It's useful in .map() for instance.

// capitalize words
// f is a flag indicating if prev char is space
[...x].map(c=>(f?c=c.toUpperCase():0,f=c<'!',c),f=1).join('')

// shortened to ...
[...x].map(c=>[f?c.toUpperCase():c,f=c<'!'][0],f=1).join('')

Answer 29

Set function parameter defaults

($,a,b,_)=>_!=undefined?'asdf':_ // before
($,a,b,_)=>_!=[]._?'asdf':_ // before, but a bit golfed
($,a,b,_='asdf')=>_ // after

This one's really useful...

However, be sure to understand that something like _=>_||'asdf' is shorter when you're only passing one (useful) argument to the function.

Answer 30

Golfing Logical Operations in ES6

"GLOE (S6)"

General Logic

Say you have constructed statements s and t. See if you can use any of the following replacements:

Traditional conjuction: s&&t
Equivalent conjuction: s*t OR s&t

Traditional disjunction: s||t
Equivalent disjunction: s+t OR s|t

(These may not work if the order is wrong; i.e. + and * have a lower order precedence than || and && do.)

Also, here are some handy logical expressions:

• Either s or t is true/XOR: s^t
• s and t are the same truth value: !s^t or s==t

Array logic

All members of a satisfy condition p:

a.every(p)                             // 10 bytes (11 bytes saved)
a.map(x=>c&=p(x),c=1)                  // 21 bytes (16 bytes saved)
for(i=0,c=1;i<a.length;c&=p(a[i++]));  // 37 bytes (hideously long)

At least one member of a satisfies condition p:

a.some(p)                            // 9  bytes (13 bytes saved)
a.map(x=>c|=p(x),c=0)                // 21 bytes (14 bytes saved)
for(i=c=0;i<a.length;c|=p(a[i++]));  // 35 bytes (just please no)

No members of a satisfy condition p: !a.some(p).

Element e exists in array a:

a.includes(e)                        // 13 bytes, standard built-in
~a.indexOf(e)                        // 13 bytes, "traditional" method
a.find(x=>e==x)                      // 15 bytes, find (ES6)
a.some(x=>x==e)                      // 15 bytes, some (ES5)
(a+"").search(e)                     // 16 bytes, buggy
a.filter(t=>t==e).length             // 24 bytes, no reason to use this
for(i=c=0;i<a.length;c+=e==a[i++]);  // 35 bytes, super-traditional

Element e does not exist in array a:

!a.includes(e)
!~a.indexOf(e)
a.every(t=>t!=e)
!a.filter(t=>t==e).length
for(i=0,c=1;i<a.length;c*=e!=a[i++]);

Answer 31

Avoiding commas when storing lots of data

If you have a lot of data (i. e. indices, characters, …) that you need to store in an array, you might be better off leaving all commas away. This works best if every piece of data has the same string length, 1 obviously being optimal.

43 Bytes (baseline)

a=[[3,7,6,1,8,9,4,5,2],[5,4,3,2,7,6,5,4,3]]

34 Bytes (no commas)

a=[[..."376189452"],[..."543276543"]]

If you're willing to change your array access, you might reduce this even further, storing the same values like so:

27 Bytes (same data, only changes array access)

a=[..."376189452543276543"]

Answer 32

Use eval instead of braces for arrow functions

Arrow functions are awesome. They take the form x=>y, where x is an argument and y is the return value. However, if you need to use a control structure, such as while, you would have to put braces, e.g. =>{while(){};return}. However, we can get around this; luckily, the eval function takes a string, evaluates that string as JS code, and returns the last evaluated expression. For example, compare these two:

x=>{while(foo){bar};return baz} // before
x=>eval('while(foo){bar};baz')  // after
//                            ^

We can use an extension of this concept to further shorten our code: in the eyes of eval, control structures also return their last evaluated expression. For example:

x=>{while(foo)bar++;return bar} // before
x=>eval('while(foo)++bar')      // after
//                        ^^^^^

Answer 33

Use ** (ES7)

** is the new exponentiation operator. Occasionally useful.

Math.pow(2,2) // size: 13, result: 4 
2**2          // size:  4, result: 4

Answer 34

Convert BigInt back to Number (Chrome 67+ / Node.js 10.4+)

!! ALERT : ESNext feature ahead !!

BigInt makes arbitrary-precision integer arithmetic more handy in JS, but there is a caveat - most already existing functions that accepts Number, does not accept BigInt. UPDATE: array indexer DOES support BigInt for some reason.

When we need to convert a BigInt back to Number for some reason, we cannot use +n (this is explicitly forbidden in the specs), but instead we need to use Number(n) -- except we do not really need to do so.

Instead of using Number(n), we realise that we can actually convert the BigInt first into a String and then to a Number using +`${n}`, which saves 2 bytes.

But we can do better: wrap the BigInt with an array then directly cast it using + operator. This gives +[n] which saves 3 more bytes. Most importantly this eliminates the use of Number(n) or even (N=Number)(n) and further N(n)s for multiple uses because +[n] has the same length as N(n).

You can test this out with this example:

s=163n;
console.log(Number(s)) // 9 bytes
console.log(+`${s}`)   // 7 bytes
console.log(+[s])      // 4 bytes

Try it online!

Answer 35

Aliasing using eval and template strings

This one's more effective with longer code containing more repetition:

a.push([0,1,2,3,4,5,6,7,8,9,10].push([0,1,2,3,4,5,6,7,8,9,10].push([0,1,2,3,4,5,6,7,8,9,10]))) // before
a.push([...Array(11).keys()].push([...Array(11).keys()].push([...Array(11).keys()]))) // before - golfed
a.push((f=_=>[...Array(11).keys()])().push(f().push(f()))) // before - golfed more

eval(`a${b=`.push([...Array(11).keys()]`}${b+b})))`) // after

Probably not the best example, but you get the idea.

Although the use case is somewhat limited, it can save quite some bytes, especially because it can get at several char sequences (like [function]([args]) or [...) that would otherwise be unable to be aliased.

Be careful with this, however; very often, using this technique can actually increase, not decrease, your byte count.

Answer 36

Shortening Promise Chains with async/await

Taken from my answer here.

Sometimes you can shorten longer promise chains with async/await. The main benefit is from getting rid of the beginning of the arrow function in each then callback. .then(x=>x (10) gets replaced with await( (-4), but you first pay with async (+6). So to make up for the initial overhead of 6 bytes, you'd need at least two then chains to get any benefit.

+-------------+----------------+
| then chains | async overhead |
+-------------+----------------+
| 0           | +6             |
| 1           | +2             |
| 2           | -2             |
| 3           | -4             |
| …           | …              |
+-------------+----------------+

Example 1

x=>x().then(y=>y.foo()).then(z=>z.bar())
async x=>await(await(x()).foo()).bar()

Example 2

u=>fetch(u).then(r=>r.text()).then(t=>/\0/.test(t))
async u=>/\0/.test(await(await fetch(u)).text()))

Answer 37

Array.prototype.find in array traversing

When traversing an array with Array.prototype.map, all elements are processed. However, when only the first truthy invocation is needed, flags are needed to stop subsequent elements from being processed. When processed with a recursion, more flags may be needed.

However, with Array.prototype.find, flags can be saved. Array.prototype.find receives a function with the same signature as Array.prototype.map does, and returns the first element that the function returns true for that element, or undefined if none returns true.

Consider an example of finding the first non-zero value from a numeric array:

// For-loop
A=>{for(i of A)if(i)return i}
// Array.prototype.map
A=>A.map(x=>i=i||x,i=0)&&i   // -3
// Array.prototype.filter
A=>A.filter(x=>x)[0]         // -9
// Array.prototype.find
A=>A.find(x=>x)              // -14

Real case - determine whether a numeric matrix has all non-zero values connected. The function is written in the way that can be invoked by both map and recursion:

// Uses map: 115 bytes
A=>w=>A.map(x=F=(u,i,a)=>u&&(x||!a)&&[-w,-1,1,w].map(v=>v*v>1|i%w+v>=0&i%w+v<w&&F(A[v+=i],v),x=A[i]=0))&&!+A.join``
// Uses find: 102 bytes
A=>w=>(A.find(F=(u,i)=>u&&[-w,-1,1,w].map(v=>v*v>1|i%w+v>=0&i%w+v<w&&F(A[v+=i],v),A[i]=0)),!+A.join``)

In the case above, we need to only rewrite one region, so we must use flags to avoid further invocation of F by map, but in the meantime we need to also let the recursion run, so another flag is used to indicate whether the invocation is by map or by recursion. With find, both flags are now unnecessary. However, be careful with the return value of the function. In this case, when u is zero then zero is returned, and otherwise an array is returned, which is truthy.

Answer 38

(strawman) Use do expressions instead of evaling strings

[Babel preset] and [proposal].

Comes with the added bonus of keeping syntax highlighting. This might be a stretch in some contests, but is nonetheless interesting. I think if it's supported in Babel, it should qualify as competing.

Consider the following function (37 bytes):

f=n=>{for(o=i=0;i<n;o+=++i);return o}

This might be golfed down with the classic eval trick (34 bytes (thank you everyone)):

f=n=>eval("for(o=i=0;i<n;)o+=++i")

But we can do better with do (30 bytes):

f=n=>do{for(o=i=0;i<n;)o+=++i}

Working example - note that Babel needs let statements in all above functions as well.

Essentially what I'm trying to say is if a solution can be done with eval, you can almost always shave off a few bytes using do.