Auto-subscription with $ prefix in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte component using a writable store and the $ prefix for auto-subscription:

import { writable } from 'svelte/store';

const count = writable(0);

function increment() {
  count.update(n => n + 1);
}

<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>

What will be displayed in the paragraph after clicking the button three times?

Svelte

import { writable } from 'svelte/store';

const count = writable(0);

function increment() {
  count.update(n => n + 1);
}

<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>

A Count: undefined

B Count: 0

C Count: 3

D Count: NaN

💡 Hint

Remember that the $ prefix automatically subscribes to the store and updates the value reactively.

The $count syntax subscribes to the count store and updates the displayed value whenever the store changes. Clicking the button three times increments the count from 0 to 3, so the paragraph shows "Count: 3".

📝 Syntax

intermediate

Which option correctly uses the $ prefix to auto-subscribe a readable store?

Given a readable store user, which of the following Svelte code snippets correctly displays the user's name using auto-subscription?

Svelte

import { readable } from 'svelte/store';

const user = readable({ name: 'Alice' });

<p>User: ???</p>

A <p>User: {$user.name}</p>

B <p>User: {$user}.name</p>

C <p>User: {$user['name']}</p>

D <p>User: {$user().name}</p>

💡 Hint

The $ prefix unwraps the store value directly, so you can access properties on it normally.

Option A correctly uses {$user.name} to access the name property of the store's value. Option A tries to access .name outside the braces, which is invalid. Option A uses bracket notation inside the braces, which is invalid syntax. Option A treats $user as a function call, which is incorrect.

🔧 Debug

advanced

Why does this Svelte component throw an error when using $ prefix?

Examine this Svelte component code:

let count = 0;

function increment() {
  count += 1;
}

<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>

Why does using {$count} cause an error here?

Svelte

let count = 0;

function increment() {
  count += 1;
}

<button on:click={increment}>Increment</button>
<p>Count: {$count}</p>

A Because $ prefix only works with Svelte stores, not plain variables

B Because count is not initialized before use

C Because the increment function is missing parentheses

D Because $count needs to be declared as a reactive statement

💡 Hint

Think about what the $ prefix does in Svelte.

The $ prefix in Svelte is a special syntax that auto-subscribes to stores. It does not work with normal variables like count. Since count is a plain number variable, using {$count} causes an error.

❓ state_output

advanced

What is the value of display after this code runs?

Given this Svelte store and reactive statement:

import { writable } from 'svelte/store';

const num = writable(5);

let display = '';

$: display = `Number is ${$num}`;

num.set(10);

What is the final value of display?

Svelte

import { writable } from 'svelte/store';

const num = writable(5);

let display = '';

$: display = `Number is ${$num}`;

num.set(10);

A Number is undefined

B Number is 10

C Number is $num

D Number is 5

💡 Hint

Reactive statements run whenever the store value changes.

The reactive statement $: display = `Number is ${$num}`; runs initially with $num as 5, then again after num.set(10) updates the store. So display ends as "Number is 10".

🧠 Conceptual

expert

Which statement about the $ prefix in Svelte is TRUE?

Choose the correct statement about the $ prefix auto-subscription feature in Svelte stores.

A The $ prefix only works with derived stores, not writable or readable stores

B The $ prefix can be used to auto-subscribe to any variable declared with let or const

C The $ prefix requires manual subscription and unsubscription in the component code

D Using the $ prefix automatically unsubscribes from the store when the component is destroyed

💡 Hint

Think about how Svelte manages store subscriptions with the $ prefix.

The $ prefix in Svelte automatically subscribes to the store and also handles unsubscribing when the component is destroyed, so you don't have to manage subscriptions manually. It works with writable, readable, and derived stores. It does not work with plain variables.

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