Auto-subscription with $ prefix in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to auto-subscribe to the store and display its value.

Svelte

<script>
  import { writable } from 'svelte/store';
  const count = writable(0);
</script>
<p>Count: {{$ [1] }}</p>

Drag options to blanks, or click blank then click option'

Aget

Bsubscribe

Ccount

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using the store variable without $ prefix, which won't auto-subscribe.

Trying to call subscribe() manually inside the template.

Using $count auto-subscribes to the store and updates the value reactively.

2fill in blank

medium

Complete the code to update the store value on button click using auto-subscription.

Svelte

<script>
  import { writable } from 'svelte/store';
  const count = writable(0);
  function increment() {
    count.[1](n => n + 1);
  }
</script>
<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>

Drag options to blanks, or click blank then click option'

Aset

Bupdate

Csubscribe

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using set without the new value.

Trying to use subscribe to change the value.

The update method lets you change the store value based on its current value.

3fill in blank

hard

Fix the error in the code to correctly auto-subscribe to the store value.

Svelte

<script>
  import { writable } from 'svelte/store';
  const name = writable('Alice');
</script>
<p>Hello, {{$ [1] }}</p>

Drag options to blanks, or click blank then click option'

Aname

B$name

Cname()

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Adding an extra $ prefix causing syntax errors.

Trying to call the store as a function.

Inside the template, use $name without extra $ or parentheses. The code already has $ before the blank, so just put name.

4fill in blank

hard

Fill both blanks to create a derived store and auto-subscribe to its value.

Svelte

<script>
  import { writable, derived } from 'svelte/store';
  const a = writable(2);
  const b = writable(3);
  const sum = derived([a, b], ([$a, $b]) => $a [1] $b);
</script>
<p>Sum: {{$ [2] }}</p>

Drag options to blanks, or click blank then click option'

A+

Bsum

C-

Da

Attempts:

3 left

💡 Hint

Common Mistakes

Using subtraction instead of addition.

Trying to use one of the original stores instead of the derived store.

The derived store sum adds $a and $b. Use sum with $ prefix to auto-subscribe.

5fill in blank

hard

Fill all three blanks to create a reactive statement that logs the store value whenever it changes.

Svelte

<script>
  import { writable } from 'svelte/store';
  const score = writable(0);

  $: console.log([1]); // logs the current score

  function increase() {
    score.[2](n => n + 1);
  }
</script>
<button on:click={increase}>Increase</button>
<p>Score: {{$ [3] }}</p>

Drag options to blanks, or click blank then click option'

A$score

Bupdate

Cscore

Dset

Attempts:

3 left

💡 Hint

Common Mistakes

Using set instead of update for incrementing.

Not using $ prefix in reactive statements causing no reactivity.

The reactive statement uses $score to auto-subscribe and log changes. The update method changes the store value. The template uses $score to display the current value, but since the $ is already in the code, just put score.

Practice

1. What does the $ prefix do when used with a Svelte store inside a component?

easy

A. It automatically subscribes to the store and updates the value reactively.

B. It creates a new store with the same value.

C. It unsubscribes from the store to stop updates.

D. It converts the store value to a string.

Solution

1. Step 1: Understand the role of the $ prefix

   The $ prefix in Svelte is used to auto-subscribe to a store and unwrap its current value.

2. Step 2: Recognize reactive updates

   Using $store makes the component update automatically when the store value changes, without manual subscription.

3. Final Answer:

   It automatically subscribes to the store and updates the value reactively. -> Option A

4. Quick Check:

   Auto-subscription = It automatically subscribes to the store and updates the value reactively. [OK]

Hint: Remember: $ means auto-subscribe and unwrap store value [OK]

Common Mistakes:

• Thinking $ creates a new store
• Believing $ unsubscribes from the store
• Assuming $ converts value to string

2. Which of the following is the correct syntax to use the $ prefix with a Svelte store named count inside a component?

easy

A. let value = count.$;

B. let value = count$;

C. let value = $count;

D. let value = $count();

Solution

1. Step 1: Identify correct $ prefix usage

   The $ prefix is placed directly before the store variable name to unwrap its value, like $count.

2. Step 2: Check syntax correctness

   let value = $count; uses let value = $count; which is valid syntax to get the current store value reactively.

3. Final Answer:

   let value = $count; -> Option C

4. Quick Check:

   Correct $ prefix syntax = let value = $count; [OK]

Hint: Place $ directly before store name, no parentheses [OK]

Common Mistakes:

• Putting $ after the store name
• Using $ as a method call
• Adding dot before $

3. Given the following Svelte code snippet, what will be displayed when the button is clicked twice?

  
   count.update(n => n + 1)}>Increment
  
Count: {$count}

medium

A. Count: undefined

B. Count: 1

C. Count: 0

D. Count: 2

Solution

1. Step 1: Understand the initial state and update

   The store count starts at 0. Each button click increases it by 1 using count.update(n => n + 1).

2. Step 2: Calculate value after two clicks

   After two clicks, the value increments twice: 0 + 1 + 1 = 2. The {$count} auto-subscribes and shows the current value.

3. Final Answer:

   Count: 2 -> Option D

4. Quick Check:

   2 increments = Count: 2 [OK]

Hint: Each click adds 1; $count shows current value [OK]

Common Mistakes:

• Forgetting the store updates on click
• Thinking $count is static
• Assuming initial value stays

4. What is the error in the following Svelte code using the $ prefix?

  
  
Hello, {currentName}!
   name.set('Bob')}>Change Name

medium

A. The store name cannot be updated with set.

B. The variable currentName should use $name to auto-subscribe.

C. The on:click event is missing parentheses.

D. The import statement is incorrect.

Solution

1. Step 1: Identify how to access store value reactively

   The variable currentName is assigned the store itself, not its value. To get the current value reactively, it should be let currentName = $name;.

2. Step 2: Understand the effect on UI

   Without $, currentName is the store object, so the UI shows it incorrectly and does not update on changes.

3. Final Answer:

   The variable currentName should use $name to auto-subscribe. -> Option B

4. Quick Check:

   Use $ to unwrap store value = The variable currentName should use $name to auto-subscribe. [OK]

Hint: Use $ prefix to unwrap store value for reactive variables [OK]

Common Mistakes:

• Assigning store object instead of its value
• Forgetting $ prefix for reactive updates
• Misunderstanding store.set usage

5. You have two writable stores in Svelte: countA and countB. You want to display their sum reactively in a component. Which is the correct way to do this using the $ prefix?

  
  
  
Sum: ???

hard

A. <p>Sum: {$countA + $countB}</p>

B. <p>Sum: {countA + countB}</p>

C. <p>Sum: {$countA + countB}</p>

D. <p>Sum: {countA.get() + countB.get()}</p>

Solution

1. Step 1: Understand how to unwrap multiple stores

   Using $countA and $countB unwraps their current values reactively.

2. Step 2: Combine unwrapped values in expression

   Adding $countA + $countB inside curly braces calculates the sum reactively and updates UI on changes.

3. Final Answer:

   <p>Sum: {$countA + $countB}</p> -> Option A

4. Quick Check:

   Use $ on both stores to sum reactively = <p>Sum: {$countA + $countB}</p> [OK]

Hint: Use $ on each store to unwrap before adding [OK]

Common Mistakes:

• Adding store objects instead of values
• Mixing $ prefix on only one store
• Using .get() which is not a Svelte store method