Reactive statements ($:) in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Svelte component?

Consider this Svelte code snippet:

  <script>
    let count = 1;
    $: doubled = count * 2;
  </script>

  <button on:click={() => count++}>Increment</button>
  <p>Doubled value: {doubled}</p>

What will be displayed after clicking the button twice?

Svelte

<script>
  let count = 1;
  $: doubled = count * 2;
</script>

<button on:click={() => count++}>Increment</button>
<p>Doubled value: {doubled}</p>

A Doubled value: 2

B Doubled value: 4

C Doubled value: 3

D Doubled value: 6

💡 Hint

Remember the reactive statement updates whenever count changes.

The variable doubled reacts to changes in count. Starting at 1, after two increments, count becomes 3, so doubled is 3 * 2 = 6. Thus, 'Doubled value: 6' is displayed.

❓ state_output

intermediate

What is the value of 'total' after this code runs?

Given this Svelte script:

<script>
  let a = 2;
  let b = 3;
  $: total = a + b;
  a = 5;
</script>

What is the value of total after these statements?

Svelte

<script>
  let a = 2;
  let b = 3;
  $: total = a + b;
  a = 5;
</script>

A 2

B 3

C 8

D 5

💡 Hint

Reactive statements run whenever their dependencies change.

Initially, total is 2 + 3 = 5. Then a changes to 5, so total updates to 5 + 3 = 8.

📝 Syntax

advanced

Which option causes a syntax error in Svelte reactive statements?

Identify the option that will cause a syntax error when used as a reactive statement in Svelte:

A $: doubled = count * 2 else doubled = 0;

B $: if (count > 5) doubled = count * 2;

C $: { doubled = count * 2 }

D $: doubled = count * 2;

💡 Hint

Check the syntax of conditional expressions inside reactive statements.

Option A uses an invalid syntax with 'else' outside a proper conditional block or ternary expression, causing a syntax error.

🔧 Debug

advanced

Why does this reactive statement not update as expected?

Consider this Svelte code:

<script>
  let items = [];
  $: count = items.length;
  function addItem() {
    items.push('new');
  }
</script>

<button on:click={addItem}>Add</button>
<p>Count: {count}</p>

Clicking 'Add' does not update the count. Why?

Svelte

<script>
  let items = [];
  $: count = items.length;
  function addItem() {
    items.push('new');
  }
</script>

<button on:click={addItem}>Add</button>
<p>Count: {count}</p>

A Because count is not declared with let.

B Because modifying array with push does not trigger reactivity in Svelte.

C Because the reactive statement is missing a dependency array.

D Because the addItem function is not called on button click.

💡 Hint

Think about how Svelte tracks changes to arrays.

Svelte reactivity tracks assignments, not mutations. Using push mutates the array but does not assign a new value, so reactive statements depending on items do not run.

🧠 Conceptual

expert

How does Svelte's reactive statement handle multiple dependencies?

Given this reactive statement:

$: result = a + b * c;

Which statement best describes when result updates?

A <code>result</code> updates whenever any of <code>a</code>, <code>b</code>, or <code>c</code> changes.

B <code>result</code> updates only when <code>b</code> or <code>c</code> changes.

C <code>result</code> updates only when <code>a</code> changes.

D <code>result</code> updates only when all of <code>a</code>, <code>b</code>, and <code>c</code> change simultaneously.

💡 Hint

Consider how reactive statements track dependencies automatically.

Svelte tracks all variables used in the reactive statement. If any of a, b, or c change, result recalculates.

Practice

1. What does the $: symbol do in a Svelte component?

easy

A. It imports a module asynchronously.

B. It marks a statement as reactive, so it runs when its dependencies change.

C. It declares a variable as a prop to the component.

D. It defines a CSS style block scoped to the component.

Solution

1. Step 1: Understand the role of $: in Svelte

   The $: prefix is used to mark statements as reactive, meaning they automatically re-run when any variable they use changes.

2. Step 2: Compare with other options

   Options A, B, and D describe unrelated Svelte features: async imports, props, and scoped styles, which do not use $:.

3. Final Answer:

   It marks a statement as reactive, so it runs when its dependencies change. -> Option B

4. Quick Check:

   Reactive statement = runs on data change [OK]

Hint: Remember $: means 'run this when data changes' [OK]

Common Mistakes:

• Confusing $: with props declaration
• Thinking $: imports modules
• Assuming $: styles CSS

