109
\$\begingroup\$

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.

\$\endgroup\$
0

43 Answers 43

57
\$\begingroup\$

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

\$\endgroup\$
13
  • 5
    \$\begingroup\$ Now I have a downvote here. Obviously someone noted something terribly wrong in this tip, being too shy to leave a comment and explain what ... \$\endgroup\$
    – edc65
    Feb 9, 2016 at 21:04
  • 1
    \$\begingroup\$ It looks alright. Maybe it was the lack of semicolons? ;) (btw, you can also use it as rest parameters, like splats in Ruby) \$\endgroup\$
    – gcampbell
    May 25, 2016 at 9:46
  • \$\begingroup\$ You could add that it also has a use case in function signatures :) \$\endgroup\$ Jul 18, 2017 at 11:17
  • \$\begingroup\$ Misclick did not mean to downvote \$\endgroup\$
    – Stan Strum
    Oct 1, 2017 at 1:20
  • \$\begingroup\$ @StanStrum it happens. I'll make a small update to this post so you can eventually change your vote (or you already did?) \$\endgroup\$
    – edc65
    Oct 1, 2017 at 9:31
29
\$\begingroup\$

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.

\$\endgroup\$
6
  • \$\begingroup\$ The base conversion trick is nice, but its more likely that the conversion number would be in a form of a variable instead of a literal, in which case, it becomes much longer. \$\endgroup\$
    – Optimizer
    Jul 31, 2015 at 18:23
  • 1
    \$\begingroup\$ '0x'+v-0 is even shorter, but may not work as well in some scenarios. \$\endgroup\$ Dec 22, 2015 at 20:06
  • 1
    \$\begingroup\$ By the way, 0767 (ES5) is shorter than the 0o767 (ES6) notation. \$\endgroup\$ Aug 6, 2016 at 21:09
  • \$\begingroup\$ @CamiloMartin 0767 is a non-standard extension, and it's explicitly forbidden in strict mode. \$\endgroup\$
    – Oriol
    Jan 20, 2017 at 13:02
  • 1
    \$\begingroup\$ @Oriol strict mode was a bad meme. It didn't help performance, didn't really force you to write good code, and would never become the default anyway. 0-prefixed octal literals aren't going anywhere, and are as valid ecmascript as 0o. \$\endgroup\$ Jan 22, 2017 at 16:39
25
\$\begingroup\$

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!

\$\endgroup\$
11
  • \$\begingroup\$ You can modify the original array with the instance methods. The second is the current index, and the third is the array being iterated. \$\endgroup\$
    – Claudia
    Feb 4, 2015 at 9:14
  • \$\begingroup\$ @impinball which instance methods ? \$\endgroup\$
    – Optimizer
    Feb 4, 2015 at 9:16
  • 13
    \$\begingroup\$ "Joined the site a week back" - 21.4k rep... \$\endgroup\$
    – GamrCorps
    Oct 23, 2015 at 18:54
  • 2
    \$\begingroup\$ As well as .map, recursion is another technique that can sometimes help you turn a for loop into an expression. \$\endgroup\$
    – Neil
    Feb 16, 2016 at 1:25
  • 2
    \$\begingroup\$ a.split("-") => a.split`-` \$\endgroup\$
    – user58826
    Apr 18, 2017 at 17:32
