Tips for golfing in JavaScript

Question

What general tips do you have for golfing in JavaScript? I'm looking for ideas that can be applied to code golf problems in general that are at least somewhat specific to JavaScript (e.g. "remove comments" is not an answer).

Note: Also see Tips for Golfing in ECMAScript 6 and above

Answer 1

Converting a number from hexadecimal

Instead of using the lengthy parseInt to convert a number from hexadecimal:

parseInt(a,16)

Add "0x" to the beginning, then convert to a number with a usual technique:

+("0x"+a)   // 5 bytes saved

Even better solution, abusing order of operations:

"0x"+a-0    // another byte saved

Note that this last one will not work in all situations, depending on the surrounding operators.

In ES6, you can also use this trick to convert from octal or binary:

"0b"+a-0   // binary
"0o"+a-0   // octal

Answer 2

tl;dr: Use ES6 features!

Arrow functions

Doc: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/arrow_functions
Example:

s = x => x*x
// s = function (x) {
//   return x * x;
// }

Answer 3

2 to a power

If for some reason you need to calculate 2 to the nth power,

1<<n is shorter than Math.pow(2,n).

If you needed to calculate 2 to the n+1th power,

2<<n is even shorter than 1<<n+1

Likewise for 4<<n for n+2, 8<<n for n+3, 16<<n for n+4, etc.

(sorry if this is too obvious)

Answer 4

for a given array, we know a for..in loop might lead to errors because stuff might be added to the Array.Prototype, so we revert to a normal for loop:

So instead of this iteration:

for (var i=0; i<arr.length; i++ )

lets do this:

for (var i=arr.length; i--; )

if we just want to iterate the Array not caring it goes backwards

Answer 5

Use Mozilla's nonstandard "expression closures" feature to save many characters in a script that only needs to work in the SpiderMonkey/Firefox or Rhino engines. For example,

function foo(){return bar}

becomes

function foo()bar

See the Stack Overflow page for more such tricks.

Answer 6

Use if(~a.indexOf(b)) instead of if(a.indexOf(b)!=-1)

Answer 7

Conditionally reverse an array with .sort

Let's say you have an array, l, and you want to reverse it if and only if someBoolean.

The naïve way to do it would be if(someBoolean)l.reverse()

Instead, you can abuse the way that JavaScript's sort function works.

if(someBoolean)l.reverse() // before
someBoolean&&l.reverse()   // golfier before
l.sort(_=>someBoolean)     // after
                      ^^^^

Answer 8

Determining if an array is empty

The empty array is truthy in JavaScript, i.e. []?b:c returns b. This leaves us to find our own ways to determine if an array is empty. The most obvious way is .length:

a.length?b:c

However, this can be shortened by 2 bytes with the in operator:

0 in a?b:c

Note: unlike in Python, x in y checks whether y has a key x; it's a shorthand for y.hasOwnProperty(x).

This is, I believe, the shortest code that unconditionally detects whether a is empty. However, there are a few alternatives that work in various scenarios:

a[0]?b:c

This works iff the first item in a is guaranteed to be truthy. For example, a=[1];a[0] returns 1, which is truthy; a=[];a[0] returns undefined, which is falsy; but a=[0];a[0] returns 0, which is also falsy. But in general, this trick works on arrays of chars or positive numbers.

a+""?b:c

When arrays are casted to strings, the brackets are left out. [1,2,3]+"" returns the string "1,2,3". So casting a to a string will return the empty string (falsy) for the empty array, and a truthy string otherwise.

Caveat: If a contains a single array which contains either nothing or a single array containing... etc., e.g. [[]], [[[[[[]]]]]], it will still be casted to the empty string.

a+a?b:c

This is practically exactly the same as the above example, but a byte shorter. When + is called on two arrays, JS stupidly converts them both to strings and concatenates those. So a+a returns exactly the same thing as a+"", but doubled.

Answer 9

Comparing numbers by absolute value:

a*a<b*b // 7 bytes

Vastly shorter than Math.abs (8 bytes without counting ()), and like calling the function this will allow casting strings to numbers on the fly.

Sorting by arrays of multiple values, comparing them all one by one (e.g. finding minimum time durations in 01:23:45 notation):

a.map(v=>v.split`:`).sort(([h,m,s],[g,n,a])=>h-g||m-n||s-a)[0].join`:`

This example sorts 00:00:00 < 01:00:00 < 01:00:01 < 22:59:59 < 23:00:00 and finds the smallest element. This works because || short-circuits for any value that isn't falselike and so the expression h-g||m-n||s-a will evaluate the next value in the chain only when the last difference was 0.

