# Tips for Golfing in ECMAScript 6 and above

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.

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

• 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 ... – edc65 Feb 9 '16 at 21:04
• It looks alright. Maybe it was the lack of semicolons? ;) (btw, you can also use it as rest parameters, like splats in Ruby) – gcampbell May 25 '16 at 9:46
• You could add that it also has a use case in function signatures :) – Felix Dombek Jul 18 '17 at 11:17
• Misclick did not mean to downvote – Stan Strum Oct 1 '17 at 1:20
• @StanStrum it happens. I'll make a small update to this post so you can eventually change your vote (or you already did?) – edc65 Oct 1 '17 at 9:31

## 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


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.

• 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. – Optimizer Jul 31 '15 at 18:23
• '0x'+v-0 is even shorter, but may not work as well in some scenarios. – ETHproductions Dec 22 '15 at 20:06
• By the way, 0767 (ES5) is shorter than the 0o767 (ES6) notation. – Camilo Martin Aug 6 '16 at 21:09
• @CamiloMartin 0767 is a non-standard extension, and it's explicitly forbidden in strict mode. – Oriol Jan 20 '17 at 13:02
• @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. – Camilo Martin Jan 22 '17 at 16:39

## 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!

• .search is shorter, use it when possible! but it's not the same of .indexOf. .search wants a regexp, not a string. Try 'abc'.search('.') – edc65 Sep 29 '14 at 22:02
• @edc65 Updated! – Optimizer Sep 29 '14 at 22:04
• "Joined the site a week back" - 21.4k rep... – GamrCorps Oct 23 '15 at 18:54
• As well as .map, recursion is another technique that can sometimes help you turn a for loop into an expression. – Neil Feb 16 '16 at 1:25
• a.split("-") => a.split- – programmer5000 Apr 18 '17 at 17:32

## 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
joinfoobar // Works
join${5} // Doesn't work  • Be warned, this actually passes an array. funstring  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 – Cyoce Feb 10 '16 at 19:17 • Quick reference thing: funfoo${1}bar${2}baz is equivalent to calling fun(["foo","bar","baz"],1,2) – Cyoce Feb 11 '16 at 7:49 # 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! • Here's a trick for ranges that'll save a couple more characters: (x,y)=>[...Array(y-x)].map(a=>x++) – Mwr247 Oct 22 '15 at 19:32 • You can cut off another 11 bytes to make a range from 0 to x: x=>[...Array(x).keys()] – Mwr247 Oct 22 '15 at 20:50 • Last one for the comprehension there: n=>[for(x of Array(n).keys())if(/1/.test(x))x] (saves 7 bytes) – Mwr247 Oct 22 '15 at 21:04 • @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. – ETHproductions Oct 23 '15 at 2:44 • 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. – Keefer Rourke Mar 25 '19 at 16:53 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 • But when you are golf-ing, you generally don't care about this etc. – Optimizer Sep 12 '14 at 17:04 • 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. – Isiah Meadows Feb 4 '15 at 9:05 • 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]. – Conor O'Brien Jan 28 '16 at 13:17 • 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=>... – Cyoce Sep 23 '16 at 22:29 # 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. • I think, just writing an anonymous function might be even shorter – Downgoat Aug 30 '15 at 5:27 • @vihan yeah, both of these functions could be made anonymous to save 2 bytes each. The one byte savings still stands though. – jrich Aug 30 '15 at 13:29 • 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') – edc65 Sep 10 '15 at 8:40 • But template strings! – Conor O'Brien Nov 13 '15 at 4:24 • @CᴏɴᴏʀO'Bʀɪᴇɴ Care to explain how template strings would work here using the example function as context? – WallyWest Feb 5 '16 at 7:55 # 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   # 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  • In that last example, you also need to be sure that the number will always be an integer. – ETHproductions Oct 4 '16 at 1:15 # 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)  • 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? – ETHproductions Oct 23 '15 at 2:47 • @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! – Mwr247 Oct 23 '15 at 2:51 • Also, for the last example, a=>a%2-1 works fine, as does a=>a%2<1. – ETHproductions Oct 23 '15 at 12:45 • 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) – ETHproductions Dec 22 '15 at 20:02 • @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). – Mwr247 May 4 '17 at 2:26 # 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. • +1 for its value, and i'd like to add another +1 for zootopia – edc65 Nov 29 '16 at 8:01 ## 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.splitl.joiny // 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  • 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. – Shieru Asakoto May 24 '19 at 1:25 ## 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.rawx:${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.

