Svelte: Labeled Statements

aryakris

Arya Krishna

Posted on May 2, 2022

Svelte: Labeled Statements

What is the $: in Svelte?

Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the $: JS label syntax.

Label statements can be seen in vanilla JavaScript in conjunction with loops and the break and continue keyword and attached.

What svelte does is it grabs this $: statement and we can add a dynamic calculation based on some other value.
$: uppercaseName = name.toUpperCase();

Here name.toUpperCase is a built in JavaScript Method and upperCaseName is a variable.

Svelte will recalculate the value for us whenever the name changes.

💖 💪 🙅 🚩
aryakris
Arya Krishna

Posted on May 2, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Svelte: Labeled Statements
svelte Svelte: Labeled Statements

May 2, 2022