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.

Answer 3

For the sake of anyone who doesn't know what JSON is, and sees a colon in what might actually be an object, and is trying to figure out what it is, and finds this discussion, a colon is also used in JSON. There is a practice of embedding functions in a JSON object. Which might be confusing (As it was to me) for anyone who happens to see this for the first time. (Everyone isn't born with the knowledge of JSON and JavaScript programmed into their brains.) So if you find yourself at this discussion, and you think that every time you see a colon in JavaScript, that it's a label, it might not be. It might be that it's a colon after a label, OR it might be part of JSON. In fact, a colon in JSON being shown as a string, is a lot more common than a label. JSON in the form of an object, will be displayed as [object Object], with all the content hidden. So, unless the JSON is in the form of a string, and you display an object to the console (console.log(object)) all you will see is [object Object]. It is common practice to write JavaScript code, wrapped in an object. In that case you will see the JSON in the form of code. That's when you'll ask yourself, "What is this? and what is that colon for?" Then you'll find yourself at this discussion, and be told that it's a label, when it's really part of JSON. The topic of this discussion is worded: "Please explain this usage of a colon in javascript", and then the "correct answer" is marked as having to do with a label. The correct answer is that a colon can be used in more than one way. So, if you don't know what JSON is, or think you know (like I did, but didn't really understand) read about it here: JSON.org

Answer 4

That is just a label.

you can use continue [label name] (or break) in a loop to go to a label.

More explanations of what they are can be seen throughout the interwebs.

Answer 5

it is used for labeling an statement in jsvascript.check more detail here.

the labeled statement can be used with break and continue later.