Auto-subscription with $ prefix in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the $ prefix do in Svelte when used with a store variable?

The $ prefix automatically subscribes to the store and gives you the current value. It updates the value reactively when the store changes.

beginner

How do you use the $ prefix to read a store value inside a Svelte component?

You write $storeName in your script or markup. For example, if you have a store called count, use $count to get its current value reactively.

intermediate

Can you assign a new value to a store using the $ prefix in Svelte?

Yes! You can write $storeName = newValue to update the store's value. This automatically updates all parts of the app using that store.

beginner

What happens if you use a store variable without the $ prefix in Svelte?

Without the $, you get the store object itself, not its value. You would need to subscribe manually to get updates.

beginner

Why is auto-subscription with $ prefix helpful in Svelte?

It simplifies code by removing manual subscription and unsubscription. It keeps your UI in sync with store values automatically and cleanly.

In Svelte, what does writing $count do if count is a store?

A Gets the current value of the count store reactively

B Creates a new store named count

C Deletes the count store

D Assigns a new value to count store

Using $count reads the current value of the store and updates reactively when the store changes.

How do you update a writable store named 'score' using the $ prefix?

A $score = 10

B score.set(10)

C score = 10

D $score.set(10)

You can assign a new value directly with $score = 10; this updates the store reactively.

What do you get if you use 'count' without $ in Svelte?

A An error

B The current value of the store

C The store object itself

D A new store

Without $, you get the store object, not its value.

Which of these is true about auto-subscription with $ prefix?

A It requires manual subscription and unsubscription

B It automatically unsubscribes when the component is destroyed

C It only works with readable stores

D It disables reactivity

Svelte handles subscription and unsubscription automatically with the $ prefix.

Why is using $ prefix recommended in Svelte for stores?

A Makes stores read-only

B Prevents store updates

C Requires manual cleanup

D Simplifies code and keeps UI reactive

The $ prefix makes code simpler and keeps the UI in sync with store changes automatically.

Explain how the $ prefix works with stores in Svelte and why it is useful.

Think about how $storeName gives you the current value and updates automatically.

Describe the difference between using a store variable with and without the $ prefix in Svelte.

Consider what you get and how reactivity works in each case.

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