javascript, svelte, tutorial

Before we start:

I decided to write this article because, while using Svelte, I found the $ symbol to be a bit mysterious at first. But the truth is, it's the key to implementing responsive logic. Through this article, I'll explain how the $ symbol works and how you can use it to create responsive logic in Svelte.

Content:

<script>
    export let title;
    let count = 0;
    $: {
        console.log(`multiple statements can be combined`);
        console.log(`the current title is ${title}`);
    }

</script>
<p>{title}</p>
<button on:click={() => { title = count++}}>TEST</button>

In this example, we'll explore how the $ symbol creates responsive variables. Whenever 'title' changes, the $ block gets executed, which contains multiple statements. Even though 'count' isn't directly used inside the $ block, 'title' is, creating a dependency. So, when 'title' changes, the entire $ block runs, including the console.log statements.

<script>
    export let num = 0;
    $: squared = num * num;
    $: cubed = squared * num;

    $: {
        console.log(`squared is ${squared}`)
        console.log(`cubed is ${cubed}`)
    }
</script>
<p>{squared}</p>
<p>{cubed}</p>
<button on:click ={()=>{num += 1}}>test</button>

This code demonstrates:

Defining variables using $.
Increasing the 'num' variable's value by clicking the button, causing changes in 'squared' and 'cubed' and triggering responsive updates.
When the dependencies for assignment change (in this example, it's 'num'), the variable's value gets updated before the component updates.
Any change in variables within ${} triggers the functions defined within $.

Conclusion

We embarked on a journey to demystify the enigmatic $ symbol in Svelte. It's far more than just a character; it's the linchpin for creating responsive logic within your Svelte components.

Hope you like it.

Understanding the $ in Svelte

Table of contents

Before we start:

Content:

Conclusion