12

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.

Improve this question
1
  • Why did someone vote to close this? Commented Dec 13, 2012 at 20:59

5 Answers 5

Reset to default
8

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Hey, this does make sense. However the part about javascript:, that's an URI schema (and yes, it's a very bad practice. It looks even more n00bish when it's javascript:void(0)).
that javascript: part stems from its usage in (and confusion with) bookmarklets and javascript links.
@CamiloMartin javascript: can be used in bookmarklets (pieces of javascript code stored as bookmarks).
@JanDvorak yes, I was thinking about the horrible outdated practice of sticking javascript: in anchor's href.
@CamiloMartin it would not be actually that terrible if it didn't break middle clicks.
|
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.

Improve this answer

9 Comments

Who in their right mind would use such labels? I understand that closure generates code with them, but... I'm glad I didn't ever used them :)
@CamiloMartin You may need them if you have nested loops. Also, you might want to refactor if you have nested loops.
@JanDvorak I swear it wasn't there before Closure Compiler did its thing :) Which speaks wonders about its minification capabilities...
Also, in that example, what happens when it continue top? Does it start over and over? Doesn't that make an infinite loop?
@CamiloMartin i still gets incremented if you do continue, so it's not an infinite loop.
|
0

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

Improve this answer

2 Comments

Fair enough, this might help beginners. But don't you think the way you worded it might be too information-heavy for this very demographic? Maybe just a non-label example like var obj = {prop:123} could illustrate the point more succinctly.
+1 for voicing your concerns. It's written the way I would want the answer to be if I were reading the post.
-1

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.

Improve this answer

4 Comments

goto is not part of ECMAScript, but you can use labels in continue statements for example. developer.mozilla.org/en-US/docs/JavaScript/Reference/…
@CamiloMartin THIS IS SPARTA!!
You probably got downvotes since you originally said goto and you also say search the web for an explanation.
The downvotes were from when you said that javascript had goto.
-1

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

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.