[Question]
  [
This is similar to other "Tips for golfing in <...>" but specifically targeting the newer features in JavaScript brought up in ECMAScript 6 and above.
JavaScript inherently is a very verbose language, `function(){}`, `.forEach()`, converting string to array, array-like object to array, etc, etc are super bloats and not healthy for Golfing.
ES6+, on the other hand, has some super handy features and reduced footprint. `x=>y`, `[...x]`, etc. are just some of the examples.
Please post some nice tricks that can help shave off those few extra bytes from your code.
**NOTE: Tricks for ES5 are already available in [Tips for golfing in JavaScript](https://codegolf.stackexchange.com/questions/2682/tips-for-golfing-in-javascript); answers to this thread should focus on tricks only available in ES6 and other future ES versions.**
However, this thread is also for users who currently golf using ES5 features. Answers may also contain tips to help them understand and map ES6 features to their style of ES5 coding.
  
[Answer]
**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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
[Answer]
## Using property shorthands
Property shorthands allow you to set variables to an arrays' values:
```
a=r[0];b=r[1] // ES5
[a,b]=r       // ES6 - 6 bytes saved
```
This can also be used like:
```
a=r[0],b=r[2] // ES5
[a,,b]=r      // ES6 - 5 bytes saved
```
You can even use this to reverse variables:
```
c=a,a=b,b=c // ES5 - uses extra variable
[b,a]=[a,b] // ES6 - not shorter, but more flexible
```
You can also use this to shorten `slice()` functions.
```
z = [1, 2, 3, 4, 5];
a=z.slice(1) // a = [2,3,4,5]; ES5
[,...a]=z    // a = [2,3,4,5]; ES6
```
## Base conversions
ES6 provides a much shorter way to convert form Base-2 (binary) and Base-8 (octal) to decimal:
```
0b111110111 // == 503
0o767       // == 503
```
`+` can be used to convert a binary, octal or hex string to a decimal number. You can use `0b`, `0o`, and `0x`, for binary, octal, and hex respectively.:
```
parseInt(v,2) // ES5
+('0b'+v)     // ES6 - 4 bytes saved; use '0o' for octal and '0x' for hex
'0b'+v-0      // Shorter, but may not work in all cases
              // You can adapt this your case for better results
```
---
If you are using this > 7 times, then it will be shorter to use `parseInt` and rename it:
```
(p=parseInt)(v,2)
```
Now `p` can be used for `parseInt`, saving you many bytes over the long run.
[Answer]
## 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`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings)**
These are super handy when you have to concat one or more string parts based on certain conditions.
Take the following example to output a quine in JS
```
(f=x=>alert("(f="+f+")()"))()
```
vs.
```
(f=x=>alert(`(f=${f})()`))()
```
In a template string, which is a string inside two backquotes (`), anything inside a `${ }` is treated as a code and evaluated to insert the resulting answer in the string.
I'll post a few more tricks later. Happy golfing!
[Answer]
## Using string templates with functions
When you have a function with one string as the arguments. You can omit the `()` if you don't have any expressions:
```
join`` // Works
join`foobar` // Works
join`${5}` // Doesn't work 
```
[Answer]
# 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) which functions in much the same way as an array, but that's a story for another answer.
## Summary
Basically, although comprehensions are usually shorter than `.map().filter()`, it all comes down to the specifics of the situation. It's best to try it both ways and see which works out better.
P.S. Feel free to suggest another comprehension-related tip or a way to improve this answer!
[Answer]
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
[Answer]
# Using `eval` for arrow functions with multiple statements and a `return`
One of the more ridiculous tricks I've stumbled across...
Imagine a simple arrow function that needs multiple statements and a `return`.
```
a=>{for(o="",i=0;i<a;i++)o+=i;return o}
```
A simple function accepting a single parameter `a`, which iterates over all integers in `[0, a)`, and tacks them onto the end of the output string `o`, which is returned. For example, calling this with `4` as the parameter would yield `0123`.
Note that this arrow function had to be wrapped in braces `{}`, and have a `return o` at the end.
This first attempt weighs in at **39 bytes**.
Not bad, but by using `eval`, we can improve this.
```
a=>eval('for(o="",i=0;i<a;i++)o+=i;o')
```
This function removed the braces and the return statement by wrapping the code in an `eval` and simply making the last statement in the `eval` evaluate to `o`. This causes the `eval` to return `o`, which in turn causes the function to return `o`, since it is now a single statement.
This improved attempt weighs in at **38 bytes**, saving one byte from the original.
But wait, there's more! Eval statements return whatever their last statement evaluated to. In this case, `o+=i` evaluates to `o`, so we don't need the `;o`! *(Thanks, edc65!)*
```
a=>eval('for(o="",i=0;i<a;i++)o+=i')
```
This final attempt weighs only **36 bytes** - a 3 byte savings over the original!
  
This technique could be extended to any general case where an arrow function needs to return a value and have multiple statements (that couldn't be combined by other means)
```
b=>{statement1;statement2;return v}
```
becomes
```
b=>eval('statement1;statement2;v')
```
saving a byte.
If `statement2` evaluates to `v`, this can be
```
b=>eval('statement1;statement2')
```
saving a total of 3 bytes.
[Answer]
# Prefer template string new lines over "\n"
This will start to pay off at even a single new line character in your code. One use case might be:
### (16 bytes)
```
array.join("\n")
```
### (15 bytes)
```
array.join(`
`)
```
**Update:** You can even leave away the braces due to tagged template strings (thanks, edc65!):
### (13 bytes)
```
array.join`
`
```
[Answer]
# Returning Values in Arrow Functions
It's common knowledge that if a single statement follows the arrow function declaration, it returns the result of that statement:
```
a=>{return a+3}
a=>a+3
```
### -7 bytes
So when possible, combine multiple statements into one. This is most easily done by surrounding the statements with parentheses and separating them with commas:
```
a=>{r=0;a.map(n=>r+=n);return r}
a=>(r=0,a.map(n=>r+=n),r)
```
### -8 bytes
But if there are only two statements, it is usually possible (and shorter) to combine them with `&&` or `||`:
```
a=>{r=0;a.map(n=>r+=n);return r}
// - Use && because map always returns an array (true)
// - declaration of r moved into unused map argument to make it only 2 statements
a=>a.map(n=>r+=n,r=0)&&r
```
### -9 bytes
Finally if you are using map (or similar) and need to return a number and you can guarantee the map will never return a 1-length array with a number, you can return the number with `|`:
```
a=>{a=b=0;a.map(n=>(a+=n,b-=n));return a/b}
// - {} in map ensures it returns an array of undefined, so the | will make the returned
//   array cast from [ undefined, undefined, undefined ] to ",," to NaN to 0 and 0|n = n,
//   if the map returned [ 4 ] it would cast from [ 4 ] to "4" to 4 and make it 4|n
a=>a.map(n=>{a+=n,b-=n},a=b=0)|a/b
```
[Answer]
## Using `.padEnd()` instead of `.repeat()` (ES8)
Under certain circumstances, using [`.padEnd()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/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!](https://tio.run/##y0osSyxOLsosKNHNy09J/Z@mYKsQr2Br919dXa8gMcU1L0XD0EDzf3J@XnF@TqpeTn66hrqHq4@Pv7qCtkKahqaCtnq4f5CPi7rmfwA "JavaScript (Node.js) – 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!](https://tio.run/##BcFLCoAgEADQq8xuFEtyr@46iPiJQhzJCG8/vveEP4z43v3bG6XMBRxMcJ4RdQ/pbEmYY5uSI7VBNetKl0DvERQUYSQotBYlLw "JavaScript (Node.js) – Try It Online")
[Answer]
## Optimizing small constant ranges for `map()`
### Context
Starting with ES6, it has become fairly common to use (and abuse) the `map()` method instead of a `for` loop to iterate over a range \$[0..N-1]\$, so that the entire answer can be written in functional style:
```
for(i = 0; i < 10; i++) {
  do_something_with(i);
}
```
can be replaced by either:
```
[...Array(10).keys()].map(i => do_something_with(i))
```
or more commonly:
```
[...Array(10)].map((_, i) => do_something_with(i))
```
However, using `Array(N)` is rarely optimal when \$N\$ is a small constant.
### Optimizations for a range \$[0..N-1]\$, with counter
Below is a summary of shorter alternate methods when the counter \$i\$ is used within the callback:
```
N           | Method                               | Example                         | Length
------------+--------------------------------------+---------------------------------+-------
N ≤ 6       | use a raw array of integers          | [0,1,2,3].map(i=>F(i))          | 2N+10
N = 7       | use either a raw array of integers   | [0,1,2,3,4,5,6].map(i=>F(i))    | 24
            | or a string if your code can operate | [...'0123456'].map(i=>F(i))     | 23
            | with characters rather than integers |                                 |
8 ≤ N ≤ 9   | use scientific notation 1e[N-1]      | [...1e7+''].map((_,i)=>F(i))    | 24
N = 10      | use scientific notation 1e9          | [...1e9+''].map((_,i)=>F(i))    | 24
            | or the ES7 expression 2**29+'4' if   | [...2**29+'4'].map(i=>F(i))     | 23
            | the order doesn't matter and your    |                                 |
            | code can operate with characters     |  (order: 5,3,6,8,7,0,9,1,2,4)   |
            | rather than integers                 |                                 |
11 ≤ N ≤ 17 | use scientific notation 1e[N-1]      | [...1e12+''].map((_,i)=>F(i))   | 25
N = 18      | use the fraction 1/3                 | [...1/3+''].map((_,i)=>F(i))    | 24
N = 19      | use the fraction 1/6                 | [...1/6+''].map((_,i)=>F(i))    | 24
20 ≤ N ≤ 21 | use scientific notation 1e[N-1]      | [...1e20+''].map((_,i)=>F(i))   | 25
N = 22      | use scientific notation -1e20        | [...-1e20+''].map((_,i)=>F(i))  | 26
23 ≤ N ≤ 99 | use Array(N)                         | [...Array(23)].map((_,i)=>F(i)) | 27
```
**NB**: The length of the callback code `F(i)` is not counted.
### Optimization for the range \$[1..9]\$, with counter
If you'd like to iterate over the range \$[1..9]\$ and the order doesn't matter, you can use the following ES7 expression (provided that your code can operate with characters rather than integers):
```
[...17**6+'8'].map(i=>F(i))  // order: 2,4,1,3,7,5,6,9,8; length: 23
```
### Optimizations without counter
The following methods can be used if you just need to iterate \$N\$ times, without using a counter:
```
N           | Method                               | Example                         | Length
------------+--------------------------------------+---------------------------------+-------
N ≤ 5       | use a raw array of integers          | [0,0,0,0].map(_=>F())           | 2N+10
6 ≤ N ≤ 10  | use scientific notation 1e[N-1]      | [...1e7+''].map(_=>F())         | 20
11 ≤ N ≤ 17 | use scientific notation 1e[N-1]      | [...1e12+''].map(_=>F())        | 21
N = 18      | use the fraction 1/3                 | [...1/3+''].map(_=>F())         | 20
N = 19      | use the fraction 1/6                 | [...1/6+''].map(_=>F())         | 20
20 ≤ N ≤ 21 | use scientific notation 1e[N-1]      | [...1e20+''].map(_=>F())        | 21
N = 22      | use scientific notation -1e20        | [...-1e20+''].map(_=>F())       | 22
23 ≤ N ≤ 99 | use Array(N)                         | [...Array(23)].map(_=>F())      | 23
```
**NB**: The length of the callback code `F()` is not counted.
[Answer]
## Writing RegEx literals with `eval`
The regex constructor can be very bulky due to it's long name. Instead, write a literal with eval and backticks:
```
eval(`/<${i} [^>]+/g`)
```
If the variable `i` is equal to `foo`, this will generate:
```
/<foo [^>]+/g
```
This is equal to:
```
new RegExp("<"+i+" [^>]+","g")
```
---
You can also use `String.raw` to avoid having to repeatedly escape backslashes `\`
```
eval(String.raw`/\(?:\d{4})?\d{3}\d{3}\d{3}\d{3}\d{3}\d{3}\d{4}/g`)
```
This will output:
```
/(?:\d{4})?\d{3}\d{3}\d{3}/g
```
Which is equal to:
```
RegExp("\\(?:\\d{4})?\\d{3}\\d{3}\\d{3}\\d{3}\\d{3}\\d{3}\\d{4}","g")
```
# Keep in mind!
`String.raw` takes up a lot of bytes and unless you have at *least* nine backslashes, `String.raw` will be longer.
[Answer]
# Filling Arrays - Static Values & Dynamic Ranges
I originally left these as comments under comprehensions, but since that post was primarily focused on comprehensions, I figured that it would be good to give this it's own place.
ES6 gave us the ability to fill arrays with static values without the use of loops:
```
// ES5
function(x){for(i=0,a=[];i<x;i++)a[i]=0;return a}
// ES6
x=>Array(x).fill(0)
```
Both return an array of length x, filled with the value 0.
If you want to fill arrays with dynamic values (such as a range from 0...x) however, the result is a little longer (although still shorter than the old way):
```
// ES5
function(x){for(i=0,a=[];i<x;i++)a[i]=i;return a}
// ES6
x=>Array(x).fill().map((a,i)=>i)
```
Both return an array of length x, starting with the value 0 and ending in x-1.
The reason you need the `.fill()` in there is because simply initializing an array won't let you map it. That is to say, doing `x=>Array(x).map((a,i)=>i)` will return an empty array. You can also get around the need for fill (and thus make it even shorter) by using the spread operator like so:
```
x=>[...Array(x)]
```
Using the spread operator and `.keys()` function, you can now make a short 0...x range:
```
x=>[...Array(x).keys()]
```
If you want a custom range from x...y, or a specialized range altogether (such as even numbers), you can get rid of `.keys()` and just use `.map()`, or use `.filter()`, with the spread operator:
```
// Custom range from x...y
(x,y)=>[...Array(y-x)].map(a=>x++)
// Even numbers (using map)
x=>[...Array(x/2)].map((a,i)=>i*2)
// Even numbers (using filter)
x=>[...Array(x).keys()].filter(a=>~a%2)
```
[Answer]
# 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](https://codegolf.stackexchange.com/a/94318/42545))
# 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](https://codegolf.stackexchange.com/a/61505/42545))
* [Array comprehensions](https://codegolf.stackexchange.com/a/61489/42545)
* 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](https://codegolf.stackexchange.com/a/99460/42545). The best way to find the shortest solution is to [try everything](https://www.youtube.com/watch?v=J8vxiVIH7VY).
[Answer]
## 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_template_literals).
[Answer]
## Shorter ways to do `.replace`
---
If you want to replace all instances of one exact substring with another in a string, the obvious way would be:
```
f=s=>s.replace(/l/g,"y") // 24 bytes
f("Hello, World!")       // -> "Heyyo, Woryd!"
```
However, you can do 1 byte shorter:
```
f=s=>s.split`l`.join`y`  // 23 bytes
f("Hello, World!")       // -> "Heyyo, Woryd!"
```
Note that this is no longer shorter if you want to use any regex features besides the `g` flag. However, if you're replacing all instances of a variable, it's usually far shorter:
```
f=(s,c)=>s.replace(RegExp(c,"g"),"") // 36 bytes
f=(s,c)=>s.split(c).join``           // 26 bytes
f("Hello, World!","l") // -> "Heo, Word!"
```
---
Sometimes you'll want to map over each char in a string, replacing each one with something else. I often find myself doing this:
```
f=s=>s.split``.map(x=>x+x).join`` // 33 bytes
f=s=>[...s].map(x=>x+x).join``    // 30 bytes
f("abc") // -> "aabbcc"
```
However, `.replace` is almost always shorter:
```
f=s=>s.replace(/./g,x=>x+x)  // 27 bytes
f=s=>s.replace(/./g,"$&$&")  // Also works in this particular case
```
Now, if you want to map over each char in a string but don't care about the resulting string, `.map` is usually better because you can get rid of `.join```:
```
f=s=>s.replace(/./g,x=>t+=+x,t=0)&&t // 36 bytes
f=s=>[...s].map(x=>t+=+x,t=0)&&t     // 32 bytes
f("12345")  // -> 15
```
[Answer]
# `.forEach` vs `for` loops
Always prefer `.map` to any for loop. Easy, instant savings.
---
```
a.map(f)
for(x of a)f(x);
for(i=0;i<a.length;)f(a[i++]);
```
* **8 bytes total** for original
* **8 bytes saved** vs for-of (**50%** reduction)
* **22 bytes saved** vs C-style for loop (**73%** reduction)
---
```
a.map(x=>f(x,0))
for(x of a)f(x,0);
for(i=0;i<a.length;)f(a[i++],0);
```
* **16 bytes total** for original
* **2 bytes saved** vs for-of (**11%** reduction)
* **16 bytes saved** vs C-style for loop (**50%** reduction)
---
```
a.map((x,i)=>f(x,i,0))
for(i in a)f(a[i],i,0);
for(i=0;i<a.length;)f(a[i],i++,0);
```
* **22 bytes total** for original
* **1 byte saved** vs for-in (**4%** reduction)
* **11 bytes saved** vs C-style for loop (**33%** reduction)
---
```
a.map(x=>f(x)&g(x))
for(x of a)f(x),g(x);
for(i=0;i<a.length;)f(x=a[i++]),g(x);
```
* **19 bytes total** for original
* **2 bytes saved** vs for-of (**10%** reduction)
* **18 bytes saved** vs C-style for loop (**49%** reduction)
[Answer]
## 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]](https://codegolf.stackexchange.com/a/105432/58563)
### 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]](https://codegolf.stackexchange.com/a/105923/58563)
[Answer]
## 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!](https://tio.run/##y0osSyxOLsosKNHNy09J/f8/zTbb1i7bPlpPTy9b1dg@OjvWKjpWB8hL08jWNdQE8f4n5@cV5@ek6uXkp2ukaRgaaGr@BwA "JavaScript (Node.js) – 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!](https://tio.run/##y0osSyxOLsosKNHNy09J/f8/zTbb1i7bPjpb1dg@2yo6VidNI1vXUDNWLy0nsURDEyjyPzk/rzg/J1UvJz9dI03D0EBT8z8A "JavaScript (Node.js) – Try It Online")
[Answer]
## 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](https://codegolf.stackexchange.com/questions/223166/implement-ashs-float-division/223169#223169).
* `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).
[Answer]
# Return intermediate result
You know that using the comma operator you can execute a sequence of expressions returning the last value. But abusing the literal array syntax, you can return any intermediate value. It's useful in .map() for instance.
```
// capitalize words
// f is a flag indicating if prev char is space
[...x].map(c=>(f?c=c.toUpperCase():0,f=c<'!',c),f=1).join('')
// shortened to ...
[...x].map(c=>[f?c.toUpperCase():c,f=c<'!'][0],f=1).join('')
```
[Answer]
## Primality-testing function
The following 28-byte function returns `true` for prime numbers and `false` for non-primes:
```
f=(n,x=n)=>n%--x?f(n,x):x==1
```
This can easily be modified to calculate other things. For example, this 39-byte function counts the number of primes less than or equal to a number:
```
f=(n,x=n)=>n?n%--x?f(n,x):!--x+f(n-1):0
```
If you already have a variable `n` that you want to check for primality, the primality function can be simplified quite a bit:
```
(f=x=>n%--x?f(x):x==1)(n)
```
### How it works
```
f = (         // Define a function f with these arguments:
  n,          //   n, the number to test;
  x = n       //   x, with a default value of n, the number to check for divisibility by.
) =>
  n % --x ?   //   If n is not divisible by x - 1,
  f(n, x)     //     return the result of f(n, x - 1).
              //   This loops down through all numbers between n and 0,
              //     stopping when it finds a number that divides n.
  : x == 1    //   Return x == 1; for primes only, 1 is the smallest number
              //     less than n that divides n.
              //   For 1, x == 0; for 0, x == -1.
```
Note: This will fail with a "too much recursion" error when called with a sufficiently large input, such as 12345. You can get around this with a loop:
```
f=n=>eval('for(x=n;n%--x;);x==1')
```
[Answer]
# Golfing Logical Operations in ES6
"GLOE (S6)"
## General Logic
Say you have constructed statements `s` and `t`. See if you can use any of the following replacements:
```
Traditional conjuction: s&&t
Equivalent conjuction: s*t OR s&t
Traditional disjunction: s||t
Equivalent disjunction: s+t OR s|t
```
(These may not work if the order is wrong; i.e. `+` and `*` have a lower order precedence than `||` and `&&` do.)
Also, here are some handy logical expressions:
* Either `s` or `t` is true/XOR: `s^t`
* `s` and `t` are the same truth value: `!s^t` or `s==t`
## Array logic
All members of `a` satisfy condition `p`:
```
a.every(p)                             // 10 bytes (11 bytes saved)
a.map(x=>c&=p(x),c=1)                  // 21 bytes (16 bytes saved)
for(i=0,c=1;i<a.length;c&=p(a[i++]));  // 37 bytes (hideously long)
```
At least one member of `a` satisfies condition `p`:
```
a.some(p)                            // 9  bytes (13 bytes saved)
a.map(x=>c|=p(x),c=0)                // 21 bytes (14 bytes saved)
for(i=c=0;i<a.length;c|=p(a[i++]));  // 35 bytes (just please no)
```
No members of `a` satisfy condition `p`: `!a.some(p)`.
Element `e` exists in array `a`:
```
a.includes(e)                        // 13 bytes, standard built-in
~a.indexOf(e)                        // 13 bytes, "traditional" method
a.find(x=>e==x)                      // 15 bytes, find (ES6)
a.some(x=>x==e)                      // 15 bytes, some (ES5)
(a+"").search(e)                     // 16 bytes, buggy
a.filter(t=>t==e).length             // 24 bytes, no reason to use this
for(i=c=0;i<a.length;c+=e==a[i++]);  // 35 bytes, super-traditional
```
Element `e` does *not* exist in array `a`:
```
!a.includes(e)
!~a.indexOf(e)
a.every(t=>t!=e)
!a.filter(t=>t==e).length
for(i=0,c=1;i<a.length;c*=e!=a[i++]);
```
[Answer]
# Yet another way to avoid `return`
You know you should [use eval for arrow functions with multiple statements and a return](https://codegolf.stackexchange.com/a/55618/21348). In some unusual case you can save more using an inner subfunction.
I say *unusual* because
1. The result returned must not be the last expression evalued in the loop
2. There must be (at least) 2 *different* initializations before the loop
In this case you can use an inner subfunction without return, having one of the initial values passed as a parameter.
**Example**
Find the reciprocal of the sum of exp function for values in a range from a to b.
The long way - 55 bytes
```
(a,b)=>{for(r=0,i=a;i<=b;i++)r+=Math.exp(i);return 1/r}
```
With eval - 54 bytes
```
(a,b)=>eval("for(r=0,i=a;i<=b;i++)r+=Math.exp(i);1/r")
```
With an inner function - 53 bytes
```
(a,b)=>(i=>{for(r=0;i<=b;i++)r+=Math.exp(i)})(a)||1/r
```
Note that without the requirement of a lower range limit `a`, I can merge the initializations of i and r and the eval version is shorter.
[Answer]
## 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](http://meta.codegolf.stackexchange.com/questions/8424/is-this-an-acceptable-way-to-shave-a-byte-in-es6) confirms the validity of this syntax.
### Recursive functions
Using the currying syntax may also save some bytes when a recursive function takes several arguments but only needs to update some of them between each iteration.
**Example**
The following function computes the sum of all integers in the range `[a,b]`:
```
f=(a,b)=>a>b?0:b+f(a,b-1)   // 25 bytes
```
Because `a` remains unchanged during the whole process, we can save 3 bytes by using:
```
f =                         // no need to include this assignment in the answer anymore
a=>F=b=>a>b?0:b+F(b-1)      // 22 bytes
```
*Note*: As noticed by Neil in the comments, the fact that an argument is not explicitly passed to the recursive function does not mean that it should be considered immutable. If needed, we could modify `a` within the function code with `a++`, `a--` or whatever similar syntax.
[Answer]
# `Array#concat()` and the spread operator
This largely depends on the situation.
---
## Combining multiple arrays.
Prefer the concat function unless cloning.
**0 bytes saved**
```
a.concat(b)
[...a,...b]
```
**3 bytes wasted**
```
a.concat(b,c)
[...a,...b,...c]
```
**3 bytes saved**
```
a.concat()
[...a]
```
**6 bytes saved**
```
// Concatenate array of arrays
[].concat.apply([],l)
[].concat(...l)
```
---
## Prefer using an already existing array to `Array#concat()`.
Easy **4 bytes saved**
```
[].concat(a,b)
a.concat(b)
```
[Answer]
# Use `eval` instead of braces for arrow functions
Arrow functions are awesome. They take the form `x=>y`, where `x` is an argument and `y` is the return value. However, if you need to use a control structure, such as `while`, you would have to put braces, e.g. `=>{while(){};return}`. However, we can get around this; luckily, the `eval` function takes a string, evaluates that string as JS code, and *returns the last evaluated expression*. For example, compare these two:
```
x=>{while(foo){bar};return baz} // before
x=>eval('while(foo){bar};baz')  // after
//                            ^
```
We can use an extension of this concept to further shorten our code: in the eyes of `eval`, control structures also return their last evaluated expression. For example:
```
x=>{while(foo)bar++;return bar} // before
x=>eval('while(foo)++bar')      // after
//                        ^^^^^
```
[Answer]
# Destructuring assignments
ES6 introduces new syntax for destructuring assignments, i.e. cutting a value into pieces and assigning each piece to a different variable. Here are a few examples:
### Strings and arrays
```
a=s[0];b=s[1];       // 14 bytes
[a,b]=s;             //  8 bytes
a=s[0];s=s.slice(1); // 20 bytes
a=s.shift();         // 12 bytes, only works if s is an array
[a,...s]=s;          // 11 bytes, converts s to an array
```
### Objects
```
a=o.asdf;b=o.bye;c=o.length; // 28 bytes
{asdf:a,bye:b,length:c}=o;   // 26 bytes
a=o.a;b=o.b;c=o.c; // 18 bytes
{a,b,c}=o;         // 10 bytes
```
These assignments can also be used in function parameters:
```
f=a=>a[0]+a[1]+a[2]
f=([a,b,c])=>a+b+c
f=b=>b[1]?b[0]+f(b.slice(1)):b[0]*2
f=b=>b[1]?b.shift()+f(b):b[0]*2
f=([a,...b])=>b[0]?a+f(b):a*2
```
[Answer]
# Avoiding commas when storing lots of data
If you have a lot of data (i. e. indices, characters, …) that you need to store in an array, you might be better off leaving all commas away. This works best if every piece of data has the same string length, 1 obviously being optimal.
**43 Bytes (baseline)**
```
a=[[3,7,6,1,8,9,4,5,2],[5,4,3,2,7,6,5,4,3]]
```
**34 Bytes (no commas)**
```
a=[[..."376189452"],[..."543276543"]]
```
If you're willing to *change your array access*, you might reduce this even further, storing the same values like so:
**27 Bytes (same data, only changes array access)**
```
a=[..."376189452543276543"]
```
[Answer]
# 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](https://developers.google.com/web/updates/2018/05/bigint#operators)**), 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!](https://tio.run/##y0osSyxOLsosKNHNy09J/f@/2NbQzDjPmis5P684PydVLyc/XcOvNDcptUijWFNTQV9fwVIhqbIktRhFhXaCSnVxbYKmggJIhTk2FdHFsSBpiAoTiIr//wE "JavaScript (Node.js) – Try It Online")
]