Answer 10

Sometimes declaring a variable (or more) as function parameters can save some strokes by avoiding the var keyword. This use case is fairly rare though:

function f(){var i} => function f(i){}

Also you can use short circuit operators to avoid if statements:

if(a)b => a&&b

if(!a)b => a||b

To coerce to a number: str-0

Answer 11

Repeated characters

Be creative when trying to repeat the same character:

"aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
s="a";while(s.length<32)s+=s
for(s="a";s.length<32;s+=s)
for(s="aa",i=4;i--;s+=s)
s="aaaaaaaa",s+=s,s+=s
s="aaaaaaaa",s+=s+s+s
Array(33).join("a")

With ES6, this becomes even shorter:

'a'.repeat(32)

Note: It is unlikely that you use it to form a string, but the idea can be applied to form large numbers too

Answer 12

Use shorthands instead of primitives

Most of these are done by any sane minifier, but not all.

• 2 bytes saved

  true
  !0
  

• 3 bytes saved

  false
  !1
  

• 5 bytes saved

  Infinity
  1/0
  

• 5 bytes saved

  undefined
  0[0]   (any digit works)
  

Answer 13

Initialize arrays with [] instead of Array(), and add to arrays with [.length]:

a=[];       // initialize a new array
a[0]=15;    // insert element to end of array
a[1]=30;    // insert another element to end of array

Answer 14

Some extra tricks that I don't see very often, that are more JS-specific:

• Use array literals and indexing as a sort of switch as an expression. You can leave out "unnecessary" elements and they'll default to undefined (which is a falsy value, by the way). E.g. [,1,,-1][i%4] would evaluate to either 1 or -1 depending on whether i is 1,5,9,13,... or 3,7,11,15,... (and we don't care about the other cases).

• Similarly, use object literals when you want arbitrary strings for the keys.

• This one is common to all C-style languages: (ab)use the fact that that & and | works just as well as && and || with boolean values, albeit with different precedence. Keep in mind that the single-character variants aren't short-circuiting though!

• -~x is the same as x+1, and ~-x is the same as x-1. Sometimes the {bitwise,arithmetic} negation variants are useful to avoid extra parens; for instance, 4*~-n rather than 4*(n-1).

• ~9 could be used as a two-character literal for the value -10 (I've never had a use for this, but it's a fun curiosity).

Answer 15

There's a few other ideas that come to mind:

Ternary operators with functions

Ternary operators also work well as a substitute for if..then..else statements with functions...

if(a==b){
   c();
}else{
   if(a==d){
       e();f();
   }
   g();
}

can be replaced with

(a==b)?c():(((a==d)&&(e()|f()))|g())

You can take this further by abusing functions that don't take parameters:

a==b?c():g(a==d&&f(e()))

If a, b, and d are numbers, you can use subtraction to test for 0.

a-b?g(a-d||f(e())):c()

Decimal Base Exponents

Another is the reduction of decimal base exponents... for example 1000000 can be replaced with 1e6

Answer 16

You can use -~s instead of +s+1, and ~-s instead of +s-1, if s is a string or a number between -(2^31)-1 and 2^31.

Answer 17

document.getElementById

This one's a HUGE byte-saver.

document.getElementById('a').innerHTML="foo"; //before
a.innerHTML="foo"; //after

Answer 18

Use with to import methods and properties from objects into the local scope.

It becomes more apparent with longer class names or repeated use of the same one:

a=Math.max(1,2),b=Math.min(2,7),c=Math.sqrt(100)
with(Math)a=max(1,2),b=min(2,7),c=sqrt(100)

Answer 19

Use valueOf to make shorter function calls. Instead of:

function f(){...}
f()

use

f={valueOf:function(){...}}
+f

If you call the function f frequently enough, you will save characters because +f is 1 shorter than f().

If you usef even more than that, you can use __defineGetter__:

__defineGetter__('f',function(){...})
f

This trick also works for a function that takes 1 argument.

function f(v){...}
f(x)

Becomes

__defineSetter__('f',function(v){...})
f=x

But now it will always return v.

---

Edit: I forgot to mention this, but it only works for a function that doesn't take arguments.

Answer 20

Another thing I came across is forcing a multidimensional array into a single-dimensional array like this:

[[1,2],[3,4]].join().split(",") // ["1", "2", "3", "4"]

It does convert everything into strings, so basically only numbers/strings are possible, but it can come in handy. Calculating with strings automatically converts it into numbers anyway.