2. Which of the following is the correct syntax to create a reactive statement in Svelte?

easy

A. let $: total = a + b;

B. const $total = a + b;

C. reactive total = a + b;

D. $: total = a + b;

Solution

1. Step 1: Identify correct reactive statement syntax

   In Svelte, reactive statements start with $: followed by an assignment or expression, e.g. $: total = a + b;.

2. Step 2: Eliminate incorrect options

   let $: total = a + b; incorrectly places $: after let. reactive total = a + b; uses a non-existent keyword reactive. const $total = a + b; uses $ in variable name incorrectly.

3. Final Answer:

   $: total = a + b; -> Option D

4. Quick Check:

   Reactive statement syntax = $: expression [OK]

Hint: Start reactive lines with $: and no let/const [OK]

Common Mistakes:

• Using let or const with $: reactive statements
• Writing $: inside variable names
• Using non-existent keywords like reactive

3. Consider this Svelte code:

let a = 2;
let b = 3;
$: sum = a + b;

// Later in code
b = 5;

What is the value of sum after b changes?

medium

A. 7

B. 5

C. 8

D. 3

Solution

1. Step 1: Understand reactive statement behavior

   The reactive statement $: sum = a + b; runs whenever a or b changes. Initially, a=2 and b=3, so sum=5.

2. Step 2: Update after changing b

   When b changes to 5, the reactive statement re-runs, updating sum = 2 + 5 = 7. But note the options carefully: 8 is 8, which is 2 + 6, not correct. 7 is 7, which matches calculation.

3. Final Answer:

   7 -> Option A

4. Quick Check:

   sum updates automatically = 7 [OK]

Hint: Reactive sums update immediately when inputs change [OK]

Common Mistakes:

• Not updating sum after b changes
• Adding wrong numbers
• Confusing initial and updated values

4. Identify the error in this Svelte reactive statement:

let count = 0;
$: count = count + 1;

medium

A. Reactive statements cannot use let variables.

B. Syntax error: missing semicolon after count declaration.

C. This causes an infinite loop because count updates itself reactively.

D. No error; this code increments count once.

Solution

1. Step 1: Analyze reactive statement effect

   The statement $: count = count + 1; runs whenever count changes. But it changes count itself, causing it to run again immediately, creating an infinite loop.

2. Step 2: Check other options

   Syntax error: missing semicolon after count declaration. is incorrect because semicolons are optional in JS. Reactive statements cannot use let variables. is false; reactive statements can use let variables. No error; this code increments count once. is wrong because the increment repeats endlessly.

3. Final Answer:

   This causes an infinite loop because count updates itself reactively. -> Option C

4. Quick Check:

   Reactive self-update causes infinite loop [OK]

Hint: Avoid reactive statements that update their own dependencies [OK]

Common Mistakes:

• Ignoring infinite loops from self-updating reactive statements
• Thinking semicolons cause errors
• Believing reactive statements can't use let variables

5. You want to create a reactive statement that updates discountedPrice only when price or discount change, but discount can sometimes be zero or null. Which reactive statement correctly handles this so discountedPrice is price when discount is falsy?

hard

A. $: discountedPrice = discount ? price - (price * discount) : price;

B. $: discountedPrice = price - (price * discount);

C. $: discountedPrice = price - (price * (discount || 1));

D. $: discountedPrice = price * discount || price;

Solution

1. Step 1: Understand the problem with falsy discount

   If discount is zero or null, we want discountedPrice to equal price (no discount). A simple calculation without check will give wrong results.

2. Step 2: Evaluate each option

   $: discountedPrice = price - (price * discount); always subtracts price * discount, so zero discount works but null may cause NaN. $: discountedPrice = discount ? price - (price * discount) : price; uses a conditional to check if discount is truthy, else returns price, correctly handling zero and null. $: discountedPrice = price - (price * (discount || 1)); uses discount || 1, which makes discount 1 if falsy, causing full price discount (wrong). $: discountedPrice = price * discount || price; multiplies price by discount or price, which gives wrong results when discount is zero.

3. Final Answer:

   $: discountedPrice = discount ? price - (price * discount) : price; -> Option A

4. Quick Check:

   Use conditional to handle falsy discount [OK]

Hint: Use conditional ?: to handle zero or null discount safely [OK]

Common Mistakes:

• Ignoring falsy discount causing wrong calculations
• Using || 1 which changes discount incorrectly
• Assuming zero discount subtracts correctly without check