21
\$\begingroup\$

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 
\$\endgroup\$
2
  • 10
    \$\begingroup\$ Be warned, this actually passes an array. fun`string` is the same as fun(["string"]), not fun("string"). This is fine for functions that cast to string, like alert, but for others this could cause issues. For more information see the MDN article \$\endgroup\$
    – Cyoce
    Feb 10, 2016 at 19:17
  • 7
    \$\begingroup\$ Quick reference thing: fun`foo${1}bar${2}baz is equivalent to calling fun(["foo","bar","baz"],1,2) \$\endgroup\$
    – Cyoce
    Feb 11, 2016 at 7:49
17
\$\begingroup\$

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!

\$\endgroup\$
6
  • \$\begingroup\$ Here's a trick for ranges that'll save a couple more characters: (x,y)=>[...Array(y-x)].map(a=>x++) \$\endgroup\$
    – Mwr247
    Oct 22, 2015 at 19:32
  • 4
    \$\begingroup\$ You can cut off another 11 bytes to make a range from 0 to x: x=>[...Array(x).keys()] \$\endgroup\$
    – Mwr247
    Oct 22, 2015 at 20:50
  • \$\begingroup\$ Last one for the comprehension there: n=>[for(x of Array(n).keys())if(/1/.test(x))x] (saves 7 bytes) \$\endgroup\$
    – Mwr247
    Oct 22, 2015 at 21:04
  • \$\begingroup\$ @Mwr247 Actually, I can see now that ranges are usually not as short with comprehensions as with other nice ES6 features. I'll add in a section on strings instead, and let you handle ranges. \$\endgroup\$ Oct 23, 2015 at 2:44
  • \$\begingroup\$ It is worth noting that Array Comprehensions have been deprecated and removed from all recent versions of javascript. See the MDN docs on the subject. \$\endgroup\$ Mar 25, 2019 at 16:53
15
\$\begingroup\$

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

\$\endgroup\$
4
  • 2
    \$\begingroup\$ But when you are golf-ing, you generally don't care about this etc. \$\endgroup\$
    – Optimizer
    Sep 12, 2014 at 17:04
  • 1
    \$\begingroup\$ Generally not, but it is a caveat, one that you may never know when it comes up. It's also more common for lambdas to not need a function-local this binding in production. \$\endgroup\$
    – Claudia
    Feb 4, 2015 at 9:05
  • \$\begingroup\$ Also, if you want to take all of your arguments, you can use the "rest" argument feature, e.g., f=(...x)=>x would have that f(1,2,3) => [1,2,3]. \$\endgroup\$ Jan 28, 2016 at 13:17
  • 1
    \$\begingroup\$ Here's a tip specific to this site: if you're answering with a function that takes the form (x,y)=>... you can save a byte with currying by replacing it with x=>y=>... \$\endgroup\$
    – Cyoce
    Sep 23, 2016 at 22:29
15
\$\begingroup\$

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.

\$\endgroup\$
10
  • 1
    \$\begingroup\$ I think, just writing an anonymous function might be even shorter \$\endgroup\$
    – Downgoat
    Aug 30, 2015 at 5:27
  • 2
    \$\begingroup\$ But even better: eval returns the last expression evalued, so you don't need ;o - try it: a=>eval('for(o="",i=0;i<a;i++)o+=i') \$\endgroup\$
    – edc65
    Sep 10, 2015 at 8:40
  • 4
    \$\begingroup\$ But template strings! \$\endgroup\$ Nov 13, 2015 at 4:24
  • 1
    \$\begingroup\$ @CᴏɴᴏʀO'Bʀɪᴇɴ Care to explain how template strings would work here using the example function as context? \$\endgroup\$ Feb 5, 2016 at 7:55
  • 1
    \$\begingroup\$ @CamiloMartin You call that golfing? 12 chars shorter: f=a=>a?f(--a)+a:"" (than yours) \$\endgroup\$
    – tjjfvi
    Aug 7, 2021 at 1:10
12
\$\begingroup\$

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`
`
\$\endgroup\$
1
11
\$\begingroup\$

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
\$\endgroup\$
1
  • \$\begingroup\$ In that last example, you also need to be sure that the number will always be an integer. \$\endgroup\$ Oct 4, 2016 at 1:15
10
\$\begingroup\$

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!

\$\endgroup\$
10
\$\begingroup\$

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.

\$\endgroup\$
7
  • \$\begingroup\$ Shouldn't 2**26 be 2**29? \$\endgroup\$
    – Shaggy
    Sep 15, 2017 at 16:39
  • \$\begingroup\$ @Shaggy Heck. Good catch! \$\endgroup\$
    – Arnauld
    Sep 15, 2017 at 16:43
  • \$\begingroup\$ Didn't want to edit in myself 'cause I've got code-blindness! :D \$\endgroup\$
    – Shaggy
    Sep 15, 2017 at 16:44
  • \$\begingroup\$ Using .keys(), you don't need a lambda : [...Array(10).keys()].map(do_something_with) \$\endgroup\$ Jan 9, 2018 at 22:05
  • 2
    \$\begingroup\$ 38(FF)/34(V8): [...isNaN+''] \$\endgroup\$
    – l4m2
    Apr 23, 2018 at 6:23
10
\$\begingroup\$

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.

\$\endgroup\$
1
  • 3
    \$\begingroup\$ You don't need the new in there, so using the constructor is actually shorter for the second example \$\endgroup\$
    – Optimizer
    Aug 1, 2015 at 23:03
9
\$\begingroup\$

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)
\$\endgroup\$
11
  • \$\begingroup\$ Here's a suggestion for the second example: x=>Array(x).fill(i=0).map(a=>i++) Also, I'm not sure that the 0 in .fill(0) is necessary. Have you tried it without? \$\endgroup\$ Oct 23, 2015 at 2:47
  • \$\begingroup\$ @ETHproductions You're right, I forgot the 0 isn't needed in the fill before map. This makes it 1 character shorter than your suggested one though, so I'll keep it like that. Thanks! \$\endgroup\$
    – Mwr247
    Oct 23, 2015 at 2:51
  • 2
    \$\begingroup\$ A new trick I've learned: [...Array(x)] works just as well as Array(x).fill(), and is 2 bytes shorter. x=>[...Array(x)].map((a,i)=>i) \$\endgroup\$ Dec 22, 2015 at 20:02
  • 1
    \$\begingroup\$ @yonatanmn Very nice! Only comments would be 1) the 1/4 example would be shorter written out [0,0,0,0], and 2) stringified functions are implementation specific, so won't return a reliable length (Map is 32 bytes in Chrome, but 36 bytes in Firefox). \$\endgroup\$
    – Mwr247
    May 4, 2017 at 2:26
  • 1
    \$\begingroup\$ If you need to map over a 0...n range, you can usually save a byte using Array.from (ex: [...Array(N).keys()].map(i=>i*2) vs Array.from(Array(N),(_,i)=>i*2)) \$\endgroup\$
    – nderscore
    May 1, 2019 at 4:52
9
\$\begingroup\$

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.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ +1 for its value, and i'd like to add another +1 for zootopia \$\endgroup\$
    – edc65
    Nov 29, 2016 at 8:01
9
\$\begingroup\$

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.

\$\endgroup\$
8
\$\begingroup\$

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
\$\endgroup\$
1
  • \$\begingroup\$ For the last case, if only certain characters matching a regex (like /\w/g) are interested, then using replace will be much better as in this demo. \$\endgroup\$ May 24, 2019 at 1:25
7
\$\begingroup\$

.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)
\$\endgroup\$
1
  • \$\begingroup\$ "Always prefer .map to any for loop." is overstating it a bit. If the item in question isn't an Array, e.g. you want to iterate over characters in a string, the conversion to an Array ([...s]) usually eats the savings from map; for(c of s)f(c) is longer than the unusual case of [...s].map(f), but if you'd need a closure only for the map, for(c of s)expr_with_c is meaningfully shorter than [...s].map(c=>expr_with_c). \$\endgroup\$ Jun 2, 2023 at 18:30
7
\$\begingroup\$

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 … 231-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]

\$\endgroup\$
7
\$\begingroup\$

Using flat() when building an array recursively (ES10)

When elements are appended conditionally to an array with recursive calls, a typical construction is:

f=k=>k?[...k%3?[k]:[],...f(k-1)]:[] // 35 bytes

Try it online!

(this example code filters out values that are multiple of 3)

Notice that the spread operators is used twice (costing 6 bytes) and the payload value k has to be put within a singleton array (costing 2 more bytes).

An alternate approach is to apply .flat() immediately after each iteration, saving a byte:

f=k=>k?[k%3?k:[],f(k-1)].flat():[]  // 34 bytes

Try it online!

\$\endgroup\$
7
\$\begingroup\$

ES6 functions

Math

Math.cbrt(x) saves characters than Math.pow(x,1/3), however this is obsolete when using 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 ES6 code to do that is generally much longer than using a built-in, although it can differ depending on your output format.

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, but are almost never used, except very occasionally.
  • 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 (occasionally useful), Math.fround (useless), Math.imul (useless), Math.log10 (sometimes shorter than length), Math.log2 (very useful), Math.log1p (almost completely useless).

\$\endgroup\$
7
  • 2
    \$\begingroup\$ Math.trunc(x) is four times longer than x|0. \$\endgroup\$
    – Mwr247
    Oct 22, 2015 at 19:25
  • \$\begingroup\$ @mwr247: Ok, will update. \$\endgroup\$
    – user46167
    Oct 22, 2015 at 19:29
  • \$\begingroup\$ Here's the shortest ES5 equivalents I know of for a couple of these functions: Math.hypot(a,b) => Math.sqrt(a*a+b*b) (3 bytes longer; gets even longer with more arguments), Math.sign(a) => (a>0)-(a<0) (1 byte shorter, but needs surrounding parentheses in some cases; may not work with NaN) \$\endgroup\$ Oct 23, 2015 at 3:09
  • 1
    \$\begingroup\$ @ev3commander These are just meant as in-line replacements for their respective ES6 equivalents, so they are scaled down for 99% of uses. Truly recreating these functions would require a lot more code. Also, I see no reason for needing to have a special case for -0, since (AFAIK) there's no way to obtain -0 except by manually specifying it, and practically no use for it within code-golf. But thanks for pointing those things out. \$\endgroup\$ Oct 23, 2015 at 19:12
  • 2
    \$\begingroup\$ Technically x**(1/3) is 4 characters shorter than Math.cbrt(x) and (a*a+b*b)**.5 is two characters shorter than Math.hypot(a,b) \$\endgroup\$ Sep 13, 2018 at 1:05
6
\$\begingroup\$

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('')
\$\endgroup\$
4
  • 3
    \$\begingroup\$ Remember, of course, that .join('') can be .join`` \$\endgroup\$
    – Cyoce
    May 30, 2016 at 22:32
  • \$\begingroup\$ x.replace(/ +./g,c=>c.toUpperCase()) \$\endgroup\$
    – l4m2
    Dec 23, 2022 at 16:08
  • \$\begingroup\$ @l4m2 this capitalize all characters, not the first letter of each word \$\endgroup\$
    – edc65
    Dec 24, 2022 at 20:10
  • \$\begingroup\$ it capitalize letter followed by +, so it's wrong; but fixing it is still cheaper \$\endgroup\$
    – l4m2
    Dec 25, 2022 at 4:40
6
\$\begingroup\$

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')
\$\endgroup\$
4
  • 2
    \$\begingroup\$ But fail with too much recursion for an input as little as 12345 \$\endgroup\$
    – edc65
    Dec 18, 2016 at 17:42
  • \$\begingroup\$ x==1 can probably be x<2 for savings. \$\endgroup\$ Jul 20, 2017 at 14:34
  • \$\begingroup\$ @CalculatorFeline Thanks, but then it fails for 1 or 0 (because x would be 0 or -1, respectively) \$\endgroup\$ Jul 20, 2017 at 15:18
  • \$\begingroup\$ Could be useful in certain cases. Also, !~-x for -0 bytes. \$\endgroup\$ Jul 20, 2017 at 16:42
5
\$\begingroup\$

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++]);
\$\endgroup\$
4
  • \$\begingroup\$ I generally use && and || as x?y:x and x?x:y, respectively. But I can see how this would be useful in more logic-based programs. The one problem with + would be that e.g. 3 and -3 are both truthy, but 3+-3 is not. \$\endgroup\$ Jan 28, 2016 at 2:56
  • \$\begingroup\$ @ETHproductions Ah, you are right; that is an edge case. - could also work, if s != t. \$\endgroup\$ Jan 28, 2016 at 13:21
  • \$\begingroup\$ a.filter(t=>t==e).length==a.length is incorrect. It should be !a.filter(t=>t==e).length \$\endgroup\$ Sep 23, 2016 at 18:34
  • \$\begingroup\$ @ETHproductions right you are! \$\endgroup\$ Sep 23, 2016 at 21:11
5
\$\begingroup\$

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.

\$\endgroup\$
5
  • \$\begingroup\$ In your sample there's no need to keep a \$\endgroup\$
    – l4m2
    Apr 13, 2018 at 16:01
  • \$\begingroup\$ @l4m2 I can't get your point, help please ... \$\endgroup\$
    – edc65
    Apr 13, 2018 at 17:51
  • \$\begingroup\$ (i,b)=>{for(r=0;i<=b;i++)r+=Math.exp(i);return 1/r} \$\endgroup\$
    – l4m2
    Apr 13, 2018 at 18:00
  • \$\begingroup\$ @l4m2 uh right, return a/r would be a better example \$\endgroup\$
    – edc65
    Apr 13, 2018 at 18:09
  • 2
    \$\begingroup\$ eval is still better (a,b)=>1/eval("for(r=0,i=a;i<=b;i++)r+=Math.exp(i)") and in this case (i,b)=>1/eval("for(r=0;i<=b;)r+=Math.exp(i++)") \$\endgroup\$
    – JayXon
    Sep 19, 2019 at 8:06
5
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ The last example can be written as a=>F=b=>a>b?0:a+++F(b), modifying a for each recursive call. This doesn't help in that case but it might save bytes in cases with more arguments. \$\endgroup\$
    – Neil
    Jan 20, 2017 at 11:05
  • \$\begingroup\$ Heh, I was just thinking about writing a tip for this :-) \$\endgroup\$ Jan 20, 2017 at 12:35
4
\$\begingroup\$

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)
\$\endgroup\$
4
\$\begingroup\$

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
//                        ^^^^^
\$\endgroup\$
4
\$\begingroup\$

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
\$\endgroup\$
4
\$\begingroup\$

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"]
\$\endgroup\$
2
  • \$\begingroup\$ Why is only the last block highlighted? \$\endgroup\$ Jul 20, 2017 at 16:14
  • \$\begingroup\$ @CalculatorFeline Thanks, fixed. \$\endgroup\$
    – Chiru
    Jul 20, 2017 at 16:35
4
\$\begingroup\$

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!

\$\endgroup\$
1
  • \$\begingroup\$ All indexing is done by string value, which is why you can use a BigInt (or anything else with a stringifier). \$\endgroup\$
    – Neil
    Jan 22, 2022 at 10:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.