Please explain this usage of a colon in javascript

Question

I'm making a library, and I often inspect the result of Closure Compiler's output to see how it's doing things (I do have unit tests, but I still like to see the compiled code for hints of how it could compress better).

So, I found this very weird piece of code, which I never seen before.

variable : {
    some();
    code()
}

Note: this is not an object literal! Also, there is no ? anywhere that would make it a ?: conditional.
That code is in a regular function block (an IIFE).

variable, in this case, is an undefined variable. There's no code making it true, false, or whatever, and just to make sure, I put a console.log in there and indeed, I get a ReferenceError.

Please do note that I test my code in IE8 too, so this isn't just in modern browsers. It seems to be standard, plain old javascript.

So let's experiment with it. Firing up Chrome's console, I get this:

undeclaredVariable:{console.log('does this get logged?')} // yes it does.
trueValue:{console.log('what about this?')}               // same thing.
falseValue:{console.log('and this?')}                     // same thing.

but then...

(true):{console.log('does this work too?')} // SyntaxError: Unexpected token :

...and...

so?{console.log('is this a conditional?')}:{alert(123)} // Unexpected token .

So what does it do?

thisThing:{console.log('is used to declare a variable?')}
thisThing // ReferenceError: thisThing is not defined

Please, I'd love it if someone could explain to me what this code is meant to do, or at least what it does.

Answer 1

It is a label

Provides a statement with an identifier that you can refer to using a break or continue statement.

For example, you can use a label to identify a loop, and then use the break or continue statements to indicate whether a program should interrupt the loop or continue its execution.

Another common place you see it is when people stick the wonderful and useless javascript: on event handlers.

Answer 2

This is a label (the bit ending with a colon) followed by a block (the code surrounded by the curly brackets).

Blocks usually follow control statements, like if(...) { /*block*/ }, but they can also simply stand on their own, as in your example.

Labels allow jumping up several loops at a time with a continue or break; see the linked MDN page for several examples, such as:

var itemsPassed = 0;
var i, j;

top:
for (i = 0; i < items.length; i++){
  for (j = 0; j < tests.length; j++)
    if (!tests[j].pass(items[i]))
      continue top;
  itemsPassed++;
}

Here, top: is a label that code inside the inner loop can jump to, in order to escape to the outer loop.