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). Please post one tip per answer.

Answer 1

Fancy For Loops

you can use the standard for loop in non-standard ways

for ( a; b; c )

is essentially equivalent to:

a;
while ( b )
{
  ...
  c;
}

so a good trick is to write your code with a while loop, and then split it into the a,b,c parts in a for loop.

A couple examples I've written:

for(x=y=n;!z;x--,y++)z=i(x)?x:i(y)?y:0
for(a=b=1;b<n;c=a+b,a=b,b=c);

Chain your setters

If you're initializing or resetting multiple values, chain the value to all the variables that need it:

a=b=1;

Implicit Casting

Don't check your types, just use them as they are. parseInt() costs 10 characters. If you need to cast out of a string, be creative:

a='30';
b='10';
c = a + b; //failure
c = parseInt(a) + parseInt(b) //too long

c = -(-a-b); //try these
c = ~~a+~~b;
c = +a+ +b;
c = a- -b;

Avoid Semicolons

JavaScript has automatic semi-colon insertion. Use it often and well.

One-liners

Save on brackets by shoving as much as possible into single lines, or parameters:

a( realParam1, realParam2, fizz='buzz' )

Increment/Decrement operators

a = a - 1;
foo(a);

and

foo(a);
a = a - 1;

can easily be rewritten as

foo(--a);

and

foo(a--);

respectively.

Use this or self instead of window in global context

self explanatory 2 character savings.

Use Array-Access for repeat function calls

This is definitely a balancing act between variable/function name length and number of invocations. Instead of calling a.longFunctionName() twice, it's shorter to save the name and call the function via array-access:

a.longFunctionName(b)
a.longFunctionName(c)
//42

-vs-

f='longFunctionName'
a[f](b)
a[f](c)
//34

this is especially effective with functions like document.getElementById which can be reduced to d[e]().

Note:

For a single call, the relative cost* is 8 + name.length characters. Each subsequent call has a relative cost of 2 characters.

For standard invocation, all calls cost name.length characters.

Use this method if 8 + name.length + (2 * invocations) < invocations * name.length

i = invocations len = minimum function length to get advantage

i | len
=======
1 |  ∞
2 | 12
3 |  7
4 |  6
5 |  5
6 |  4

_{* relative cost doesn't include the calling object, perens, or parameters. Essentially: a.XXX() vs a[XXX]()}

Answer 2

You can use the object literal form of get/set to avoid using the keyword function.

var obj = {
  get f(){
    console.log("just accessing this variable runs this code");
    return "this is actually a function";
  },
  set f(v){
    console.log("you can do whatever you want in here, passed: " + v);
  }
};

1 && obj.f; // runs obj.[[get f]]
obj.f = Infinity; // runs obj.[[set f]](Infinity)

Answer 3

Taking advantage of short-circuit operators

Rather than long if statements or using ternary operators, you can make use of && and || to shorten your code. For instance:

var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);

return match ? decodeURIComponent(match[1].replace(/\+/g, ' ')) : null;

can become

var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);

return match && decodeURIComponent(match[1].replace(/\+/g, ' '));

The || operator is often used in this way for setting defaults:

evt = evt || window.event;

This is the same as writing

if (!evt)
    evt = window.event;

Creating repetitive strings using Array

If you want to initialize a long string of a particular character, you can do so by creating an array with a length of n+1, where n is the number of times you wish to repeat the character:

// Create a string with 30 spaces
str = "                              ";

// or
str = Array(31).join(" ");

The larger the string, the bigger the saving.

Parsing numbers

Use + and ~ operators instead of parseFloat() or parseInt() when coalescing a string type that is just a number to a number type:

var num = "12.6";
parseFloat(num) === +num;  // + is 10 characters shorter than parseFloat()

var num2 = "12"
parseInt(num2) === +num;   // + is 8 characters shorter than parseInt()

var num3 = "12.6"
parseInt(num2) === ~~num;  // ~~ is 7 characters shorter than parseInt()

Be wary though, other types can be coalesced with these operators (for instance, true would become 1) an empty string or a string containing just white space would become 0. This could be useful in certain circumstances, however.

Answer 4

Use the comma operator to avoid braces (also applies to C):

if(i<10)m+=5,n-=3;

Instead of

if(i<10){m+=5;n-=3}

which is one character longer.

Answer 5

Use a bitwise operation to round a number toward zero:

// do this
T=Math.random()*6+1|0

// or do this
T=~~(Math.random()*6+1)

(Source: Random dice tipping)

Operator precedence determines which will be shorter in your program.

Answer 6

Use Mozilla's proprietary "expression closure" 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 7

Converting a while loop into a for loop is often equivalent:

while(i--);
for(;i--;);

But the second form can have variable initialization combined:

i=10;while(i--);
for(i=10;i--;);

Notice the second form is one character shorter than the first form.

Answer 8

This one is lesser known and lesser used, but can be impressive if used in the right situation. Consider a function that takes no arguments and always returns a different number when called, and the returned number will be used in a calculation:

