1

I apologize for posting a duplicate-looking question, (I know, that there is a bunch of similar titled questions here), but none of the questions already present seems to suit my case.

In short, what does the colon do here:

<script>
  'use strict';
  foo: 1;

  //whatever else
</script>

I supposed this to be a syntax error, but it's not. And it's not a label, I think, since adding a line break foo; throws Uncaught SyntaxError: Undefined label 'foo' (though a doc page suggests exactly this, that it's a label).

I suppose this is some recent addition to the JavaScript syntax, since I have never heard of such use of the colon.

If anyone wonders, why I'm asking this, this is my explanation: I was reading an MDN doc page and there is an example:

var func = () => { foo: 1 };               
// Calling func() returns undefined!

It shows, that the curly braces in this case are treated as block delimiters and not an object literal. So I supposed, that somehow foo: 1 on its own must be syntactically legal. And indeed it is.

There is a question, which is supposed to cover every use of the colon in JavaScript, but it doesn't mention this, and no answer there does this either.

aynber
  • 22,380
  • 8
  • 50
  • 63
d.k
  • 4,234
  • 2
  • 26
  • 38
  • 1
    Pretty sure it's a label. I suspect you're getting that error with `break foo;` because `foo` isn't a loop you can break from. – Andy Oct 04 '17 at 08:56
  • 1
    Why the downvote? A guy doesn't know arrow function, he tried understanding, asked a clean question and got a clear answer. – DanteTheSmith Oct 04 '17 at 08:58

1 Answers1

3

If you'd have read further down the page you linked, you would see why it was written like that.

var func = () => { foo: 1 };

This is an attempt to return an object from a arrow function.

That doesn't work for reasons explained here:

This is because the code inside braces ({}) is parsed as a sequence of statements (i.e. foo is treated like a label, not a key in an object literal). (source)

So the returned value needs to be wrapped in parentheses:

var func = () => ({foo: 1});

To actually answer your question:

It's a label.

You can't just take the foo: 1 out of context like that.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
  • I actually read it further though after I posted the question. Yes probably it's a label, because Firefox doesn't throw on it. Probably it is just some Chrome specific issue. – d.k Oct 04 '17 at 09:00
  • 1
    _"Yes probably it's a label"_ No, not "probably". It _is_ a label. ;-) This isn't an "issue". This is working as expected. – Cerbrus Oct 04 '17 at 09:01
  • by the "issue" I meant, that Chrome probably shouldn't throw on this, if it is a legal syntax – d.k Oct 04 '17 at 09:04
  • You mean it throws on the `break foo` line? – Cerbrus Oct 04 '17 at 09:05
  • sorry, I was wrong, Firefox throws on this either `SyntaxError: label not found` – d.k Oct 04 '17 at 09:07
  • yes, I meant this, that it throws on the `break foo` line and it seems illogical, at least just the error message itself. If the foo: 1 was treated like a label, so why the message is "label not found" or similar – d.k Oct 04 '17 at 09:08
  • sorry, I understood now, that the `break` statement is definitely expected to search for a label inside a loop or one of parent loops. So the message is also completely logical – d.k Oct 04 '17 at 09:10
  • Because the label is pointing at a single digit, `1`, which makes no sense. This, on the other hand, is fine: `foo:for(var i = 0; i < 10; i++){break foo}` – Cerbrus Oct 04 '17 at 09:11