What behaviour does $: have when used instead of const/var/let

Question

$: variable = "some string";

This piece of code is syntactically valid in JS as I've learned from Svelte's conference video. I know how it works in Svelte but what purpose does it have in vanilla JS?

I've tried some searching around the web but couldn't find anything that isn't Svelte related.

Do any of you use it on regular basis? Does it have any use cases at all? I'll be glad for any pointers I could get.

That's a *labelled statement*, and `$` is the label. There's no functional reason to do that. — Pointy, Aug 28 '19 at 14:46
Possible duplicate of [Is using labels in JavaScript bad practice?](https://stackoverflow.com/questions/4906762/is-using-labels-in-javascript-bad-practice) — scrappedcola, Aug 28 '19 at 14:49

score 5 · Accepted Answer · answered Aug 28 '19 at 14:47

5

The syntax is a Labelled Statement.

It lets you declare an identifier that can be used with the break or continue statement on loops generally.

For example:

var str = "";

loop1:
for (var i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str);
// expected output: "0234"

Svelte takes advantage of the availability of the syntax to describe reactivity.

answered Aug 28 '19 at 14:47

Christian C. Salvadó

807,428
183
922
838

Insanely quick response, thank you, that seems to be what I've been looking for. – Anton Arnautov Aug 28 '19 at 14:52

score 0 · Answer 2 · answered Aug 28 '19 at 14:48

xy: is a label which you can use in pair with break and continue. $ has no special role in JavaScript, so just as you (or libraries/frameworks, like jQuery) can use it as identifier for a variable/function, it can also be a label.

See docs here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label

What behaviour does $: have when used instead of const/var/let

2 Answers2