var a = [ 
    Math.random()*12|0,
    Math.random()*11|0,
    Math.random()*10|0,
    /* etc... */ 
];

You might normally shorten this function using a single-letter variable name:

var r=Math.random,a=[r()*12|0,r()*11|0,r()*10|0,r()*9|0,r()*8|0,r()*7|0,r()*6|0,r()*5|0];

A better way to reduce the length is by abusing valueOf, which gives you a saving of 2 characters per invocation. Useful if you call the function more than 5 times:

var r={valueOf:Math.random},a=[r*12|0,r*11|0,r*10|0,r*9|0r*8|0,r*7|0,r*6|0,r*5|0];

Answer 9

Sneak variable initialization into the prompt() call for getting user input

n=prompt(i=5);     // sets i=5 at the same time as getting user input

instead of using

n=prompt();i=5;

As a side-effect, it displays the input value in the prompt window while saving 1 character.

Answer 10

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 11

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 12

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 13

In some cases, a conditional check for empty can be replaced with multiplication. For instance:

a?42:0

Returns 42 if a is 1 and 0 if a is 0. This does the same thing:

a*42

and saves two characters.

Answer 14

If you're initializing a variable to 1 in every iteration of a loop (for example, resetting a variable in an outer loop for an inner loop), like the following (from my answer to this question):

for(j=n-2;p=1,j++<=n;r|=p)for(i=1;++i<j;)p=j%i?p:0;
          ^^^^

Since the result of a condition like j++<=n is 1 whenever its true, you can just assign the condition directly to the variable (because when it becomes false, the loop will stop executing and will no longer matter):

for(j=n-2;p=j++<=n;r|=p)for(i=1;++i<j;)p=j%i?p:0;
          ^^^^^^^^

You can usually save 2 characters using this method. Regards to @ugoren for the idea in the comments to that answer.

---

For another example, I also applied this trick to my answer here with the expression w=r=++c<S.length in my outer for loop, saving a total of 4 characters.

Answer 15

Transforming to a Boolan:

if(b){b=true}else{b=false}
b=b?true:false;
b=b?!0:!1;
b=!!b;

Note: They change 0, "",false, null, undefined and NaN to false (everything else to true)

Answer 16

combine nested for loops

// before:
for(i=5;i--;)for(j=5;j--;)dosomething(i,j)

// after:
for(i=25;i--;)dosomething(0|i/5,i%5)

Answer 17

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 18

You can check if a value is *truish by simply passing it:

if(val){...}

*everything different than 0, "", false, null, undefined and NaN is evaluated to true !

This method can be applied with many other functions and operators:

• ternary operator val?"true":"false";
• for loop for(;val;){...}
• while loop while(val){...}
• etc...

Note: it is exactly to (val == true) and (val != false)

Answer 19

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);
new Array(33).join("a");
s="aaaaaaaa",s+=s,s+=s;
s="aaaaaaaa",s+=s+s+s;

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

Answer 20

Treat strings like you do C Strings.

Given s="hello"

s[0]

is equivalent to

s.charAt(0)

and

s.split("")[0]

Answer 21

Less/Greater than "10/100/1000..." vs "9/99/999...":

//for(i=0;i<20;i++){
    if(i<10){}else{}
    if(i>9){}else{}
//}

Note: Just remember to swap what is inside the if with the else

Answer 22

Adding Values with Implicit Casting

Improved zzzzBov solution:

//not so good
-(-a-b)==c;

//best
a- -b==c;

We save 2 characters by using the second solution.

Note: you MUST leave the space between the - operators

Answer 23

Looping Tip I

You can save 1 character when looping by changing the i on the last time used:

//not so god
for(i=0;i<3;i++){
  alert(i);
}

//best
for(i=0;i<3;){
  alert(++i);
}

Note: works with -- too (but modify the loop accordingly to avoid infinite looping)

---

Looping Tip II

There are certain scenarios where you can save one character by playing with the incrementing operator and values:

for(i=0;i++<9;)
for(i=0;++i<10;)

//and

for(i=11;i-->0;)
for(i=11;--i>-1;)

Note: you need to pay attention when for example 0 to -1. and 9 to 10, 99 to 100, so play around until you find a way to save the character

Answer 24

Splitting with numbers to save the quotemarks:

"alpha,bravo,charlie".split(",") // before
"alpha0bravo0charlie".split(0)   // after

Answer 25

How to compare a number with help of how numbers turn into booleans:

If you are going to check if something is equal to a positive number, you can subtract that amount and reverse what was inside the if and else blocks:

//simplified examples:
(x==3)?"y":"n"; <- 15 Chars
(x-3)?"n":"y"; <- 14 Chars

//expanded examples:
if(x==3){
    yes();
}else{
    no();
}

if(x-3){
    no();
}else{
    yes();
}

And in case you are wanting to compare with a negative number (*different than -1), you just simply need to add this number instead of subtracting.

*well, you can surely use x.indexOf(y) + 1, but in the special case of -1 you have the opportunity to use ~x.indexOf(y) instead.

Answer 26

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