## 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.

• Shouldn't 2**26 be 2**29? – Shaggy Sep 15 '17 at 16:39
• @Shaggy Heck. Good catch! – Arnauld Sep 15 '17 at 16:43
• Didn't want to edit in myself 'cause I've got code-blindness! :D – Shaggy Sep 15 '17 at 16:44
• Using .keys(), you don't need a lambda : [...Array(10).keys()].map(do_something_with) – long-lazuli Jan 9 '18 at 22:05
• @long-lazuli If you don't need a lambda and just want a range, then you probably don't need map either... – Arnauld Jan 9 '18 at 22:12

## 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;


Try it online!

## 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. • You don't need the new in there, so using the constructor is actually shorter for the second example – Optimizer Aug 1 '15 at 23:03 # .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) ## 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] ## 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')  • But fail with too much recursion for an input as little as 12345 – edc65 Dec 18 '16 at 17:42 • x==1 can probably be x<2 for savings. – CalculatorFeline Jul 20 '17 at 14:34 • @CalculatorFeline Thanks, but then it fails for 1 or 0 (because x would be 0 or -1, respectively) – ETHproductions Jul 20 '17 at 15:18 • Could be useful in certain cases. Also, !~-x for -0 bytes. – CalculatorFeline Jul 20 '17 at 16:42 ## 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. • Math.trunc(x) is four times longer than x|0. – Mwr247 Oct 22 '15 at 19:25 • @mwr247: Ok, will update. – user46167 Oct 22 '15 at 19:29 • 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) – ETHproductions Oct 23 '15 at 3:09 • @ETHproductions You need the arguments array for (the es5 workaround of) hypot. And are you sure that the workaround for Math.sign works for -0? (It should return -0) – user46167 Oct 23 '15 at 19:01 • @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. – ETHproductions Oct 23 '15 at 19:12 # 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++]);  • 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. – ETHproductions Jan 28 '16 at 2:56 • @ETHproductions Ah, you are right; that is an edge case. - could also work, if s != t. – Conor O'Brien Jan 28 '16 at 13:21 • a.filter(t=>t==e).length==a.length is incorrect. It should be !a.filter(t=>t==e).length – ETHproductions Sep 23 '16 at 18:34 • @ETHproductions right you are! – Conor O'Brien Sep 23 '16 at 21:11 # 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  # 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. • In your sample there's no need to keep a – l4m2 Apr 13 '18 at 16:01 • @l4m2 I can't get your point, help please ... – edc65 Apr 13 '18 at 17:51 • (i,b)=>{for(r=0;i<=b;i++)r+=Math.exp(i);return 1/r} – l4m2 Apr 13 '18 at 18:00 • @l4m2 uh right, return a/r would be a better example – edc65 Apr 13 '18 at 18:09 • 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++)") – JayXon Sep 19 '19 at 8:06 ## 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. • 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. – Neil Jan 20 '17 at 11:05 • Heh, I was just thinking about writing a tip for this :-) – ETHproductions Jan 20 '17 at 12:35 ## 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  # 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)  # 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('')  • Remember, of course, that .join('') can be .join – Cyoce May 30 '16 at 22:32 # 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.

• I'd note that using an OR _=>_||'asdf' is usually shorter in most cases – Downgoat Dec 3 '15 at 3:37
• @Downgoat I'd note that that returns "asdf" for an input of "" (empty string). – ETHproductions Dec 22 '15 at 20:12
• Note that the default is evaluated whenever the argument would have been undefined, even if you explicitly pass that value. For example, [...Array(n)].map((a,b,c)=>b) always passes undefined for a, and you can therefore provide a default value for it (although not in terms of b). – Neil Jul 27 '16 at 11:35

# 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
//                        ^^^^^


## 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

• you can shorten with bind operator: (l=::c.lineTo)(0,100)(100,100)(100,0)(0,0);c.stroke() – Downgoat Jun 21 '17 at 1:04
• @Downgoat Thanks, what browsers support that? (Also, from what I've seen that will error on the second call, since c.lineTo does not naturally return itself) – ETHproductions Jun 21 '17 at 11:23
• you have to rub it through babel since it's an ES7 feature – Downgoat Jun 21 '17 at 13:18