EDIT: As Austin Hyde pointed out, you can flatten one level like this:

[].concat.apply([],[[1,2],[3,4]])

Although it only takes it down one level, the data types remain.

Answer 21

Treat strings like you do C Strings.

Given s="hello"

s[0]

is equivalent to

s.charAt(0)

and

s.split("")[0]

Answer 22

When it comes to comparing strings against eachother, you’d normally use

x=='*'

If it is the case that x only has a few fixed options, e.g. x can only be one of the lowercase letters or the asterisk (*), then you can use JavaScript’s string comparison like this:

x<'a'

In the case of limited options, this will be true if and only if x=='*' and false otherwise, saving one amazing byte! This is based on the Unicode table.

For an actual example, see this revision of an answer of mine.

Answer 23

setInterval Hacks

Pass a string instead of a function to setInterval.

setInterval(function(){console.log(0)},1) //before
setInterval('console.log(0)',1) //after

You can also omit the last argument if you don't care about the speed at which your interval will execute. NOTE: This does not work in Firefox...

setInterval('console.log(0)',1) //before
setInterval('console.log(0)') //after
setInterval`console.log(0)` //after - ES6 only

Answer 24

Stack Ternary Operators

Need to test many conditions, try this:

a ? b : c ? d : e ? f : g

Use the comma operator

Using an arrow function, and need to return something else than what your doing? Feel no need to break out the {b;return a} and instead use the comma operator:

   f=>{f.map(b=>...);return a}
   f=>(f.map(b=>...),a)

Take advantage of =

Assignment without var can be vital to shave off bytes. Since it returns the value, you can:

Assign variables in function calls:

Array(100).fill(100);p=100
Array(p=100).fill(p)

Stack variable assignment:

a=1,b=1,c=1
a=b=c=1

Assign variables in control structures:

if(b=1) {...}

Since 1 is truthy (If tested against a boolean it will convert to true), the block will run

Answer 25

Use atob() and btoa() to compress/decompress strings

alert('adifonoiewnfqowinfiodnasfoinqeiwnfqoiwnfoiansdfoinqowfe') //before
alert(btoa('iØ¢z"{ ߪ"ø¨vv¬~§©è°ú¨    ߢ&§±×èz¨Á÷')) //after

Great for some restricted-source challenges. Only works on strings with a-zA-Z0-9 and no other chars.

Answer 26

Abuse uninitialized variables, mostly for null and undefined

• undefined varies, some better than others

  • One-time use (5 bytes saved):

    undefined
    1..a       (any digit+letter works)
    

  • Multiple uses (8 per use - 5 bytes saved, 10 bytes for 2 uses)

    undefined;undefined
    var u;u;u
    

  • Existing declaration (8 per use - 5 bytes saved, 5 bytes for 1 use, 13 bytes for 2 uses)

    var x;undefined
    var x,u;u
    
    var x;undefined;undefined
    var x,u;u;u
    

• null varies, generally better replaced in larger golfs

  • If there is a declaration anywhere, replace it unless null is specifically required (3 per use - 2 bytes saved).

    var x;null
    var x,n;n
    

  • Single uses:

    • If no variable declaration exists, do not change.

    • If any undefined exists (in any form), declare an unused variable (5 bytes saved if one of each).

      v==null;undefined
      var u;v==u;u
      

    • If more than two such tests exist, declare an unused variable (two are equal).

      a==null;b==null;c==null
      var u;a==u;b==u;c==u
      

    • Otherwise, keep as null

  • Multiple uses:

    • Declare an unused variable, unless null is specifically required (2 is equivalent).

      null;null;null
      var u;u;u;u
      

• Prefer to avoid these tests when possible. Aim for implicit boolean tests (if(0);)

Answer 27

Removing something from a string

When you want to remove a certain substring from a string, split by that and join.

.replace(/h/g,'') // 17 bytes
.split`h`.join`` // 16 bytes
.replaceAll('h','') // 19 bytes

Sadly the ES2021 replaceAll is longer.

Answer 28

Prefer Array#map() to Array#forEach()

Self-explanatory, a flat 4 bytes saved

a.forEach(function(e){/* ... */})
a.map(function(e){/* ... */})

Answer 29

Instead of checking if something is a string like this:

var a = "aString";
if (typeof a === 'string') {
    runSomething();
}

You can do this:

var a = "aString";
a===''+a&&runSomething();

Answer 30

If you are ever in a situation where you have an array a and you need to get its last element as an array of itself, use Array#slice():

[a[a.length-1]]    // 15
a.slice(-1)        // 11